/* ============================================================
   SECTION 45 — marketing / SEO page styles
   Layered on top of app.css, which supplies the design tokens.
   ============================================================ */

body.marketing main{ min-height:60vh }
body.marketing{ padding-bottom:env(safe-area-inset-bottom) }
.marketing .wrap{ overflow-wrap:anywhere }

.marketing h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(28px,5.4vw,46px);line-height:1.08;margin:0 0 16px;
}
.marketing h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(21px,3.4vw,29px);line-height:1.2;margin:44px 0 14px;
  padding-top:22px;border-top:1px solid var(--rule);
}
.marketing h3{ font-size:19px;margin:0 0 8px }
.marketing p{ margin:0 0 15px;line-height:1.65 }
/* Inline prose links are brass. Buttons and cards must NOT inherit that —
   brass text on a brass button is invisible, which is exactly what happened. */
.marketing main a:not(.btn):not(.linkcard):not(.chip){
  color:var(--brass);text-decoration:underline;text-underline-offset:3px;
}
.marketing main a.btn,.marketing main a.linkcard,.marketing .crumbs a,
.marketing .prevnext a{ text-decoration:none }

/* Buttons keep their own colours at higher specificity than any link rule. */
.marketing main a.btn-primary,
body.marketing a.btn-primary{ color:#0B0F14;background:var(--brass);border-color:var(--brass) }
[data-theme="light"] body.marketing a.btn-primary{ color:#FFFFFF }
.marketing main a.btn-ghost,
body.marketing a.btn-ghost{ color:var(--text);background:transparent;border-color:var(--rule-strong) }
.marketing main a.btn-ghost:hover{ color:var(--brass);border-color:var(--brass) }
.marketing main a.linkcard{ color:inherit }
.marketing main a.linkcard h3{ color:var(--brass) }

.btn-sm{ padding:9px 18px;font-size:13.5px }

/* breadcrumbs */
.crumbs{ font-size:12.5px;color:var(--text-dim);margin-bottom:18px;font-family:var(--mono) }
.crumbs a{ color:var(--text-dim) }
.crumbs a:hover{ color:var(--brass) }

/* the big citation on a mapping page */
.bigcite{
  font-size:clamp(19px,4.6vw,32px);margin:8px 0 22px;
  border-top:0;border-bottom:1px solid var(--rule);padding:0 0 18px;
}

/* converter widget */
.conv{ margin:26px 0 }
.conv input{ font-size:17px;font-family:var(--mono) }
.conv-res{ margin-top:18px }
.conv-hit{
  border:1px solid var(--rule);border-left:3px solid var(--brass);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px;margin-bottom:10px;
  background:var(--surface-2);
}
.conv-hit .row{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-family:var(--mono);font-size:16px;font-weight:600;
}
.conv-hit .t{ font-family:var(--body);font-weight:400;font-size:14.5px;color:var(--text-dim);margin:7px 0 0 }
.conv-hit .nb{ font-size:13px;margin:9px 0 0;color:var(--text-dim) }
.conv-hit a.more{ font-size:12.5px;font-family:var(--mono) }
.conv-empty{ color:var(--text-dim);font-size:14.5px;padding:14px 0 }

/* verification warning — appears on every converter page */
.verify{
  border:1.5px solid var(--redtape);border-radius:var(--r);
  background:color-mix(in srgb,var(--redtape) 7%,transparent);
  padding:15px 17px;font-size:14px;margin:22px 0;
}

/* tables */
.maptable,.facts{ width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 10px }
.maptable th,.maptable td,.facts th,.facts td{
  text-align:left;padding:10px 9px;border-bottom:1px solid var(--rule);vertical-align:top;
}
.maptable th{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;
}
.facts th{ width:38%;font-weight:600;color:var(--text-dim);font-size:13.5px }
.maptable td.num,.maptable th.num{ text-align:right }
.maptable tbody tr:hover{ background:var(--surface) }
.small{ font-size:12px }
@media(max-width:560px){
  .maptable,.facts{ font-size:13px }
  .maptable th,.maptable td,.facts th,.facts td{ padding:8px 5px }
  /* 254-row converter tables must scroll, not overflow the viewport */
  .maptable{
    display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  .facts th{ width:44% }
}

/* lists */
.marketing .ticks{ margin:14px 0 18px;max-width:none }
.ticks.good li::before{ content:"✓";color:var(--stamp) }
.ticks.bad li::before{ content:"✕";color:var(--redtape) }
.cols{
  columns:2;column-gap:26px;list-style:none;padding:0;margin:14px 0 18px;font-size:13.5px;
}
.cols li{ break-inside:avoid;padding:3px 0 }
@media(max-width:520px){ .cols{ columns:1 } }
.steps{ padding-left:20px;margin:14px 0 18px }
.steps li{ margin-bottom:11px;line-height:1.6 }

/* cards */
.linkcard{ display:block;transition:.22s var(--ease) }
.linkcard:hover{ border-color:var(--brass);transform:translateY(-2px) }
.linkcard p{ color:var(--text-dim);font-size:14px;margin:0 }
.cta-card{ border-color:var(--brass);background:color-mix(in srgb,var(--brass) 5%,var(--surface));margin:26px 0 }
.cta-card .btn{ margin-top:8px;margin-right:8px }

/* question preview blocks on subject pages */
.qprev{ border:1px solid var(--rule);border-radius:var(--r);padding:17px;margin-bottom:13px;background:var(--surface) }
.qprev-q{ font-weight:500;font-size:15.5px;margin:0 0 12px }
.qprev-o{ margin:0 0 12px;padding-left:22px;font-size:14.5px;color:var(--text-dim) }
.qprev-o li{ padding:3px 0 }
.qprev details summary{
  cursor:pointer;font-size:13px;font-family:var(--mono);color:var(--brass);
  padding:7px 0;list-style:none;
}
.qprev details summary::-webkit-details-marker{ display:none }
.qprev details summary::before{ content:"▸ ";display:inline-block;transition:transform .2s }
.qprev details[open] summary::before{ content:"▾ " }
.qprev details p{ font-size:14px;margin:10px 0 0 }

/* prev / next on mapping pages */
.prevnext{
  display:flex;justify-content:space-between;gap:14px;margin-top:34px;
  padding-top:18px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13.5px;
}
.prevnext a{ color:var(--text-dim) }
.prevnext a:hover{ color:var(--brass) }

/* print — the tabbing plan and exam-day kit are meant to be printed */
@media print{
  .topbar,.foot,.btn,.verify,.cta-card,.watermark,.toast,.skip{ display:none !important }
  body{ background:#fff !important;color:#000 !important }
  .marketing h2{ border-color:#ccc }
  .maptable th,.maptable td{ border-color:#ccc }
  a{ color:#000 !important;text-decoration:none !important }
  .wrap{ padding:0 !important;max-width:none !important }
}