/* ==========================================================================
   ARTICLE LAYOUT
   Hero, Body, Sidebar, FAQ, CTA Box, Tables
   ========================================================================== */

/* --- Attribution (page metadata footer) --- */
.bf-attribution {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #e5e7eb);
  text-align: center;
}
.bf-attribution-author {
  font-weight: 500;
}
.bf-attribution time {
  white-space: nowrap;
}

/* Article Hero (Dark) */
.article-header-section {
  background-color: var(--bg-dark);
  color: #ffffff;
  padding: 100px 0;
  position: relative;
}

.article-header-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.article-header-section h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
  color: #f8fafc;
}

.article-meta-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 0.95rem;
  color: var(--text-light);
  font-weight: 500;
}

.article-meta-header span {
  color: #ffffff;
}
.article-meta-header .dot {
  color: var(--accent-primary);
  margin: 0 4px;
}

/* Main Layout Grid */
.article-layout-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  padding: 64px 24px 120px;
  align-items: start;
}

@media (max-width: 1024px) {
  .article-layout-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 64px 0 80px;
  }
  .article-sidebar-container {
    position: static;
  }
}

@media (max-width: 768px) {
  .article-header-section {
    padding: 72px 0 64px;
  }
  .article-header-section h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: 20px;
  }
  .article-meta-header {
    gap: 12px;
    font-size: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .article-layout-container {
    padding: 48px 24px 64px;
    gap: 40px;
  }
  .article-content {
    font-size: 1rem;
  }
  .article-intro {
    font-size: 1.1rem;
    margin-bottom: 48px;
  }
  .article-section {
    margin-bottom: 48px;
  }
  .article-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .article-section h3 {
    font-size: 1.2rem;
    margin: 36px 0 16px;
  }
  .article-section ul li {
    padding-left: 24px;
  }
  .article-section ul li::before {
    left: 4px;
  }
  .faq-section {
    margin-top: 48px;
  }
  .faq-section h2 {
    font-size: 1.5rem;
  }
  .faq-item {
    padding: 24px 0;
  }
  .faq-item h3 {
    font-size: 1.05rem;
  }
  .faq-item p {
    font-size: 0.95rem;
  }
  .cta-box {
    padding: 36px 24px;
    margin-top: 48px;
  }
  .cta-box h3 {
    font-size: 1.5rem;
  }
  .cta-box p {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  /* Content components mobile */
  .numbered-item,
  .mistake-item,
  .step-item,
  .plastic-use-item,
  .metric-item {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
  .numbered-item-number,
  .mistake-number,
  .step-number,
  .plastic-use-number,
  .metric-number {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .numbered-item-title h3,
  .mistake-title h3,
  .plastic-use-title h3,
  .metric-title-container h3,
  .step-item > h3 {
    font-size: 1.05rem;
    gap: 12px;
  }
  .tool-category > h2 {
    font-size: 1.25rem;
  }
  .tool-item {
    padding: 20px;
  }
  .tool-item h3 {
    font-size: 0.95rem;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 36px;
  }
  .feature-row:nth-child(even) {
    direction: ltr;
  }
  .features-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-item {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .article-content {
    font-size: 0.95rem;
  }
  .article-section h2 {
    font-size: 1.35rem;
  }
  .article-content th,
  .article-section th {
    padding: 10px 10px;
    font-size: 0.7rem;
  }
  .article-content td,
  .article-section td {
    padding: 10px 10px;
    font-size: 0.82rem;
  }
  .cta-box {
    padding: 28px 20px;
  }
}

/* Article Content Typography */
.article-content {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 820px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Desktop two-column layout: left-align the reading column to the frame edge
   so body copy lines up with the breadcrumb, header, and CTA. Below 1025px the
   sidebar drops under the article and the column re-centers (rule above). */
@media (min-width: 1025px) {
  .article-content {
    margin-left: 0;
  }
}

.article-intro {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 64px;
  font-weight: 400;
}

.article-intro p {
  margin-bottom: 24px;
}

.article-section {
  margin-bottom: 64px;
}

.article-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.article-section h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
}

.article-section p {
  margin-bottom: 24px;
}

.article-section a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
}
.article-section a:hover {
  color: var(--accent-hover);
}

.article-section strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Article Lists */
.article-section ul,
.article-section ol {
  margin-bottom: 32px;
  padding-left: 0;
  list-style: none;
}

.article-section ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
}

.article-section ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

/* Data Tables -- base styles for any <table> inside article content */
.article-content table,
.article-section table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
  margin: 32px 0 40px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-content thead,
.article-section thead {
  background: var(--bg-subtle);
}

.article-content th,
.article-section th {
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}

.article-content td,
.article-section td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
  vertical-align: top;
  line-height: 1.5;
}

.article-content tr:last-child td,
.article-section tr:last-child td {
  border-bottom: none;
}

.article-content tr:hover,
.article-section tr:hover {
  background: var(--bg-subtle);
}

/* Table responsive wrapper -- overflow scroll on small screens */
.article-content .table-wrapper,
.article-section .table-wrapper,
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 32px 0 40px;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
  margin: 0;
}

