/* ── home-v2.css ─────────────────────────────────────────────────────────
   Hand-written, namespaced under .hv2. All visual styling for the
   /home-v2 route lives here. Self-contained — does not depend on
   blocks.css or templates.css. Uses fonts loaded by layouts/participant
   via /fonts/fonts.css (DM Sans, DM Mono, Bebas Neue, Playfair Display,
   Abel). */

.hv2{
  --hv2-cream:#EAE3D6;
  --hv2-cream-alt:#E2D9C8;
  --hv2-ink:#1A1208;
  --hv2-red:#B5261E;
  --hv2-muted:rgba(26,18,8,0.55);
  --hv2-very-muted:rgba(26,18,8,0.35);
  --hv2-border:rgba(26,18,8,0.10);
  --hv2-border-strong:rgba(26,18,8,0.18);
  --hv2-cream-on-dark:rgba(234,227,214,0.75);
  --hv2-cream-on-dark-muted:rgba(234,227,214,0.45);

  background:var(--hv2-cream);
  color:var(--hv2-ink);
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hv2 *{box-sizing:border-box;}
.hv2 a{color:inherit;text-decoration:none;}
.hv2 button{font-family:inherit;cursor:pointer;}

/* ── 1. Nav ────────────────────────────────────────────────────────────── */
.hv2-nav{
  display:flex;align-items:center;
  padding:18px 44px;
  background:var(--hv2-cream);
  border-bottom:1px solid var(--hv2-border);
}
.hv2-nav-items{
  display:flex;align-items:center;
  gap:24px;
  margin-left:auto;
}
.hv2-nav-items form{display:contents;}
.hv2-nav-items a,
.hv2-nav-items button{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--hv2-muted);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition:color .2s;
}
.hv2-nav-items a:hover,.hv2-nav-items button:hover{color:var(--hv2-ink);}

/* ── 2. Hero ───────────────────────────────────────────────────────────── */
/* Hero — single full-width block. The photograph is the background;
   the content panel floats over the right ~45% where the image is
   naturally empty. */
.hv2-hero{
  position:relative;
  min-height:100vh;
  background-color:var(--hv2-cream);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--hv2-border);
}

.hv2-hero-content{
  position:absolute;
  top:50%;left:60%;
  transform:translateY(-50%);
  width:40%;
  display:flex;flex-direction:column;
  padding:0;
}

/* Code-entry box — pinned to the top of the hero column, independent of
   the vertically-centred content panel below. */
