/* Crosswell layout — page structure for the HubSpot theme. Tokens come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface-100); color: var(--ink-muted); font-family: var(--font-body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

.hc-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); font-weight: 700; }
.hc-skip:focus { left: 16px; }


/* Containers & sections */
.hc-container { max-width: var(--container); margin: 0 auto; }
.hc-container--narrow { max-width: var(--container-narrow); margin: 0 auto; }
.hc-section { padding: clamp(64px, 8vw, 96px) clamp(16px, 4vw, 32px); border-top: 1px solid var(--line-subtle); }
.hc-section--deep { background: var(--surface-000); }
.hc-section--flush-top { border-top: 0; }
.hc-stack { display: flex; flex-direction: column; gap: var(--space-12); }
.hc-stack--sm { display: flex; flex-direction: column; gap: var(--space-4); }
.hc-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.hc-grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.hc-eyebrow--quiet { color: var(--ink-subtle); }
.hc-eyebrow--magenta { color: var(--magenta); }

/* Nav (sticky) + mobile menu */
.hc-nav { position: sticky; top: 0; z-index: 50; }
.hc-nav__mark { overflow: hidden; }
.hc-nav__mark img { width: 100%; height: 100%; object-fit: cover; }
.hc-nav__toggle { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
.hc-nav__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hc-nav__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 720px) {
  .hc-nav__toggle { display: inline-flex; }
  .hc-nav__links.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--nav-height); left: 0; right: 0; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface-100); border-bottom: 1px solid var(--line); }
  .hc-nav__links.is-open a { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-subtle); }
}

/* Hero */
.hc-hero { padding: clamp(64px, 9vw, 128px) clamp(16px, 4vw, 32px) clamp(48px, 6vw, 96px); }
.hc-hero__grid { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.hc-hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.hc-hero__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.hc-hero__lede { margin: 0; max-width: 60ch; font-size: 20px; line-height: 1.6; color: var(--ink-muted); }
.hc-hero__panel { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-000); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.hc-hero__panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.hc-hero__steps { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hc-hero__steps .hc-flow__arrow { padding-left: var(--space-4); }
.hc-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-subtle); }

/* Logo strip */
.hc-logo-band { padding: 40px clamp(16px, 4vw, 32px); border-top: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); }
img.hc-logos__item { display: block; height: 28px; width: auto; max-width: 140px; object-fit: contain; }

/* Featured play */
.hc-featured { padding: var(--space-8); }
.hc-featured__grid { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.hc-featured__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.hc-featured__copy h3 { font-size: 32px; }
.hc-featured .hc-flow { flex: 1 1 420px; min-width: 0; }
.hc-card > .hc-btn { justify-self: start; }
.hc-card--highlight { border-color: var(--accent); }
.hc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-card__placeholder { display: grid; place-items: center; height: 100%; font-family: var(--font-mono); font-size: 13px; color: var(--ink-subtle); }
.hc-card--link { text-decoration: none; color: inherit; }

/* Teardown teaser row */
.hc-teaser { display: flex; flex-direction: row; align-items: center; gap: 20px; text-decoration: none; }
.hc-teaser__thumb { flex: 0 0 120px; height: 80px; border-radius: var(--radius-sm); background: var(--surface-100); border: 1px solid var(--line-subtle); overflow: hidden; }
.hc-teaser__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-teaser__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hc-teaser__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); }
.hc-teaser__meta { font-size: 14px; color: var(--ink-subtle); }
.hc-teaser .hc-badge { align-self: flex-start; }

/* CTA band */
.hc-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hc-cta h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; color: var(--ink); }
.hc-cta p { margin: 0; font-size: 20px; line-height: 1.6; color: var(--ink-muted); }
.hc-cta .hc-row { justify-content: center; }

/* Footer */
.hc-footer { padding: 40px clamp(16px, 4vw, 32px); background: var(--surface-000); border-top: 1px solid var(--line-subtle); }
.hc-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); }
.hc-footer__brand { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.hc-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 14px; }
.hc-footer nav a { color: var(--ink-muted); text-decoration: none; }
.hc-footer nav a:hover { color: var(--ink); }
.hc-footer small { font-size: 14px; color: var(--ink-subtle); }

/* Blog: listing + post */
.hc-page-head { padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 32px) var(--space-12); }
.hc-page-head h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1; color: var(--ink); }
.hc-page-head p { margin: 0; max-width: 60ch; font-size: 20px; line-height: 1.6; }
.hc-breadcrumb { font-size: 14px; color: var(--ink-subtle); }
.hc-breadcrumb a { color: var(--ink-subtle); }
.hc-byline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 14px; color: var(--ink-subtle); }
.hc-pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); }

.hc-prose { font-size: 17px; line-height: 1.7; color: var(--ink-muted); }
.hc-prose > * + * { margin-top: 1.1em; }
.hc-prose h2 { margin-top: 2em; font: 700 32px/1.2 var(--font-display); color: var(--ink); }
.hc-prose h3 { margin-top: 1.6em; font: 700 24px/1.3 var(--font-display); color: var(--ink); }
.hc-prose h4 { margin-top: 1.4em; font: 700 19px/1.4 var(--font-body); color: var(--ink); }
.hc-prose strong { color: var(--ink); }
.hc-prose a { color: var(--accent); text-underline-offset: 3px; }
.hc-prose ul, .hc-prose ol { padding-left: 1.4em; }
.hc-prose li + li { margin-top: .4em; }
.hc-prose img { border-radius: var(--radius-md); border: 1px solid var(--line); }
.hc-prose blockquote { margin-left: 0; margin-right: 0; padding: 20px 24px; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); font: 700 20px/1.45 var(--font-display); color: var(--ink); }
.hc-prose code { font-family: var(--font-mono); font-size: .85em; padding: 2px 6px; background: var(--surface-000); border: 1px solid var(--line-subtle); border-radius: var(--radius-sm); color: var(--ink); }
.hc-prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.hc-prose th { background: var(--surface-300); color: var(--ink); text-align: left; }
.hc-prose th, .hc-prose td { padding: 12px 16px; border-top: 1px solid var(--line-subtle); vertical-align: top; }

/* Small phones: keep brand, button and menu on one row */
.hc-nav__brand img { display: block; height: auto; }
@media (max-width: 420px) { .hc-nav__brand img { width: 136px; } .hc-nav { gap: var(--space-3); } }