@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

/**
 * DATAV3 master UI stylesheet
 * Version: 1.0.0
 *
 * A framework-compatible component layer for DATAV3 and selected Squarespace
 * pages. Load after Bootstrap 5.3.8 when using Bootstrap components such as
 * .form-select. This file intentionally contains no page reset, body styles,
 * or global element selectors, so it can coexist with Squarespace templates.
 *
 * This asset is deliberately NOT referenced by the DATAV3 web application.
 */

:root {
  /* Brand */
  --d3-brand-light: #0099ab;
  --d3-brand-medium: #006792;
  --d3-brand-dark: #044e68;

  /* Content and surfaces */
  --d3-color-text: #172033;
  --d3-color-text-muted: #5b677a;
  --d3-color-text-subtle: #667085;
  --d3-color-link: #006792;
  --d3-color-link-hover: #044e68;
  --d3-color-surface: #ffffff;
  --d3-color-surface-subtle: #f8fafc;
  --d3-color-surface-selected: #eef8fa;
  --d3-color-border: rgba(15, 23, 42, 0.12);
  --d3-color-border-strong: rgba(0, 103, 146, 0.24);
  --d3-color-focus: rgba(0, 153, 171, 0.42);
  --d3-color-danger: #b42318;
  --d3-color-danger-surface: #fff6f5;
  --d3-color-success: #067647;
  --d3-color-success-surface: #ecfdf3;
  --d3-color-warning: #9a6700;
  --d3-color-warning-surface: #fffaeb;

  /* Typography */
  --d3-font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --d3-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --d3-line-display: .95;

  /* Layout */
  --d3-content-max: 1120px;
  --d3-page-gutter: clamp(16px, 2.8vw, 44px);
  --d3-control-height: 44px;
  --d3-icon-control-size: 40px;

  /* Spacing */
  --d3-space-1: 4px;
  --d3-space-2: 8px;
  --d3-space-3: 12px;
  --d3-space-4: 16px;
  --d3-space-5: 20px;
  --d3-space-6: 24px;
  --d3-space-8: 32px;
  --d3-space-10: 40px;
  --d3-space-12: 48px;

  /* Shape, elevation, and motion */
  --d3-radius-sm: 8px;
  --d3-radius-md: 12px;
  --d3-radius-lg: 16px;
  --d3-radius-pill: 999px;
  --d3-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --d3-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.05);
  --d3-shadow-raised: 0 18px 45px rgba(15, 23, 42, 0.14);
  --d3-focus-ring: 0 0 0 3px rgba(0, 153, 171, 0.18);
  --d3-duration-fast: 140ms;
  --d3-duration-normal: 180ms;
  --d3-ease: ease;
}

/* Layout helpers */
.d3-page {
  width: min(var(--d3-content-max), 100%);
  margin-inline: auto;
  padding: var(--d3-space-6) var(--d3-page-gutter) var(--d3-space-12);
  color: var(--d3-color-text);
}

.d3-section {
  margin-top: var(--d3-space-8);
}

.d3-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d3-space-3);
}

.d3-stack-col {
  display: grid;
  gap: var(--d3-space-3);
}

.d3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--d3-space-6);
}

