/* ==========================================================================
   Harsh Sales Agency — density + responsive pass
   Loaded last. Tightens vertical rhythm across the site and adds the
   breakpoints the base sheet did not cover (320–2560).
   ========================================================================== */

:root { --nav-h:68px; --maxw:1280px }

/* --------------------------------------------------------------------------
   Vertical rhythm — sections were carrying far too much air
   -------------------------------------------------------------------------- */
.section        { padding-block:clamp(40px,5.2vw,80px) }
.section--tight { padding-block:clamp(30px,3.6vw,54px) }
.shead          { margin-bottom:clamp(22px,2.6vw,36px); gap:18px }
.shead h2 + p   { margin-top:10px }
.shead__text .eyebrow { margin-bottom:12px }

.eyebrow { margin-bottom:12px }
h1 { font-size:clamp(2.1rem,4.6vw,3.5rem) }
h2 { font-size:clamp(1.65rem,3vw,2.5rem) }
h3 { font-size:clamp(1.12rem,1.6vw,1.4rem) }
.lede { font-size:clamp(.98rem,1.15vw,1.1rem); max-width:58ch }

/* Grids ------------------------------------------------------------------- */
.grid { gap:clamp(12px,1.3vw,20px); grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)) }
.cats { gap:clamp(12px,1.3vw,18px); grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)) }
.cat  { aspect-ratio:4/4.4 }
.cat__body { padding:18px }
.cat__body h3 { font-size:1.12rem }

.card__body { padding:13px 15px 16px; gap:4px }
.card__body h3 { font-size:.97rem }
.card__meta { font-size:.79rem }
.card__foot { margin-top:8px }
.card__link { font-size:.8rem }

/* Blocks ------------------------------------------------------------------ */
.feat  { padding:24px 22px }
.feat__ico { width:38px; height:38px; margin-bottom:13px; border-radius:10px }
.feat__ico svg { width:18px; height:18px }
.feat h3 { font-size:1rem; margin-bottom:6px }
.feat p { font-size:.87rem }

.steps { gap:16px }
.step { padding:22px 20px }
.step::before { margin-bottom:11px }
.step h3 { font-size:1rem; margin-bottom:6px }
.step p { font-size:.87rem }

.quotes { gap:16px }
.quote { padding:22px 22px }
.quote p { font-size:1rem; line-height:1.45 }
.quote__who { margin-top:15px; padding-top:14px }

.split { gap:clamp(24px,3.4vw,52px) }
.ticks { gap:10px; margin-top:18px }
.ticks li { font-size:.92rem }

.band .stats { gap:22px }
.stat span { margin-top:7px }

.cta { padding:clamp(28px,4vw,52px); border-radius:var(--r-lg) }
.cta p { margin:12px auto 22px }
.cta__actions { gap:12px }

.phero { padding-block:clamp(30px,3.6vw,56px) }
.phero h1 { font-size:clamp(1.9rem,3.9vw,3rem) }
.phero .lede { margin-top:12px }
.crumbs { margin-bottom:12px }

.hero__actions { margin-top:26px; gap:12px }
.hero .lede { margin-top:16px }

.toolbar { margin-bottom:20px; padding-bottom:16px }
.filters { gap:7px; margin-bottom:14px }
.chip { padding:8px 14px; font-size:.83rem }

.specs li { padding:11px 0; font-size:.89rem }
.pdp__thumbs button { width:64px; height:64px }
.share { margin-top:20px; padding-top:18px }

.foot { padding-block:clamp(36px,4.4vw,58px) 0 }
.foot__grid { gap:clamp(24px,3vw,36px) }
.foot__about { margin-top:14px; font-size:.88rem }
.foot h4 { margin-bottom:12px }
.foot ul { gap:8px }
.foot a { font-size:.88rem }
.foot__bot { margin-top:32px; padding:18px 0 }
.social { margin-top:16px }

.marquee { padding:11px 0 }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Small phones (320–380): the base 24px gutter eats too much of the screen */
@media (max-width:380px) {
  .wrap { padding-inline:16px }
  h1 { font-size:1.95rem }
  .hero h1 { font-size:1.95rem }
  .btn { padding:12px 20px; font-size:.9rem }
  .hero__actions .btn { width:100%; justify-content:center }
  .grid, .cats { grid-template-columns:1fr }
  .cta { padding:26px 20px }
  .wa { right:14px; bottom:14px; width:48px; height:48px }
  .wa svg { width:23px; height:23px }
}

