/* ============================================================
   Growth Media — pages.css : page-specific styles
   (hubspot sub-template, calculator, privacy, hero-collage, etc.)
   Extended as pages are built.
   ============================================================ */

/* ============================================================
   HubSpot landing page — distinct BRIX-style template (orange accent),
   own sub-nav + mini-footer. Reproduced faithfully (not harmonized).
   ============================================================ */
.hs{--hs-accent:#fd5c63;--hs-accent-dark:#e8474f;}
.hs-nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--gm-border-light);}
.hs-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding-block:14px;}
.hs-nav__logo img{height:28px;width:auto;}
.hs-nav__links{display:flex;gap:28px;align-items:center;}
.hs-nav__links a{color:var(--gm-dark);font-family:var(--font-head);font-weight:500;font-size:.9375rem;}
.hs-nav__links a:hover{color:var(--hs-accent);text-decoration:none;}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--hs-accent);color:#fff;
  border-radius:var(--r-pill);padding:11px 24px;font-family:var(--font-head);font-weight:600;font-size:.9375rem;
  transition:transform .15s ease,background-color .15s ease;}
.hs-btn:hover{background:var(--hs-accent-dark);color:#fff;text-decoration:none;transform:translateY(-1px);}
.hs-nav__toggle{display:none;}
@media(max-width:760px){.hs-nav__links{display:none;}.hs-nav__links.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:16px var(--gutter);box-shadow:var(--shadow-lg);}
  .hs-nav__toggle{display:flex;flex-direction:column;gap:5px;padding:10px;}.hs-nav__toggle span{width:24px;height:2px;background:var(--gm-dark);}}

.hs-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f4f6fb);}
.hs-hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(48px,6vw,88px);position:relative;z-index:1;}
.hs-hero h1{font-size:clamp(2rem,1.3rem+3vw,3.25rem);}
.hs-hero p{color:var(--gm-slate);font-size:1.125rem;margin:var(--sp-4) 0 var(--sp-6);}
.hs-hero__shot{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;position:relative;z-index:1;}
.hs-hero__media{position:relative;}
.hs-blob{position:absolute;border-radius:50%;z-index:0;filter:blur(2px);opacity:.85;}
.hs-blob--teal{width:120px;height:120px;background:#22b8b0;top:-18px;left:-10px;}
.hs-blob--orange{width:150px;height:150px;background:var(--hs-accent);bottom:-30px;right:-20px;opacity:.9;}
.hs-spark{position:absolute;top:8%;left:-34px;color:var(--hs-accent);width:34px;height:34px;}
@media(max-width:860px){.hs-hero__grid{grid-template-columns:1fr;}}

.hs-eyebrow{color:var(--hs-accent);font-family:var(--font-head);font-weight:700;font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;}
.hs-section-head{text-align:center;max-width:720px;margin-inline:auto;}
.hs-section-head h2{margin-top:8px;}

.hs-tabs__list{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6);}
.hs-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gm-border);border-radius:var(--r-pill);
  padding:10px 20px;font-family:var(--font-head);font-weight:600;color:var(--gm-dark);background:#fff;}
.hs-tab[aria-selected="true"]{border-color:var(--hs-accent);color:var(--hs-accent);box-shadow:0 0 0 3px rgba(253,92,99,.12);}
.hs-tab svg{width:20px;height:20px;color:var(--hs-accent);}
.hs-tabpanel{margin-top:var(--sp-7);}
.hs-tabpanel .grid-2{align-items:center;}
.hs-tabpanel img{border-radius:var(--r-xl);box-shadow:var(--shadow-md);width:100%;}
.hs-checklist{display:grid;gap:12px;margin:var(--sp-4) 0 var(--sp-5);}
.hs-checklist li{display:flex;gap:10px;align-items:center;color:var(--gm-text);}
.hs-checklist .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--hs-accent);color:#fff;display:grid;place-items:center;}
.hs-checklist .ck svg{width:12px;height:12px;}
.hs-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--hs-accent);font-family:var(--font-head);font-weight:600;}