/* Typography */
.d3-page-title {
  margin: 0;
  color: var(--d3-color-text);
  font-family: var(--d3-font-display);
  font-size: clamp(2.8rem, 6.3vw, 5.15rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: var(--d3-line-display);
}

/* Text utilities */
.d3-text-ink { color: var(--d3-color-text); }
.d3-text-brand-dark { color: var(--d3-brand-dark); }
.d3-text-black { color: #000; }

.d3-display {
  font-family: var(--d3-font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: var(--d3-line-display);
}

.d3-section-title {
  margin: 0;
  color: var(--d3-color-text);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.d3-copy-muted,
.d3-card-meta,
.d3-field-hint {
  color: var(--d3-color-text-muted);
}

/* Links */
.d3-link {
  color: var(--d3-color-link);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}

.d3-link:hover {
  color: var(--d3-color-link-hover);
}

.d3-link:focus-visible,
.d3-btn:focus-visible,
.d3-btn-icon:focus-visible,
.d3-input:focus-visible,
.d3-select:focus-visible,
.d3-search-btn:focus-visible,
.d3-nav-link:focus-visible,
.d3-footer-link:focus-visible {
  outline: 0;
  box-shadow: var(--d3-focus-ring);
}

/* Buttons */
.d3-btn {
  min-height: var(--d3-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d3-space-2);
  padding: 0 var(--d3-space-4);
  border: 1px solid transparent;
  border-radius: var(--d3-radius-md);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background var(--d3-duration-normal) var(--d3-ease), border-color var(--d3-duration-normal) var(--d3-ease), color var(--d3-duration-normal) var(--d3-ease), box-shadow var(--d3-duration-normal) var(--d3-ease), transform var(--d3-duration-normal) var(--d3-ease);
}

.d3-btn:hover { transform: translateY(-1px); }
.d3-btn:active { transform: translateY(0); }
.d3-btn:disabled,
.d3-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .52; pointer-events: none; transform: none; }

.d3-btn-primary { border-color: var(--d3-brand-light); background: var(--d3-brand-light); color: #fff; }
.d3-btn-primary:hover { border-color: var(--d3-brand-dark); background: var(--d3-brand-dark); color: #fff; }

.d3-btn-secondary { border-color: var(--d3-brand-light); background: var(--d3-color-surface); color: var(--d3-brand-medium); }
.d3-btn-secondary:hover { border-color: var(--d3-brand-dark); background: #f2f9fb; color: var(--d3-brand-dark); }

.d3-btn-text { padding-inline: var(--d3-space-2); background: transparent; color: var(--d3-color-link); text-decoration: underline; text-underline-offset: .14em; }
.d3-btn-text:hover { background: transparent; color: var(--d3-brand-dark); }

.d3-btn-danger { border-color: var(--d3-color-danger); background: var(--d3-color-danger); color: #fff; }
.d3-btn-danger:hover { border-color: #8e1f17; background: #8e1f17; color: #fff; }

.d3-btn-sm { min-height: 36px; padding-inline: var(--d3-space-3); font-size: .82rem; }

.d3-btn-icon {
  width: var(--d3-icon-control-size);
  height: var(--d3-icon-control-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--d3-color-border-strong);
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
  color: var(--d3-brand-dark);
  cursor: pointer;
  line-height: 1;
  transition: background var(--d3-duration-normal) var(--d3-ease), border-color var(--d3-duration-normal) var(--d3-ease), box-shadow var(--d3-duration-normal) var(--d3-ease);
}

.d3-btn-icon:hover { border-color: rgba(0, 153, 171, .3); background: #f2f9fb; }

/* Selection controls */
.d3-billing-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--d3-space-2);
  padding: 5px 8px 5px 12px;
  border: 1px solid #dbe5ec;
  border-radius: var(--d3-radius-pill);
  background: var(--d3-color-surface);
  box-shadow: var(--d3-shadow-card);
  color: var(--d3-color-text-subtle);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}

.d3-billing-toggle-label.is-active { color: var(--d3-brand-dark); font-weight: 850; }

.d3-switch {
  width: 42px;
  height: 24px;
  position: relative;
  flex: 0 0 42px;
  padding: 0;
  border: 0;
  border-radius: var(--d3-radius-pill);
  background: #b8c5ce;
  cursor: pointer;
  transition: background var(--d3-duration-normal) var(--d3-ease), box-shadow var(--d3-duration-normal) var(--d3-ease);
}

.d3-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
  transition: transform var(--d3-duration-normal) var(--d3-ease);
}

.d3-switch[aria-checked="true"] { background: var(--d3-brand-light); }
.d3-switch[aria-checked="true"]::after { transform: translateX(18px); }
.d3-switch:focus-visible { outline: 0; box-shadow: var(--d3-focus-ring); }

.d3-discount {
  padding: 3px 6px;
  border-radius: var(--d3-radius-pill);
  background: #e1f4f5;
  color: var(--d3-brand-medium);
  font-size: .68rem;
  font-weight: 850;
}

.d3-segmented {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dde5eb;
  border-radius: var(--d3-radius-sm);
  background: #f7f9fb;
}

.d3-segment {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--d3-space-3);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #4b5a70;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1;
}

.d3-segment:hover { color: var(--d3-brand-dark); }
.d3-segment[aria-selected="true"] { border-color: #e1e8ee; background: var(--d3-color-surface); box-shadow: var(--d3-shadow-sm); color: var(--d3-brand-dark); font-weight: 850; }
.d3-segment:focus-visible { outline: 0; box-shadow: var(--d3-focus-ring); }

/* Dashboard information */
.d3-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--d3-space-3);
}

.d3-stat {
  min-height: 120px;
  padding: var(--d3-space-5);
  border: 1px solid #cbeaf0;
  border-radius: var(--d3-radius-md);
  background: #effafd;
}

.d3-stat-label { display: block; margin-bottom: var(--d3-space-1); color: #475b73; font-size: .82rem; font-weight: 650; }
.d3-stat-value { display: block; color: var(--d3-brand-light); font-size: clamp(1.65rem, 3vw, 2rem); font-weight: 850; letter-spacing: -.025em; line-height: 1.05; }
.d3-stat-meta { display: block; margin-top: var(--d3-space-2); color: #475b73; font-size: .78rem; }

.d3-dashboard-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  padding: var(--d3-space-5);
  border: 1px solid #d7e4ea;
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
}

.d3-dashboard-card-title { margin: var(--d3-space-3) 0 var(--d3-space-2); color: var(--d3-brand-light); font-size: 1.1rem; font-weight: 750; line-height: 1.25; }
.d3-dashboard-card-copy { margin: 0; color: #41536d; font-size: .9rem; line-height: 1.45; }
.d3-dashboard-card-action { margin-top: auto; padding-top: var(--d3-space-5); color: var(--d3-brand-medium); font-size: .85rem; font-weight: 800; text-decoration: none; }
.d3-dashboard-card-action:hover { color: var(--d3-brand-dark); }

/* Pricing cards */
.d3-pricing-page {
  /* Squarespace uses content-box globally; include page gutters in 100% width
     so the pricing layout cannot overflow or shift right on small screens. */
  box-sizing: border-box !important;
  width: min(1180px, 100%);
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 72px) var(--d3-page-gutter);
  color: var(--d3-color-text);
}
.d3-pricing-page-centered { text-align: center; }
.d3-pricing-page-centered .d3-pricing-hero { justify-content: center; }
.d3-pricing-page-centered .d3-pricing-intro { margin-inline: auto; }
.d3-pricing-page-centered .d3-pricing-grid { margin-inline: auto; text-align: left; }
.d3-pricing-hero { display: flex; align-items: end; justify-content: space-between; gap: var(--d3-space-8); margin-bottom: var(--d3-space-10); }
.d3-pricing-intro { max-width: 680px; margin: var(--d3-space-4) 0 0; color: var(--d3-color-text-muted); font-size: 1.08rem; line-height: 1.55; }
.d3-pricing-section { margin-top: clamp(48px, 8vw, 88px); }
.d3-pricing-section:first-of-type { margin-top: 0; }
.d3-pricing-section > .d3-pricing-grid { margin-top: var(--d3-space-6); }
.d3-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d3-space-4); }
.d3-pricing-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.d3-pricing-grid-enterprise { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.d3-pricing-section-intro { max-width: 650px; margin: var(--d3-space-3) 0 var(--d3-space-6); color: var(--d3-color-text-muted); font-size: .98rem; line-height: 1.55; }
.d3-pricing-section-centered,
.d3-pricing-section:has(.d3-pricing-grid-secondary),
.d3-pricing-section:has(.d3-pricing-grid-enterprise) { text-align: center; }
.d3-pricing-section-centered .d3-pricing-grid,
.d3-pricing-grid-secondary,
.d3-pricing-grid-enterprise { margin-inline: auto; text-align: left; }
.d3-pricing-section-centered .d3-pricing-section-intro,
.d3-pricing-section:has(.d3-pricing-grid-enterprise) .d3-pricing-section-intro { margin-inline: auto; }

.d3-pricing-card {
  position: relative;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: var(--d3-space-6);
  border: 1px solid rgba(0, 103, 146, .13);
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
  box-shadow: var(--d3-shadow-card);
}

.d3-pricing-card-popular { border: 2px solid var(--d3-brand-light); box-shadow: 0 20px 44px rgba(0, 103, 146, .12); }
.d3-pricing-tag { min-height: 20px; margin: 0 0 var(--d3-space-2); color: var(--d3-brand-light); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.d3-pricing-card-title { margin: 0; color: var(--d3-color-text); font-size: 1.18rem; font-weight: 800; line-height: 1.2; }
.d3-pricing-card-subtitle { margin: var(--d3-space-2) 0 0; color: var(--d3-color-text-muted); font-size: .88rem; font-weight: 650; }
.d3-pricing-features { display: grid; gap: .45rem; margin: var(--d3-space-5) 0 0; padding: 0; color: #526783; font-size: .9rem; line-height: 1.42; list-style: none; }
.d3-pricing-features li { position: relative; padding-left: 1rem; }
.d3-pricing-features li::before { content: ""; position: absolute; top: .47rem; left: .15rem; width: 5px; height: 5px; border-radius: 50%; background: var(--d3-brand-light); }
.d3-pricing-note { margin: var(--d3-space-4) 0 0; color: var(--d3-color-text-muted); font-size: .78rem; line-height: 1.45; }
.d3-pricing-price { margin-top: auto; padding-top: var(--d3-space-6); color: var(--d3-brand-dark); }
.d3-pricing-price strong { display: block; font-family: var(--d3-font-body); font-size: 2.3rem; font-weight: 850; letter-spacing: -.055em; line-height: 1; }
.d3-pricing-price span { display: block; margin-top: var(--d3-space-1); color: var(--d3-color-text-subtle); font-size: .78rem; font-weight: 700; }
.d3-pricing-card .d3-btn {
  /* Squarespace declares its link buttons as content-box. Keep the padded
     full-width CTA within the card without changing buttons elsewhere. */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch;
  margin-top: var(--d3-space-4);
}
.d3-pricing-card-badge { position: absolute; top: 1rem; right: 1rem; padding: .25rem .48rem; border-radius: var(--d3-radius-pill); background: var(--d3-brand-dark); color: #fff; font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.d3-pricing-card-popular .d3-pricing-card-badge { top: -.75rem; right: 1.2rem; padding: .32rem .68rem; box-shadow: 0 5px 12px rgba(4, 78, 104, .2); }
.d3-pricing-card-badge-new { border: 1px solid rgba(0, 153, 171, .25); background: #e1f4f5; color: var(--d3-brand-medium); }
.d3-pricing-badge-demo { display: flex; flex-wrap: wrap; gap: var(--d3-space-3); align-items: center; }
.d3-pricing-badge-demo .d3-pricing-card-badge { position: static; }
.d3-pricing-footer-note { margin: var(--d3-space-8) 0 0; color: var(--d3-color-text-muted); font-size: .82rem; text-align: center; }

/* Status pills */
.d3-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: var(--d3-radius-pill);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.d3-pill-success { background: #e1f5f7; color: #00729a; }
.d3-pill-warning { background: #fff1cc; color: #9a6700; }
.d3-pill-danger { background: #fee4e2; color: #b42318; }
.d3-pill-neutral { background: #eef2f6; color: #526278; }

/* Data tables */
.d3-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d7e4ea;
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
}

.d3-table {
  width: 100%;
  min-width: 760px;
  table-layout: auto;
  border-collapse: collapse;
  color: #24425c;
  font-size: .84rem;
}

.d3-table th,
.d3-table td {
  min-width: 140px;
  max-width: 300px;
  padding: var(--d3-space-3) var(--d3-space-4);
  border-bottom: 1px solid #dce5eb;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}
.d3-table th { background: #fbfcfd; color: #667895; font-size: .69rem; font-weight: 850; letter-spacing: .045em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.d3-table tbody tr:last-child td { border-bottom: 0; }
.d3-table tbody tr:hover { background: #f8fcfd; }
.d3-table-main { display: block; color: #004f70; font-weight: 800; }
.d3-table-sub { display: block; margin-top: var(--d3-space-1); color: #62748f; font-size: .78rem; line-height: 1.35; }

/* Cards and surfaces */
.d3-card {
  padding: var(--d3-space-6);
  border: 1px solid var(--d3-color-border);
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
}

.d3-card-elevated { box-shadow: var(--d3-shadow-card); }
.d3-card-raised { box-shadow: var(--d3-shadow-raised); }

.d3-card-title {
  margin: 0 0 var(--d3-space-2);
  color: var(--d3-color-text);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
}

.d3-card-meta { margin: 0; font-size: .9rem; }

.d3-empty {
  padding: var(--d3-space-12) var(--d3-space-6);
  border: 1px dashed #cbd5e1;
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface-subtle);
  text-align: center;
}

.d3-empty-title { margin: 0 0 var(--d3-space-2); color: var(--d3-color-text); font-size: 1.125rem; font-weight: 800; }
.d3-empty-copy { margin: 0 0 var(--d3-space-4); color: var(--d3-color-text-muted); }

/* Forms. Use .form-select.d3-select after Bootstrap for standard dropdowns. */
.d3-field { display: grid; gap: var(--d3-space-2); }
.d3-label { color: var(--d3-color-text); font-size: .88rem; font-weight: 750; }
.d3-field-hint { margin: 0; font-size: .82rem; }

.d3-input,
.d3-textarea {
  width: 100%;
  min-height: var(--d3-control-height);
  padding: 0 var(--d3-space-3);
  border: 1px solid var(--d3-color-border);
  border-radius: var(--d3-radius-sm);
  background: var(--d3-color-surface);
  color: var(--d3-color-text);
  font: inherit;
}

.d3-textarea { min-height: 112px; padding-block: var(--d3-space-3); resize: vertical; }
.d3-input::placeholder,
.d3-textarea::placeholder { color: #94a3b8; }

.d3-input:focus,
.d3-textarea:focus,
.form-select.d3-select:focus {
  border-color: var(--d3-color-focus);
  outline: 0;
  box-shadow: var(--d3-focus-ring);
}

.form-select.d3-select {
  min-height: var(--d3-control-height);
  border-color: var(--d3-color-border);
  border-radius: var(--d3-radius-sm);
  color: var(--d3-color-text);
}

.d3-input-action,
.d3-search {
  min-height: var(--d3-control-height);
  display: flex;
  overflow: hidden;
  border: 1px solid var(--d3-color-border);
  border-radius: var(--d3-radius-sm);
  background: var(--d3-color-surface);
}

.d3-input-action:focus-within,
.d3-search:focus-within { border-color: var(--d3-color-focus); box-shadow: var(--d3-focus-ring); }
.d3-input-action .d3-input,
.d3-search-input { min-width: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; }

.d3-search-input { flex: 1 1 auto; }

.d3-input-action-btn,
.d3-search-btn {
  width: var(--d3-control-height);
  flex: 0 0 var(--d3-control-height);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--d3-color-border);
  background: var(--d3-brand-light);
  color: #fff;
  cursor: pointer;
}

.d3-input-action-btn:hover,
.d3-search-btn:hover { background: var(--d3-brand-dark); }

.d3-search-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.d3-field-error {
  padding: var(--d3-space-3);
  border: 1px solid rgba(180, 35, 24, .22);
  border-radius: var(--d3-radius-sm);
  background: var(--d3-color-danger-surface);
  color: #9c291e;
  font-size: .85rem;
  font-weight: 650;
}

/* Status and labels */
.d3-alert {
  display: flex;
  gap: var(--d3-space-3);
  padding: var(--d3-space-4);
  border: 1px solid;
  border-radius: var(--d3-radius-sm);
  font-size: .9rem;
}

.d3-alert-title { display: block; font-weight: 800; }
.d3-alert-copy { margin: 2px 0 0; }
.d3-alert-success { border-color: rgba(6, 118, 71, .24); background: var(--d3-color-success-surface); color: #065f46; }
.d3-alert-warning { border-color: rgba(154, 103, 0, .24); background: var(--d3-color-warning-surface); color: #7a4b00; }
.d3-alert-error { border-color: rgba(180, 35, 24, .24); background: var(--d3-color-danger-surface); color: #9c291e; }

.d3-badge,
.d3-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--d3-space-2);
  border: 1px solid transparent;
  border-radius: var(--d3-radius-pill);
  background: #e1f4f5;
  color: var(--d3-brand-medium);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Navigation */
.d3-nav,
.d3-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d3-space-1); }

.d3-nav-link {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--d3-brand-medium);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}

.d3-nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: var(--d3-radius-pill);
  background: transparent;
}

.d3-nav-link:hover,
.d3-nav-link[aria-current="page"] { color: var(--d3-brand-dark); }
.d3-nav-link[aria-current="page"] { font-weight: 850; }
.d3-nav-link[aria-current="page"]::after { background: var(--d3-brand-light); }

.d3-footer-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #276783;
  font-size: .78rem;
  font-weight: 760;
  text-decoration: none;
}

.d3-footer-link:hover,
.d3-footer-link[aria-current="page"] { border-color: rgba(0, 103, 146, .16); background: var(--d3-color-surface-selected); color: #075674; }
.d3-footer-link[aria-current="page"] { font-weight: 850; }

@media (max-width: 575.98px) {
  .d3-page { padding-top: var(--d3-space-4); padding-bottom: var(--d3-space-10); }
  .d3-card { padding: var(--d3-space-4); }
  .d3-btn-mobile-full { width: 100%; }
  .d3-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d3-footer-link { min-height: 42px; justify-content: center; border-color: rgba(0, 103, 146, .1); background: #f7fafb; }
}

@media (prefers-reduced-motion: reduce) {
  .d3-btn,
  .d3-btn-icon { transition-duration: .01ms !important; }
}

/* Style-guide and reusable product-shell composition. */
.d3-site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.d3-header-inner,
.d3-footer-inner {
  width: min(var(--d3-content-max), 100%);
  margin-inline: auto;
  padding-inline: var(--d3-page-gutter);
}

.d3-header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--d3-space-6);
}

.d3-wordmark {
  color: var(--d3-color-text);
  font-size: .9rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
}

.d3-header-nav { margin-inline: auto; gap: clamp(12px, 2.2vw, 32px); }
.d3-header-actions { display: flex; gap: var(--d3-space-2); }

.d3-guide-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--d3-space-8);
  align-items: end;
  margin-bottom: var(--d3-space-12);
}

.d3-eyebrow {
  margin: 0 0 var(--d3-space-2);
  color: var(--d3-brand-medium);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.d3-lede { max-width: 680px; margin: 0; color: var(--d3-color-text-muted); font-size: 1.08rem; }
.d3-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d3-space-6); }
.d3-demo-wide { grid-column: 1 / -1; }

.d3-demo {
  min-width: 0;
  padding: var(--d3-space-6);
  border: 1px solid var(--d3-color-border);
  border-radius: var(--d3-radius-md);
  background: var(--d3-color-surface);
  box-shadow: var(--d3-shadow-card);
}

.d3-demo-label { display: block; margin-bottom: var(--d3-space-4); color: var(--d3-color-text-subtle); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.d3-demo-note { margin: var(--d3-space-4) 0 0; color: var(--d3-color-text-muted); font-size: .85rem; }

.d3-footer {
  margin-top: var(--d3-space-12);
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: var(--d3-color-surface);
}

.d3-footer-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--d3-space-6); padding-block: var(--d3-space-4); }
.d3-footer-brand { color: var(--d3-color-text-subtle); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.d3-footer-brand .d3-wordmark { margin-right: var(--d3-space-2); font-size: .86rem; }

.d3-alert-list { display: grid; gap: var(--d3-space-3); }
.d3-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d3-space-4); }

.d3-token-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.d3-token-table th,
.d3-token-table td { padding: var(--d3-space-3); border-bottom: 1px solid var(--d3-color-border); text-align: left; }
.d3-token-table th { color: var(--d3-color-text-muted); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.d3-swatch { width: 32px; height: 32px; display: inline-block; vertical-align: middle; border: 1px solid var(--d3-color-border); border-radius: var(--d3-radius-sm); background: var(--d3-swatch-color); }

@media (max-width: 767.98px) {
  .d3-site-header { position: static; }
  .d3-header-inner { flex-wrap: wrap; gap: var(--d3-space-3); padding-block: var(--d3-space-2); }
  .d3-header-nav { order: 3; width: 100%; margin: -4px 0 0; overflow-x: auto; flex-wrap: nowrap; }
  .d3-guide-intro { grid-template-columns: 1fr; gap: var(--d3-space-4); }
  .d3-demo-grid,
  .d3-card-grid,
  .d3-pricing-grid,
  .d3-pricing-grid-secondary { grid-template-columns: 1fr; }
  .d3-pricing-hero { align-items: stretch; flex-direction: column; }
  .d3-pricing-page-centered .d3-pricing-section { text-align: left; }
  .d3-pricing-page-centered .d3-pricing-section .d3-pricing-grid { margin-inline: 0; }
  .d3-pricing-page-centered .d3-pricing-section .d3-pricing-section-intro { margin-inline: 0; }
}

@media (max-width: 575.98px) {
  .d3-demo { padding: var(--d3-space-4); }
  .d3-footer-inner { min-height: 0; align-items: stretch; flex-direction: column; padding-block: var(--d3-space-5); }
  .d3-footer-brand { text-align: center; }
}