/* Phones: two product columns from 440px rather than one very wide card */
@media (min-width:440px) and (max-width:639px) {
  .grid { grid-template-columns:repeat(2,1fr) }
  .cats { grid-template-columns:repeat(2,1fr) }
}

/* Tablets */
@media (min-width:640px) and (max-width:1023px) {
  .grid { grid-template-columns:repeat(3,1fr) }
  .cats { grid-template-columns:repeat(3,1fr) }
  .hero__stats { gap:28px }
}

/* Landscape phones / short viewports — stop the hero eating the whole screen */
@media (max-height:560px) and (orientation:landscape) {
  .hero__grid { padding-block:32px 16px }
  .hero__stats { margin-top:16px; padding-top:16px }
  .hero h1 { font-size:1.8rem }
  .hero .lede { font-size:.92rem; margin-top:10px }
  .hero__actions { margin-top:16px }
}

/* Small laptops: keep the two-column hero from feeling cramped */
@media (min-width:1024px) and (max-width:1199px) {
  .hero__grid { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:32px }
  .hero__frames { height:clamp(300px,38vh,380px) }
  .hero__chip--a { left:-14px; top:22px; padding:10px 14px }
  .hero__chip--b { right:-10px; bottom:26px; padding:10px 14px }
  .hero__chip b { font-size:1.25rem }
}

/* Desktop */
@media (min-width:1200px) {
  .grid { grid-template-columns:repeat(4,1fr) }
  .cats { grid-template-columns:repeat(4,1fr) }
}

/* Large desktop */
@media (min-width:1600px) {
  .grid { grid-template-columns:repeat(5,1fr) }
  .cats { grid-template-columns:repeat(5,1fr) }
}

/* Ultra-wide: cap the measure so the page never sprawls */
@media (min-width:2100px) {
  :root { --maxw:1440px }
  .hero { --hero-max:1680px }
  .grid { grid-template-columns:repeat(6,1fr) }
  .cats { grid-template-columns:repeat(5,1fr) }
}

/* Print ------------------------------------------------------------------- */
@media print {
  .nav, .wa, .hero__ctrl, .cue, .progress, .toast, .marquee, .foot .social { display:none !important }
  .hero { background:none; color:var(--ink) }
  .hero__bgs, .hero::after { display:none }
  .hero h1, .hero .lede { color:var(--ink) }
  .rv { opacity:1 !important; transform:none !important }
  .card, .step, .quote, .feat { break-inside:avoid }
}


/* --------------------------------------------------------------------------
   Legibility + touch fixes found in the 320-2560 audit
   -------------------------------------------------------------------------- */

/* Mono micro-labels were bottoming out at 9.8px — set a readable floor */
.card__tag   { font-size:.69rem; letter-spacing:.09em; padding:5px 10px }
.cat__count  { font-size:.72rem }
.crumbs      { font-size:.73rem }
.eyebrow     { font-size:.73rem }
.hero__stat span, .stat span { font-size:.72rem }
.hero__count { font-size:.74rem }
.foot h4     { font-size:.72rem }
.foot__bot   { font-size:.73rem }
.brand__tag  { font-size:.62rem }
.share__label{ font-size:.71rem }
.step::before{ font-size:.8rem }

/* Touch targets: the card share button and the logo link were under 40px */
.brand { padding-block:4px }
@media (hover:none), (pointer:coarse) {
  .card__share { width:40px; height:40px; top:8px; right:8px }
  .card__share svg { width:17px; height:17px }
  .chip { padding:10px 15px }
  .pdp__thumbs button { width:60px; height:60px }
}

/* Hero was running ~12% past the fold on a 1440x900 laptop */
@media (min-width:1200px) and (max-height:940px) {
  .hero__grid { padding-block:clamp(32px,3.4vw,52px) 20px }
  .hero__frames { height:clamp(320px,40vh,420px) }
  .hero__stats { margin-top:20px; padding-top:18px }
}

.hero__chip span { font-size:.72rem; letter-spacing:.11em }