.hs-features{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:var(--sp-7);}
.hs-feature-card{background:#fff;border:1px solid var(--gm-border-light);border-radius:var(--r-xl);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-sm);display:grid;gap:var(--sp-5);}
.hs-feature{display:flex;gap:14px;align-items:flex-start;}
.hs-feature__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(253,92,99,.1);color:var(--hs-accent);}
.hs-feature__ic svg{width:22px;height:22px;}
.hs-feature h3{font-size:1.0625rem;margin-bottom:4px;}
.hs-feature p{color:var(--gm-slate);font-size:.9375rem;}
@media(max-width:760px){.hs-features{grid-template-columns:1fr;}}

.hs-why{background:var(--gm-dark);color:#fff;}
.hs-why h2,.hs-why h3{color:#fff;}
.hs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5) var(--sp-6);margin:var(--sp-5) 0;}
.hs-stat .num{font-family:var(--font-head);font-weight:700;font-size:clamp(1.75rem,1.2rem+2vw,2.5rem);color:#fff;}
.hs-stat .lbl{color:#c9d2e3;}
.hs-why__media img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;}

.hs-pricing{text-align:center;background:var(--gm-tint-1);border-radius:var(--r-xl);padding:clamp(28px,4vw,56px);}
.hs-pricing h2{margin-bottom:var(--sp-3);}
.hs-pricing p{color:var(--gm-slate);max-width:52ch;margin:0 auto var(--sp-5);}

.hs-footer{background:var(--gm-dark);color:#fff;padding-block:28px;}
.hs-footer p{color:#8794ad;font-size:.9375rem;}
.hs-footer strong{color:#fff;font-family:var(--font-head);}

/* ---- Privacy / legal page ---- */
.legal-hero{padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px);text-align:center;}
.legal-hero .date{display:inline-flex;gap:10px;align-items:center;color:var(--gm-slate);margin-top:14px;}
.legal{max-width:var(--container-narrow);margin-inline:auto;padding-bottom:clamp(48px,7vw,96px);
  border-top:1px solid var(--gm-border-light);padding-top:clamp(32px,4vw,56px);}
.legal h3{margin-top:var(--sp-7);margin-bottom:var(--sp-3);color:var(--gm-dark);font-size:1.25rem;}
.legal p{margin-bottom:var(--sp-4);color:var(--gm-slate);}
.legal ul,.legal ol{margin:0 0 var(--sp-4) 1.4em;color:var(--gm-slate);display:grid;gap:8px;}
.legal ul{list-style:disc;}
.legal ol{list-style:decimal;}
.legal strong{color:var(--gm-dark);}
.legal code{background:var(--gm-tint-1);padding:2px 6px;border-radius:6px;font-size:.92em;}

/* ---- Ad budget calculator ---- */
.calc{max-width:560px;margin-inline:auto;background:#fff;border:1px solid var(--gm-border-light);
  border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,40px);}
.calc .field{margin-bottom:var(--sp-4);}
.calc .btn{width:100%;justify-content:center;}
.calc__results{margin-top:var(--sp-5);background:var(--gm-tint-1);border-radius:var(--r-lg);padding:var(--sp-5);display:none;}
.calc__results.is-shown{display:block;}
.calc__results h3{margin-bottom:var(--sp-3);}
.calc__row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--gm-border-light);}
.calc__row:last-of-type{border-bottom:0;}
.calc__row .amt{font-family:var(--font-head);font-weight:700;color:var(--gm-blue);font-size:1.0625rem;}
.calc__hint{color:var(--gm-slate);font-size:.875rem;margin-top:12px;}
.calc__error{color:var(--gm-coral);margin-top:14px;display:none;}
.calc__error.is-shown{display:block;}

/* Scroll-reveal — progressive enhancement only.
   Content is visible by default (no-JS, SEO, screenshots). The hidden-then-animate
   state applies ONLY when JS is active (html.js, set at top of main.js). */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.is-visible{opacity:1;transform:none;}