/* ─── DEMO HERO ───
   Compact two-column hero (copy + numbered list | HubSpot form card + award badges).
   Loaded only on pages whose sections include the demo-hero layout (functions.php),
   served as-is (not part of the Vite bundle).
   Breakpoints: desktop 990px+, tablet 768–989px, mobile below 768px. */

.dh-hero { position: relative; padding: 124px 0 44px; overflow: hidden }
.dh-hero__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 96px) }
.dh-hero__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start }

/* ── Copy column ── */
.dh-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--color-acc, #D5FF1C);
}
.dh-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--color-acc, #D5FF1C); flex: none }
.dh-h1 {
  margin: 0 0 12px; max-width: 17ch; text-wrap: balance;
  font-family: var(--font-title, 'Titillium Web', sans-serif); font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -.028em; color: #fff;
}
.dh-h1 .acc, .dh-h1 .text-acc { color: var(--color-acc, #D5FF1C) }
.dh-lead { margin: 0 0 22px; max-width: 56ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.92); text-wrap: pretty }

.dh-see { border-top: 1px solid rgba(213,255,28,.25) }
.dh-see__head {
  margin: 0; padding: 13px 0 9px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--color-acc, #D5FF1C);
}
.dh-see__item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.dh-see__item:last-child { padding-bottom: 0 }
.dh-see__n {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: 1px;
  font-family: var(--font-pixel, 'Silkscreen', monospace); font-size: 16px; line-height: 1;
  color: #060B0D; background: var(--color-acc, #D5FF1C);
}
.dh-see__t { margin: 0 0 4px; font-size: 18px; font-weight: 500; line-height: 1.25; color: #f5f7f2 }
.dh-see__d { margin: 0; max-width: 56ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.70); text-wrap: pretty }

/* ── Form card ── */
.dh-hero__side { display: flex; flex-direction: column }
.dh-formcard { position: relative; flex: 1; background: var(--color-surface, #0C1316); border: 1px solid rgba(255,255,255,.18) }
.dh-formcard::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--color-acc, #D5FF1C) }
.dh-formcard__in { padding: clamp(18px, 2vw, 26px) }
.dh-formcard__h {
  margin: 0 0 9px; font-family: var(--font-title, 'Titillium Web', sans-serif); font-weight: 500;
  font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; color: #f5f7f2;
}
.dh-formcard__sub { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.70) }
.dh-formcard__fine {
  margin: 13px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.70);
}
.dh-formcard__fine strong { color: rgba(255,255,255,.92); font-weight: 600 }

/* Step dots (drawn by demo-hero.js from the HubSpot form's own steps) */
.dh-dots { display: flex; gap: 8px; margin: 0 0 14px }
.dh-dots span { width: 22px; height: 3px; background: rgba(255,255,255,.18); transition: background .3s }
.dh-dots span.on { background: var(--color-acc, #D5FF1C) }

/* HubSpot form inside the card — same form, restyled with HubSpot's own variables */
.dh-formcard [data-hsfc-id=Renderer] {
  --hsf-field-label__font-size: 10px;
  --hsf-field-label__color: rgba(255,255,255,.70);
  --hsf-field-input__background-color: rgba(255,255,255,.03);
  --hsf-field-input__border-color: rgba(255,255,255,.18);
  --hsf-field-input__border-radius: 2px;
  --hsf-field-input__padding: 12px 15px;
  --hsf-field-input__placeholder-color: rgba(255,255,255,.35);
  --hsf-button__font-size: 13px;
  --hsf-button__border-radius: 2px;
  --hsf-button__padding: 16px 24px;
  --hsf-button__width: 100%;
  --hsf-row__vertical-spacing: 12px;
}
.dh-formcard [data-hsfc-id=Renderer] .hsfc-FieldLabel { letter-spacing: .18em }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator { color: var(--color-acc, #D5FF1C) }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-TextInput:focus,
.dh-formcard [data-hsfc-id=Renderer] .hsfc-TextareaInput:focus { border-color: var(--color-acc, #D5FF1C); background: rgba(213,255,28,.04); outline: none }
/* Step 1's intro line is shown in the copy column instead (from the "List Intro" field) */
.dh-formcard .hsfc-Step:first-child .hsfc-Heading { display: none }
/* Later steps' headings read as a small label */
.dh-formcard .hsfc-Step:not(:first-child) .hsfc-Heading {
  margin: 0; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-acc, #D5FF1C);
}
/* Buttons: full-width primary, Previous becomes a quiet link underneath */
.dh-formcard [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons { display: flex; flex-direction: column-reverse; gap: 0 }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-Button { width: 100%; letter-spacing: .14em; text-transform: uppercase; cursor: pointer }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-Button:disabled { opacity: .5; cursor: not-allowed }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-Button[type=button]:not(:only-child) {
  width: auto; align-self: flex-start; margin-top: 12px; padding: 4px 0;
  background: none; border: 0; color: rgba(255,255,255,.70); text-transform: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .14em;
}
.dh-formcard [data-hsfc-id=Renderer] .hsfc-Button[type=button]:not(:only-child)::before { content: '\2190\00a0' }
.dh-formcard [data-hsfc-id=Renderer] .hsfc-Button[type=button]:not(:only-child):hover { color: var(--color-acc, #D5FF1C); background: none }

/* ── Award badges under the form ── */
.dh-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.dh-badge {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(13,21,23,.45);
}
.dh-badge__img { display: block; height: 64px; width: auto; flex: none }
.dh-badge__t { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.3; color: #f5f7f2 }
.dh-badge__s {
  margin: 5px 0 0; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-acc, #D5FF1C);
}

/* ── Desktop 990px+: copy | form side by side ── */
@media (min-width: 990px) {
  .dh-hero__grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: stretch }
}

/* ── Tablet + mobile (below 990px): headline, then the form, then the numbered list ── */
@media (max-width: 989px) {
  .dh-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px }
  .dh-hero__copy { display: contents }
  .dh-hero__head { order: 1 }
  .dh-hero__side { order: 2 }
  .dh-see { order: 3 }
  .dh-hero__head .dh-lead { margin-bottom: 0 }
}

/* ── Mobile below 768px ── */
@media (max-width: 767px) {
  .dh-hero { padding: 108px 0 36px }
  .dh-see__item { grid-template-columns: 34px minmax(0, 1fr); gap: 12px }
  .dh-badges { grid-template-columns: 1fr }
  .dh-badge { flex-direction: row; align-items: center }
  .dh-badge__img { height: 52px }
}


/* ── Stats band (testimonials layout, section id "demo-stats") ──
   Compact, centred figures from the prototype. Each figure is a lime hover target:
   the border shows on hover only, which keeps the resting state free of card borders. */
#demo-stats .grid:not(.proven-grid) { gap: 28px; max-width: 1240px }
#demo-stats .grid:not(.proven-grid) > div {
  padding: 28px 24px; border: 1px solid transparent; transition: border-color .25s, transform .25s;
}
#demo-stats .grid:not(.proven-grid) > div:hover { border-color: rgba(213,255,28,.4); transform: translateY(-3px) }
#demo-stats .grid:not(.proven-grid) > div > span:first-child {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.70); display: block; margin-bottom: 14px;
}
#demo-stats .grid:not(.proven-grid) .text-acc { font-size: clamp(36px, 4vw, 56px); font-weight: 500; line-height: 1 }
#demo-stats .grid:not(.proven-grid) > div > div:nth-of-type(2) { font-size: 18px; margin-bottom: 8px; color: #f5f7f2; font-weight: 500 }
#demo-stats .grid:not(.proven-grid) > div > p { font-size: 16px; line-height: 1.5 }
/* Mobile below 768px: stacked. Tablet 768–989px and desktop 990px+: three columns. */
@media (max-width: 767px) { #demo-stats .grid:not(.proven-grid) { grid-template-columns: 1fr } }
@media (min-width: 768px) { #demo-stats .grid:not(.proven-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* ── Feature cards (section id "demo-pillars"): lime border on hover, matching the prototype ── */
#demo-pillars .grid > div { transition: border-color .25s, transform .25s }
#demo-pillars .grid > div:hover { border-color: rgba(213,255,28,.5); transform: translateY(-3px) }

/* ── Lime CTA (cta-bar layout, section id "demo-cta") ── */
#demo-cta h2 { font-weight: 500; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; color: #060B0D; max-width: 18ch; margin-bottom: 14px }
#demo-cta h2 .text-acc { color: #060B0D }
#demo-cta p { color: #060B0D; font-size: 17px; line-height: 1.55; max-width: 48ch }
#demo-cta a.btn { flex: none; background: #060B0D; color: var(--color-acc, #D5FF1C); border: 1px solid #060B0D; padding: 20px 34px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600 }
#demo-cta a.btn:hover { background: #000; border-color: #000; box-shadow: 0 0 22px rgba(6,11,13,.4); transform: translateY(-1px) }
/* Stacked below 990px, row on desktop */
#demo-cta > div > div { display: flex; flex-direction: column; align-items: flex-start; gap: 34px }
@media (min-width: 990px) { #demo-cta > div > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px } }
@media (max-width: 767px) { #demo-cta h2 { font-size: 28px } }

/* ── Pillars heading (feature-cards, section id "demo-pillars"): spans the 1240px card row and
   balances its lines, as in the prototype, so it sets in three lines on desktop. Manual <br> still works. */
#demo-pillars > div > div:first-child { max-width: 1240px }
#demo-pillars h2 { text-wrap: balance }

/* ── Hero text, tablet and mobile (989px and below): eyebrow, heading and description centred in
   their column. Desktop (990px+) keeps the left alignment. */
@media (max-width: 989px) {
  .dh-hero__head { text-align: center }
  .dh-eyebrow { display: flex; justify-content: center; margin-left: auto; margin-right: auto }
  .dh-h1 { margin-left: auto; margin-right: auto }
  .dh-lead { margin-left: auto; margin-right: auto; text-wrap: pretty }
}

/* ── Pre-footer CTA, tablet and mobile (989px and below): heading, description and button centred.
   Desktop (990px+) keeps the row layout. */
@media (max-width: 989px) {
  #demo-cta > div > div { align-items: center; text-align: center }
  #demo-cta > div > div > div:first-child { margin-left: auto; margin-right: auto; max-width: 720px }
  #demo-cta h2 { margin-left: auto; margin-right: auto; text-wrap: balance }
  #demo-cta p { margin-left: auto; margin-right: auto }
}

/* ── Award badges inside the Request a Demo card (prototype): sit at the bottom of the card,
   two columns on desktop, sharing the card's background and border. */
.dh-formcard { display: flex; flex-direction: column }
.dh-formcard .dh-badges {
  margin-top: auto; padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); gap: 10px;
}

/* ── Form card height: the card ends after its award badges instead of stretching to the copy column.
   The badges keep a fixed gap below the form (no auto margin, so no empty space). */
.dh-formcard { flex: 0 0 auto }
.dh-formcard .dh-badges { margin-top: 0; padding-top: 0 }
.dh-formcard__in { padding-bottom: clamp(18px, 2vw, 26px) }