.hv2-code{
  position:absolute;
  top:2rem;left:60%;
  width:40%;
  padding:0 1.75rem;
  z-index:2;
}
.hv2-code-form{
  display:flex;align-items:stretch;
  width:100%;max-width:400px;
}
.hv2-code-input{
  flex:1;min-width:0;
  background:#fff;
  border:1px solid #000;
  border-right:0;
  outline:0;
  padding:10px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:12px;letter-spacing:0.06em;
  color:#1A1208;
  text-transform:uppercase;
}
.hv2-code-input::placeholder{
  color:#000;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.hv2-code-btn{
  border:1px solid #B5261E;border-radius:0;
  background:#B5261E;color:#fff;
  padding:10px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.hv2-code-btn:hover{background:#992017;border-color:#992017;}
.hv2-code-error{
  margin-top:8px;max-width:400px;
  padding:8px 12px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;color:#B5261E;
  border:1px solid rgba(181,38,30,0.30);
  background:rgba(181,38,30,0.06);
}

/* Hero copy area — clusters stacked from top with deliberate gaps,
   not space-between (which created a dead zone in the middle on tall
   viewports). */
.hv2-hero-copy{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:1.25rem 1.75rem 2rem;
  gap:0;
}
.hv2-hero-top{display:flex;flex-direction:column;gap:0;}
.hv2-hero-line1{
  font-family:'Abel',sans-serif;
  font-style:normal;font-weight:400;
  font-size:38px;
  color:#1A1208;
  letter-spacing:-0.3px;
  line-height:1.1;
  white-space:nowrap;
  margin-bottom:8px;
}
.hv2-hero-line2{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(48px,4.6vw,56px);
  line-height:1.0;
  letter-spacing:-0.5px;
  color:#B5261E;
  margin-bottom:8px;
}

.hv2-hero-bottom{display:flex;flex-direction:column;gap:0;position:relative;}
.hv2-tagline{
  font-family:'Bebas Neue',sans-serif;
  font-size:30px;letter-spacing:0.02em;text-transform:uppercase;
  color:#1A1208;
  margin-bottom:12px;
}
.hv2-btn-stack{display:flex;flex-direction:row;gap:8px;width:100%;}
.hv2-btn-stack > a,
.hv2-btn-stack > .tpl-switcher{flex:1;min-width:0;}

/* The shared .tpl-switcher (public/css/templates.css) defaults to
   position:absolute; top:24px; right:24px so it floats to the top-
   right corner of its positioned ancestor on every setup page. On the
   hero we want it to sit inline in .hv2-btn-stack alongside the
   "Create New Ranking →" CTA, with its menu dropping directly under
   the trigger — so override the wrapper to position:relative and let
   the existing .tpl-switcher-menu absolute rule anchor to it. Trigger
   stretches to fill its flex slot for visual parity with the primary
   button to its left. */
.hv2-btn-stack .tpl-switcher{
  position:relative;
  top:auto;
  right:auto;
  display:flex;
}
.hv2-btn-stack .tpl-switcher-trigger{
  width:100%;
  max-width:none;
  /* Match .hv2-btn's box metrics exactly so both buttons in the stack
     render at the same height: 13px/16px padding, DM Sans 13px/500
     0.06em uppercase, default line-height, no border. The trigger's
     compact 7px 12px padding + Abel 13px + 1px border default is
     preserved on every setup page since this override is scoped to
     .hv2-btn-stack. */
  padding:13px 16px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:normal;
  border:0;
  /* Stretch to fill the wrapper so the trigger matches the height of
     its flex sibling (the .hv2-btn-primary anchor next to it in
     .hv2-btn-stack). align-self:stretch + height:100% works because
     the parent .hv2-btn-stack defaults to align-items:stretch, which
     pulls .tpl-switcher (the wrapper) up to the sibling's height; the
     trigger then fills that stretched wrapper. display:flex with both
     axes centered keeps the label + chevron pinned to the middle as
     the box grows vertically. */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  align-self:stretch;
  height:100%;
}
.hv2-btn{
  display:block;width:100%;
  padding:13px 16px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border:0;border-radius:0;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
/* Specificity note: .hv2 a {color:inherit; text-decoration:none}
   (defined on the host at the top of this file) has specificity
   (0,1,1), which beats a single .hv2-btn-primary (0,1,0) — without
   a tie-breaker the cream label inherits ink colour, the dark fill
   is missing, and the anchor renders as default-styled link text.
   The compound-class selector .hv2-btn.hv2-btn-primary takes
   specificity to (0,2,0), beats .hv2 a, AND does not depend on a
   .hv2 ancestor — so the same class pair works on the dashboard
   (resources/views/home.blade.php, which renders the shared
   partials._template-cta-stack outside any .hv2 host) without
   re-introducing the visual regression. text-decoration:none was
   also added to .hv2-btn above so the anchor stays underline-free
   when the .hv2 a reset is absent. */
.hv2-btn.hv2-btn-primary{background:#1A1208;color:#EAE3D6;}
.hv2-btn.hv2-btn-primary:hover{background:#000;color:#EAE3D6;}

.hv2-no-signup{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;
  color:#1A1208;
  text-align:center;
  margin-top:10px;
}

/* ── 3. Audience columns ───────────────────────────────────────────────── */
.hv2-audience{
  background:#EAE3D6;
  padding:48px 0;
  border-bottom:1px solid rgba(26,18,8,0.2);
}
.hv2-audience-header{
  display:grid;
  /* Column 1 width clamps so the headline (column 2 left edge) lands at
     max(64px, calc(50vw - 440px)) from the viewport edge — the same
     x-position .hv2-result-q occupies (driven by .hv2-result's 64px
     section padding + .hv2-result-inner max-width:880 centered). The
     header itself keeps its 40px padding-left so the eyebrow stays at
     its original left edge; the 140px floor is enough for "Who it is
     for" to fit without colliding with the headline at narrow widths. */
  grid-template-columns:max(140px, calc(50vw - 480px)) 1fr;
  align-items:baseline;
  padding:0 40px 12px;
}
.hv2-audience-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--hv2-red);
  white-space:nowrap;
}
.hv2-audience-headline{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(26px,2.6vw,34px);
  color:var(--hv2-ink);
  line-height:1.25;
}
.hv2-audience-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hv2-audience-col{
  padding:8px 40px 0;
}
.hv2-audience-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:52px;
  line-height:1;
  letter-spacing:0.02em;
  color:rgba(26,18,8,0.08);
  user-select:none;
}
.hv2-audience-title{
  font-family:'Abel',sans-serif;
  font-weight:700;
  font-size:22px;
  color:#1A1208;
  margin-top:-10px;
  margin-bottom:8px;
  letter-spacing:0.01em;
}
.hv2-audience-body{
  font-family:'Abel',sans-serif;
  font-size:13px;
  line-height:1.6;
  color:rgba(26,18,8,0.65);
  max-width:280px;
}

/* ── 4. Simple by design / Powerful — dark band ────────────────────────── */
.hv2-dark{
  background:var(--hv2-ink);
  color:#ffffff;
  display:grid;grid-template-columns:1fr 1fr;
  padding:48px 0;
  border-top:1px solid var(--hv2-ink);
}
.hv2-dark-col{
  padding:0 56px;
  border-right:1px solid rgba(234,227,214,0.10);
}
.hv2-dark-col:last-child{border-right:0;}
.hv2-dark-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:13px;letter-spacing:0.22em;text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.hv2-dark-h{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(24px,2.2vw,30px);
  line-height:1.25;
  color:#ffffff;
  margin-bottom:14px;
}
.hv2-dark-body{
  font-size:14px;line-height:1.7;
  color:#ffffff;
  margin-bottom:24px;
  max-width:420px;
}
.hv2-dark-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.hv2-dark-list li{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  color:#ffffff;
  padding-left:22px;position:relative;
}
.hv2-dark-list li::before{
  content:"—";
  color:var(--hv2-red);
  position:absolute;left:0;top:0;
  font-weight:500;
}

/* ── 5. Result + How it Works section ──────────────────────────────────── */
.hv2-result{
  background:var(--hv2-cream-alt);
  padding:48px 0;
  border-bottom:1px solid var(--hv2-border);
}
.hv2-result-inner{max-width:1100px;margin:0 auto;}

/* Carousel — three stacked slides crossfade via opacity. The slides
   share a single CSS-grid cell so the container auto-sizes to the
   tallest slide and no layout shift occurs when the active slide
   changes. Inactive slides are visually hidden but kept in the
   document flow; pointer-events:none prevents stray hover/click. */
.hv2-carousel{position:relative;overflow:hidden;width:100%;}
.hv2-carousel-slides{display:grid;grid-template-columns:minmax(0,1fr);}
.hv2-carousel-slide{
  grid-row:1;grid-column:1;
  min-width:0;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.hv2-carousel-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.hv2-carousel-dots{
  display:flex;justify-content:center;gap:12px;
  margin-top:36px;
}
.hv2-carousel-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:rgba(26,18,8,0.20);
  border:0;padding:0;
  cursor:pointer;
  transition:background .2s;
}
.hv2-carousel-dot:hover{background:rgba(26,18,8,0.40);}
.hv2-carousel-dot.is-active{background:var(--hv2-ink);}

/* Slide 4 (SWOT) — constrain the 2×2 grid to ~80% of the carousel
   width and centre it so the four quadrants sit compact rather than
   stretching the full 1100px. Scoped under .hv2-carousel-slide so the
   production scorecard pages keep their full-width default. The grid
   itself reverts to templates.css's natural 2×2 (data-section-count=4
   matches no override and falls through to the default 1fr 1fr). */
.hv2-carousel-slide .sc-scorecard .ms-matrix-wrap{
  max-width:80%;
  margin-left:auto;
  margin-right:auto;
}

.hv2-result-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:#B5261E;
  margin-bottom:16px;
}
.hv2-result-q{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(26px,2.4vw,32px);
  color:var(--hv2-ink);
  line-height:1.25;
  margin-bottom:16px;
}
.hv2-result-table{display:flex;flex-direction:column;gap:0;}
.hv2-result-row{
  display:grid;
  grid-template-columns:48px 1fr 280px 64px;
  align-items:center;
  gap:24px;
  padding:14px 16px;
  border-bottom:1px solid rgba(26,18,8,0.08);
}
.hv2-result-row.top{
  background:#fff;
  border:1px solid rgba(181,38,30,0.30);
}
.hv2-result-rank{
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:0.04em;
  color:var(--hv2-muted);
}
.hv2-result-row.top .hv2-result-rank{color:var(--hv2-red);}
.hv2-result-name{
  font-family:'Bebas Neue',cursive;
  font-size:22px;color:var(--hv2-ink);
}
.hv2-result-track{
  position:relative;height:13px;background:rgba(26,18,8,0.10);width:100%;
}
.hv2-result-fill{
  position:absolute;left:0;top:0;height:100%;
  background:var(--hv2-ink);
}
.hv2-result-row.top .hv2-result-fill{background:var(--hv2-red);}
.hv2-result-pct{
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;color:var(--hv2-ink);
  text-align:right;
  letter-spacing:0.04em;
}
.hv2-result-row.top .hv2-result-pct{color:var(--hv2-red);}

/* How it works steps (sub-section, same band) */
.hv2-how-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--hv2-red);
  margin-bottom:16px;
  text-align:center;
}
.hv2-how-flow{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:0;
}
.hv2-how-step{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;padding:0 18px;
}
.hv2-how-track{
  width:100%;position:relative;
  display:flex;align-items:center;justify-content:center;
  height:44px;
}
.hv2-how-line{
  position:absolute;top:50%;left:0;right:0;height:1px;
  background:var(--hv2-red);opacity:0.45;
}
.hv2-how-step:first-child .hv2-how-line{left:50%;}
.hv2-how-step:last-child .hv2-how-line{right:50%;}
.hv2-how-circle{
  width:44px;height:44px;border-radius:50%;
  background:var(--hv2-red);
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--hv2-cream-alt);
}
.hv2-how-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;letter-spacing:0.04em;
  color:#fff;line-height:1;
}
.hv2-how-label{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--hv2-ink);
  margin-top:16px;
}
.hv2-how-body{
  font-family:'DM Sans',sans-serif;
  font-size:12px;line-height:1.65;
  color:var(--hv2-muted);
  margin-top:10px;max-width:240px;
}