/* Legacy class support */
.feature-comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.feature-comparison-table thead {
  background: var(--bg-subtle);
}

.feature-comparison-table th {
  color: var(--text-main);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border-light);
}

.feature-comparison-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-main);
  vertical-align: top;
}

.feature-comparison-table tr:last-child td {
  border-bottom: none;
}
.feature-comparison-table tr:hover {
  background: var(--bg-subtle);
}

/* ==========================================================================
   CONTENT COMPONENTS - Reusable patterns inside article/template body
   ========================================================================== */

/* --- Numbered Items (mistakes, steps, metrics, uses) --- */
.numbered-item,
.mistake-item,
.step-item,
.plastic-use-item,
.metric-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-light);
}
.numbered-item:last-child,
.mistake-item:last-child,
.step-item:last-child,
.plastic-use-item:last-child,
.metric-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.numbered-item-number,
.mistake-number,
.step-number,
.plastic-use-number,
.metric-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.numbered-item-title,
.mistake-title,
.plastic-use-title,
.metric-title-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.numbered-item-title h3,
.mistake-title h3,
.plastic-use-title h3,
.metric-title-container h3,
.step-item > h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Step items use an inline .step-number span inside the h3 instead of a
   wrapper title div. Make the h3 a flex row so the number sits beside the
   title text rather than stacking above it. */
.step-item > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.3;
}

.numbered-item-body p,
.mistake-item > p,
.step-item > p,
.plastic-use-item > p,
.metric-item > p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.numbered-item > ul,
.mistake-item > ul,
.step-item > ul,
.plastic-use-item > ul,
.metric-item > ul {
  margin-bottom: 16px;
}

/* --- Formulas & inline code ---
   Clean, business-professional equation block. Light background, crisp 1px
   border, typographic label above the formula, monospace body. No gradients,
   no glows, no decorative dots. */

.article-content > code,
.article-content p code,
.article-content li code,
.article-content td code {
  font-family:
    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.88em;
  font-feature-settings:
    'tnum' on,
    'calt' off;
  padding: 2px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: var(--text-main);
  white-space: nowrap;
}

.article-content .formula {
  display: block;
  margin: 20px 0;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: var(--text-main);
  font-family:
    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.7;
  font-feature-settings:
    'tnum' on,
    'calt' off;
  letter-spacing: 0;
  /* white-space: normal lets the formula flow as one sentence and wrap
     naturally at word boundaries. pre-wrap would preserve any stray
     newlines/indentation that the HTML formatter inserts inside the tag. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
}

.article-content .formula .formula-label {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
  line-height: 1;
}

@media (max-width: 768px) {
  .article-content .formula {
    padding: 16px 18px;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 16px 0;
  }
  .article-content .formula .formula-label {
    font-size: 0.62rem;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
}

/* --- Tool/Resource Cards --- */
.tool-category {
  margin-bottom: 48px;
}

.tool-category > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.tool-category > p {
  margin-bottom: 24px;
  color: var(--text-muted);
}

.tool-item {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-bottom: 16px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.tool-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.06);
}

.tool-item h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.tool-item p {
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.15s;
}
.tool-link:hover {
  color: var(--accent-hover);
}

/* --- Feature Rows (template two-column content + image) --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-light);
}
.feature-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.feature-row:nth-child(even) {
  direction: rtl;
}
.feature-row:nth-child(even) > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .feature-row:nth-child(even) {
    direction: ltr;
  }
}

.feature-content h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 12px;
}

.feature-content p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.feature-image {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Feature List (template bullet features) --- */
.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0 48px;
}
@media (max-width: 640px) {
  .features-list {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.feature-item:hover {
  border-color: #cbd5e1;
}

.feature-item h3,
.feature-item strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.feature-item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* --- Conclusion section --- */
.conclusion {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid var(--border-light);
}

.conclusion h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
}

/* --- Template preview (rfp-template legacy) --- */
.template-preview-large {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 40px;
  margin: 32px 0;
  box-shadow: var(--shadow-subtle);
}

.template-preview-large .document-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}

.template-preview-large .section {
  margin-bottom: 24px;
}

.template-preview-large .section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.template-preview-large .section-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.template-preview-large .section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.template-preview-large .placeholder {
  background: var(--bg-subtle);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 8px;
}

.template-preview-large .subsection {
  margin-left: 38px;
  margin-bottom: 16px;
}

