/* ==========================================================================
   /demo_hvh/ — HVH (Horizontal-Vertical-Horizontal) ad-format demo
   STANDALONE page: no shared site header/footer/nav, no site.css/inner.css.
   Faithful clean rebuild of the Tilda demo (originally 4 t396 zero-blocks:
   header toggle + laptop mockup + phone mockup + CTA). The mockup is a greyed
   article wireframe; the top banner simulates the HVH sticky format via
   /js/demo_hvh.js. Like the live page, the mockup is desktop-only and collapses
   below 960px (only the toggle + CTA remain) — preserved deliberately.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #fff;
  color: #202020;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Wireframe palette */
:root {
  --wf: #d4d8dd;          /* grey placeholder blocks */
  --wf-dark: #989898;     /* darker grey dividers / captions */
  --content: 842px;       /* laptop mockup content width (Tilda 1200 grid) */
}

/* ===================================================== HEADER: device tabs = */
.demo-head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.demo-back {
  position: absolute;
  left: 36px; top: 0; bottom: 0; margin: auto;
  height: 36px; line-height: 0;
  z-index: 20;
}
.demo-back img { width: 36px; height: 36px; display: block; }
.demo-tab {
  padding: 0; margin: 0 12px;
  width: 60px; height: 60px;
  background: none; border: none;
}
.demo-tab:not(.is-active) { cursor: pointer; }
.demo-tab img { max-width: 100%; height: auto; display: block; }
/* active shows the "on" icon (first img), inactive shows the "off" (second) */
.demo-tab:not(.is-active) img:nth-child(1),
.demo-tab.is-active img:nth-child(2) { display: none; }
/* Both toggle icons stay visible on mobile (matches live); below 960 the JS
   marks the phone tab active and the mockup collapses (see bottom of file). */

/* ===================================================== MOCKUP STAGE ========= */
.mockup { background: #fff; }
.mockup--phone { display: none; }         /* hidden until phone tab clicked */
.mock-wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 30px 20px 80px;
}

/* generic wireframe atoms */
.wf { background: var(--wf); }
.wf-box { background: var(--wf); border-radius: 16px; }
.wf-line { background: var(--wf); border-radius: 30px; height: 14px; margin: 0 0 17px; }
.wf-line:last-child { margin-bottom: 0; }

/* banner (the HVH sticky element) */
.hvh-ad {
  width: 100%;
  transform: translateY(0);
  transition: transform 0.1s ease-in;
  margin-bottom: 48px;
  z-index: 30;
}
.hvh-ad img { display: block; width: 100%; height: auto; }
.hvh-ad.is-sticky { position: sticky !important; top: 0 !important; }
.hvh-ad.is-hide   { transform: translateY(-100%) !important; }

/* hero + title */
.mock-hero { height: 275px; margin-bottom: 21px; }
.mock-title { width: 566px; max-width: 100%; margin: 0 auto 40px; }
.mock-title .wf-line { margin-bottom: 18px; }

/* 2-column feature row */
.row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-bottom: 46px;
}
.row-2 .card-img { height: 161px; margin-bottom: 24px; }
.row-2 .wf-line { width: 78%; }

/* 4-column small card row */
.row-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  margin-bottom: 50px;
}
.row-4 .card-img { height: 154px; margin-bottom: 24px; }
.row-4 .wf-line { height: 14px; margin-bottom: 16px; }

/* 3-column medium card row */
.row-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-bottom: 50px;
}
.row-3 .card-img { height: 161px; margin-bottom: 26px; }
.row-3 .wf-line.title { width: 100%; }
.row-3 .wf-line.sub   { width: 65%; }

/* image + paragraph rows */
.row-media {
  display: grid; grid-template-columns: 405px 1fr; gap: 30px;
  align-items: start;
  margin-bottom: 56px;
}
.row-media .media-img { height: 275px; }
.row-media .para .wf-line:nth-child(1) { width: 100%; }
.row-media .para .wf-line:nth-child(2) { width: 82%; }
.row-media .para .wf-line:nth-child(3) { width: 71%; }
.row-media .para .wf-line:nth-child(4) { width: 60%; }
.row-media:last-child { margin-bottom: 0; }

/* --- phone mockup (narrow single column framed article) --- */
.phone-frame {
  max-width: 376px;
  margin: 0 auto;
  padding: 0;
}
.phone-frame .mock-hero { height: 132px; border-radius: 8px; }
.phone-frame .wf-line { border-radius: 8px; height: 6px; margin-bottom: 12px; }
.phone-frame .p-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0;
}
.phone-frame .p-cards .card-img { height: 130px; border-radius: 8px; }

/* below 960: match live — the mockup collapses, page = toggle + CTA only */
@media (max-width: 960px) {
  .mockup { display: none !important; }
}

/* ===================================================== CTA FOOTER =========== */
.cta {
  background-image: linear-gradient(0.758turn,
    rgba(207,58,65,1) 3%, rgba(52,31,113,1) 86%, rgba(48,9,87,1) 100%);
  padding: 88px 20px 92px;
  text-align: center;
  color: #fff;
}
.cta-title {
  font-size: 42px; font-weight: 700; line-height: 1.15;
  margin: 0 0 34px;
}
.cta-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
}
.cta-or { font-size: 18px; opacity: .95; }
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 213px; height: 55px; padding: 0 28px;
  border-radius: 30px; font-size: 16px; font-weight: 600;
  text-decoration: none; letter-spacing: .2px;
  transition: opacity .15s ease, background .15s ease;
}
.cta-btn--primary { background: #dd4242; color: #fff; }
.cta-btn--primary:hover { background: #c93636; }
.cta-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85); }
.cta-btn--ghost:hover { background: rgba(255,255,255,.12); }

@media (max-width: 600px) {
  .cta-title { font-size: 30px; }
  .cta { padding: 56px 18px 60px; }
}