/* ── 6. Why it works — cream, 2×2 grid ─────────────────────────────────── */
.hv2-why{
  background:var(--hv2-cream);
  padding:48px 0;
  border-bottom:1px solid var(--hv2-border);
}
.hv2-why-inner{max-width:1000px;margin:0 auto;}
.hv2-why-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--hv2-border);
  border-left:1px solid var(--hv2-border);
}
.hv2-why-item{
  padding:28px 32px;
  border-right:1px solid var(--hv2-border);
  border-bottom:1px solid var(--hv2-border);
}
.hv2-why-title{
  font-family:'DM Sans',sans-serif;
  font-weight:500;font-size:14px;color:var(--hv2-ink);
  margin-bottom:8px;
}
.hv2-why-body{
  font-family:'DM Sans',sans-serif;
  font-size:13px;line-height:1.7;
  color:var(--hv2-muted);
}

/* ── 7. Thurstone quote — red band ─────────────────────────────────────── */
.hv2-quote{
  background:var(--hv2-red);
  color:#fff;
  padding:48px 0;
  text-align:center;
}
.hv2-quote-text{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.4;
  color:#fff;
  max-width:880px;margin:0 auto 16px;
}
.hv2-quote-attr{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}

/* ── 8. Final CTA — cream, text links ──────────────────────────────────── */
.hv2-finalcta{
  background:var(--hv2-cream);
  padding:48px 0;
  text-align:center;
  border-bottom:1px solid var(--hv2-border);
}
.hv2-finalcta-h{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(30px,3vw,40px);
  color:var(--hv2-ink);
  margin-bottom:14px;
}
.hv2-finalcta-body{
  font-family:'DM Sans',sans-serif;
  font-size:13px;color:var(--hv2-muted);
  margin-bottom:30px;
}
/* Constrain the shared .hv2-btn-stack to a sensible centred width so
   the CTA's two-button row reads at the same scale as the hero's
   right-column stack rather than spanning the full section width. */