.template-preview-large .subsection-header {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 8px;
}

.template-preview-large .toc {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 16px 0 24px;
}

.template-preview-large .toc ol {
  padding-left: 20px;
  margin: 0;
}

.template-preview-large .toc li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Legacy modal/form from rfp-template (hide if no JS) */
.email-modal {
  display: none;
}
.email-capture-form {
  display: none;
}

/* FAQ Section */
.faq-section {
  margin-top: 80px;
}

.faq-section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 32px 0;
}

.faq-item:first-of-type {
  border-top: 1px solid var(--border-light);
}

.faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 16px;
  line-height: 1.4;
}

.faq-item p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* CTA Box */
.cta-box {
  margin-top: 80px;
  background-color: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 56px 48px;
  text-align: center;
  border: 1px solid var(--border-light);
}

.cta-box h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.cta-box p {
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 1.125rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar (Sticky) */
.article-sidebar-container {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.related-resources-sidebar h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.related-resources-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.related-item a {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none;
}

.related-item a:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.1);
}

.resource-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  margin-bottom: 12px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-radius: 3px;
}

.related-item h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.4;
}

.related-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   LEGAL PAGES (Terms of Service, Privacy Policy)
   ========================================================================== */

.legal-hero {
  background-color: var(--bg-dark);
  color: #ffffff;
  padding: 88px 0 72px;
  text-align: center;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.legal-hero .last-updated {
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 500;
}

.legal-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 100px;
}

.legal-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.legal-intro {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 48px;
  font-weight: 400;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-light);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 48px 0 20px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.legal-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-content h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 28px 0 14px;
  letter-spacing: -0.01em;
}

.legal-content p {
  margin-bottom: 20px;
}

.legal-content a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.legal-content a:hover {
  color: var(--accent-hover);
}

.legal-content strong {
  color: var(--text-main);
  font-weight: 600;
}

.legal-content ul {
  margin-bottom: 24px;
  padding-left: 0;
  list-style: none;
}

.legal-content ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

@media (max-width: 768px) {
  .legal-hero {
    padding: 64px 0 48px;
  }
  .legal-hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  .legal-container {
    padding: 40px 16px 64px;
  }
  .legal-content h2 {
    font-size: 1.2rem;
    margin-top: 36px;
    padding-top: 20px;
  }
  .legal-intro {
    font-size: 1.05rem;
    margin-bottom: 36px;
    padding-bottom: 36px;
  }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-hero {
  background-color: var(--bg-dark);
  color: #ffffff;
  padding: 88px 0 72px;
  text-align: center;
}

.contact-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.contact-hero p {
  font-size: 1.1rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

.contact-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px 24px 100px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-info h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
}

.info-icon svg {
  width: 18px;
  height: 18px;
}

.info-content h3 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-content p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.info-content a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.info-content a:hover {
  color: var(--accent-hover);
}

.contact-topics {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.contact-topics h3 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-topics ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-topics li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-topics li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

/* Contact Form */
.contact-form-wrapper {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-subtle);
}

.contact-form-wrapper h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-group label .required {
  color: var(--accent-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  color: var(--text-main);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-base);
  box-shadow: 0 0 0 3px rgba(224, 93, 54, 0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-light);
  font-size: 0.85rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: #ffffff;
  background: var(--accent-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 4px rgba(224, 93, 54, 0.2);
  text-decoration: none;
  margin-top: 4px;
}

.submit-btn:hover {
  background: var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(224, 93, 54, 0.3);
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn svg {
  flex-shrink: 0;
}

.form-note {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-light);
  line-height: 1.5;
  text-align: center;
}

.form-note a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 64px 0 48px;
  }
  .contact-hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  .contact-container {
    padding: 40px 16px 64px;
  }
  .contact-form-wrapper {
    padding: 24px 16px;
  }
}

/* ─── Calculator Bridge CTA ─── */

.bf-calc-bridge {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-base, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.06);
}
.bf-calc-bridge-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.bf-calc-bridge-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle, #fff1ec);
  color: var(--accent-primary, #e05d36);
  border-radius: var(--radius-md, 8px);
}
.bf-calc-bridge-content {
  flex: 1;
  min-width: 0;
}
.bf-calc-bridge-heading {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light, #94a3b8);
}
.bf-calc-bridge-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-main, #0f172a);
}
.bf-calc-bridge-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
}
.bf-calc-bridge-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent-primary, #e05d36);
  color: #fff;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
}
.bf-calc-bridge-btn:hover {
  background: var(--accent-hover, #c24a26);
}
@media (max-width: 640px) {
  .bf-calc-bridge-inner {
    flex-wrap: wrap;
  }
  .bf-calc-bridge-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}