.hv2-finalcta .hv2-btn-stack{
  max-width:480px;
  margin:0 auto;
}

/* ── 9. Contact form ───────────────────────────────────────────────────── */
.hv2-contact{
  background:var(--hv2-cream-alt);
  padding:48px 0;
}
.hv2-contact-inner{
  max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:start;
}
.hv2-contact-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--hv2-muted);
  margin-bottom:16px;
}
.hv2-contact-title{
  font-family:'DM Sans',sans-serif;
  font-weight:500;font-size:18px;color:var(--hv2-ink);
  line-height:1.35;
  margin-bottom:14px;
}
.hv2-contact-body{
  font-family:'DM Sans',sans-serif;
  font-size:13px;line-height:1.7;
  color:var(--hv2-muted);
  max-width:420px;
}
.hv2-contact-form{
  display:flex;flex-direction:column;gap:14px;
}
.hv2-contact-input,
.hv2-contact-textarea{
  width:100%;
  border:1px solid var(--hv2-border-strong);
  background:#fff;
  padding:13px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;color:var(--hv2-ink);
  outline:none;
  transition:border-color .15s;
}
.hv2-contact-input:focus,
.hv2-contact-textarea:focus{border-color:var(--hv2-ink);}
.hv2-contact-textarea{resize:vertical;min-height:120px;line-height:1.55;}
.hv2-contact-submit{
  align-self:flex-start;
  background:var(--hv2-ink);color:var(--hv2-cream);
  border:0;
  padding:14px 28px;
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  transition:background .2s;
}
.hv2-contact-submit:hover{background:#000;}
.hv2-contact-submit:disabled{opacity:0.6;cursor:not-allowed;}
.hv2-contact-success{
  display:none;
  padding:14px 16px;
  border:1px solid rgba(122,182,72,0.4);
  background:rgba(122,182,72,0.10);
  color:var(--hv2-ink);
  font-family:'DM Sans',sans-serif;
  font-size:13px;
}
.hv2-contact-error{
  display:none;
  padding:10px 14px;
  border:1px solid rgba(181,38,30,0.35);
  background:rgba(181,38,30,0.08);
  color:var(--hv2-red);
  font-family:'DM Sans',sans-serif;
  font-size:13px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .hv2-code{left:50%;width:48%;}
  .hv2-hero-content{left:50%;width:48%;}
  .hv2-hero-copy{padding:1.5rem 1.25rem;}
  .hv2-audience-col{padding:0 32px;}
  .hv2-dark-col{padding:0 40px;}
  .hv2-result,.hv2-why,.hv2-quote,.hv2-finalcta,.hv2-contact{padding-left:36px;padding-right:36px;}
  .hv2-contact-inner{grid-template-columns:1fr;gap:36px;}
}
@media (max-width: 768px){
  /* Nav on mobile: single row, no wrap, minimum gaps so logo + links fit. */
  .hv2-nav{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    padding:8px 10px;
  }
  .hv2-nav-items{
    flex-wrap:nowrap;
    gap:6px;
  }
  .hv2-nav-items a,
  .hv2-nav-items button{
    font-size:8px;
    white-space:nowrap;
  }
  /* Hero on mobile: no background image — flat cream surface. Content
     flows naturally: code box, then headline cluster, then tagline and
     buttons. No absolute positioning, no overlay tricks. */
  .hv2-hero{
    min-height:0;
    background-image:none !important;
    background-color:#EAE3D6;
    padding:0;
  }
  .hv2-code{
    position:static;left:auto;top:auto;
    width:100%;
    padding:16px;
    z-index:auto;
  }
  .hv2-code-form{max-width:none;width:100%;}
  .hv2-code-input,.hv2-code-btn{padding-left:14px;padding-right:14px;}
  .hv2-hero-content{
    position:static;left:auto;top:auto;
    transform:none;
    width:100%;
    margin-top:0;
    background:transparent;
  }
  .hv2-hero-copy{padding:8px 20px 32px;gap:24px;}
  .hv2-hero-line1{font-size:28px;white-space:normal;}
  .hv2-hero-line2{font-size:36px;}
  .hv2-tagline{font-size:16px;}
  .hv2-btn-stack{flex-direction:column;gap:10px;}
  .hv2-btn-stack > a,
  .hv2-btn-stack > .tpl-switcher{flex:none;width:100%;}
}
@media (max-width: 720px){
  .hv2-audience-grid{grid-template-columns:1fr;}
  .hv2-dark{grid-template-columns:1fr;}
  .hv2-dark-col{border-right:0;border-bottom:1px solid rgba(234,227,214,0.10);}
  .hv2-dark-col:last-child{border-bottom:0;}
  .hv2-result-row{grid-template-columns:34px 1fr 64px;}
  .hv2-result-row .hv2-result-track{display:none;}
  .hv2-how-flow{flex-direction:column;gap:32px;}
  .hv2-how-track{display:none;}
  .hv2-how-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:0;}
  .hv2-how-step > .hv2-how-circle{box-shadow:none;flex-shrink:0;}
  .hv2-how-step-text{display:flex;flex-direction:column;}
  .hv2-why-grid{grid-template-columns:1fr;}
  .hv2-result,.hv2-why,.hv2-quote,.hv2-finalcta,.hv2-contact{padding-left:24px;padding-right:24px;}
}
@media (max-width: 600px){
  /* Audience / Why-it-works header: collapse the two-column grid so the
     eyebrow ("Who it is for" / "Why it works") sits above the headline
     instead of sharing a row with it. Same rule covers both sections —
     they share the .hv2-audience-header wrapper. */
  .hv2-audience-header{grid-template-columns:1fr;gap:8px;}
}
@media (max-width: 480px){
  /* Carousel mobile: section padding tightens further so slides have
     the most usable width; the SWOT 80% constraint relaxes because the
     matrix is already a single column at ≤640px (templates.css) and the
     80% cap just leaves wasted gutters. The DM-table slide stays
     overflow-x-scrollable inside .dm-table-wrap. */
  .hv2-result{padding-left:16px;padding-right:16px;}
  .hv2-carousel-slide .sc-scorecard .ms-matrix-wrap{max-width:none;}
  .hv2-carousel-dots{margin-top:24px;}
  .hv2-result-eyebrow{font-size:10px;letter-spacing:0.18em;}
  .hv2-result-q{font-size:22px;line-height:1.3;}
  .hv2-result-row{padding:10px 8px;gap:12px;}
  .hv2-result-name{font-size:18px;}
}