/*
  Huck shared visual system

  The homepage is the visual source of truth. Keep page-specific composition in
  each page stylesheet; use these tokens and shared shell rules for the brand
  foundation that should stay consistent across the site.
*/
@font-face{font-family:HuckEditorial;src:url('/fonts/Fraunces-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* Brand color */
  --huck-cream:#fffdf3;
  --huck-oxblood:#650e09;
  --huck-oxblood-deep:#510c07;
  --huck-scarlet:#ff3b30;
  --huck-cobalt:#1457d9;
  --huck-ice:#e4f1f5;
  --huck-sky:#add9ec;
  --huck-navy:#002f6c;
  --huck-butter:#faf6bc;
  --huck-green:#074c39;
  --huck-sand:#f1e0bd;

  /* Approved surface / foreground pairings */
  --huck-on-cream:var(--huck-oxblood);
  --huck-on-ice:var(--huck-navy);
  --huck-on-sky:var(--huck-navy);
  --huck-on-butter:var(--huck-green);
  --huck-on-sand:var(--huck-oxblood);
  --huck-on-oxblood:var(--huck-cream);
  --huck-on-green:var(--huck-butter);
  --huck-on-scarlet:var(--huck-cream);

  /* Typography */
  --huck-font-display:HuckEditorial,Georgia,serif;
  --huck-font-body:NB,Arial,sans-serif;
  --huck-font-ui:Arial,sans-serif;

  /* Type scale */
  --huck-type-display:clamp(3.75rem,8vw,8.75rem);
  --huck-type-h1:clamp(3.25rem,7vw,7.25rem);
  --huck-type-h2:clamp(2.5rem,5vw,5rem);
  --huck-type-h3:clamp(1.75rem,2.8vw,2.75rem);
  --huck-type-lede:clamp(1.125rem,1.8vw,1.5rem);
  --huck-type-body:1rem;
  --huck-type-small:.8125rem;

  /* Layout */
  --huck-page-gutter:clamp(1.375rem,6vw,6rem);
  --huck-section-space:clamp(5rem,9vw,9rem);
  --huck-content-max:81rem;
  --huck-reading-max:44rem;

  /* Shape and line */
  --huck-radius-sm:.75rem;
  --huck-radius-md:1.5rem;
  --huck-radius-pill:999px;
  --huck-line:color-mix(in srgb,var(--huck-oxblood) 18%,transparent);
  --huck-line-light:color-mix(in srgb,var(--huck-cream) 32%,transparent);

  /* Compatibility aliases for the existing page families. */
  --ink:var(--huck-oxblood);
  --red:var(--huck-scarlet);
  --blue:var(--huck-ice);
  --green:var(--huck-butter);
  --line:var(--huck-line);
  --muted:#665f5c;

  /* Homepage aliases retained while its sections are promoted individually. */
  --hb-cream:var(--huck-cream);
  --hb-oxblood:var(--huck-oxblood);
  --hb-scarlet:var(--huck-scarlet);
  --hb-cobalt:var(--huck-cobalt);
  --hb-ice:var(--huck-ice);
  --hb-sky:var(--huck-sky);
  --hb-blue:var(--huck-navy);
  --hb-butter:var(--huck-butter);
  --hb-green:var(--huck-green);
  --hb-sand:var(--huck-sand);
}

.huck-system{background:var(--huck-cream);color:var(--huck-oxblood);font-family:var(--huck-font-body)}
.huck-system main{overflow:clip}
.huck-system main :where(section,article,header,div,form){min-width:0}
.huck-system main h1,.huck-system main h2{font-family:var(--huck-font-display)!important;font-variation-settings:'SOFT' 80,'WONK' 1;font-weight:850;letter-spacing:-.015em!important}
.huck-system :focus-visible{outline:3px solid currentColor;outline-offset:5px}
.huck-system input:focus-visible,.huck-system select:focus-visible,.huck-system textarea:focus-visible{outline:0;border-color:var(--huck-scarlet);box-shadow:inset 0 0 0 2px var(--huck-scarlet)}

/* Shared brand shell */
.huck-system .huck-header{max-width:none;background:var(--huck-oxblood-deep);color:var(--huck-cream);border:0;min-height:92px;height:auto;padding:24px max(5vw,calc((100vw - var(--huck-content-max))/2));gap:30px}
.huck-system .huck-logo{display:block;width:146px;flex-shrink:0;letter-spacing:0}
.huck-system .huck-logo img{display:block;width:100%;height:auto}
.huck-system .huck-nav{gap:clamp(16px,1.7vw,28px)}
.huck-system .huck-nav a{font-size:14px}
.huck-system .huck-nav-cta{border-radius:var(--huck-radius-pill);background:var(--huck-cream);color:var(--huck-oxblood)!important;font-weight:700;padding:12px 23px}
.huck-system .huck-menu-button{color:var(--huck-cream);border-color:currentColor;border-radius:var(--huck-radius-pill)}

.huck-system .hb-nav-links{display:flex;align-items:center;gap:30px}
.huck-system .hb-nav-links>a,.huck-system .hb-nav-disclosure summary{font-family:var(--huck-font-body);font-size:15px;font-weight:400;line-height:1.4}
.huck-system .hb-nav-disclosure{position:relative}
.huck-system .hb-nav-disclosure summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:12px 0;white-space:nowrap}
.huck-system .hb-nav-disclosure summary::-webkit-details-marker{display:none}
.huck-system .hb-nav-disclosure[open] summary svg{transform:rotate(180deg)}
.huck-system .hb-nav-disclosure summary:hover{text-decoration:underline;text-underline-offset:5px}
.huck-system .hb-nav-dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:420px;padding:6px 18px;background:var(--huck-cream);color:var(--huck-oxblood);border:0;border-radius:var(--huck-radius-sm);box-shadow:0 18px 45px #31070424}
.huck-system .hb-nav-dropdown a{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:14px;min-height:82px;padding:17px 4px;white-space:normal;text-decoration:none;position:relative;isolation:isolate}
.huck-system .hb-nav-dropdown a+a{border-top:1px solid var(--huck-line)}
.huck-system .hb-nav-dropdown a::before{content:"";position:absolute;inset:5px -6px;border-radius:7px;background:transparent;z-index:-1;pointer-events:none}
.huck-system .hb-nav-dropdown a:hover::before,.huck-system .hb-nav-dropdown a:focus-visible::before{background:color-mix(in srgb,var(--huck-sand) 45%,transparent)}
.huck-system .hb-nav-icon,.huck-system .hb-nav-arrow{display:block;color:#c92d22;flex-shrink:0}
.huck-system .hb-nav-icon{width:34px;height:34px}
.huck-system .hb-nav-arrow{width:20px;height:20px}
.huck-system .hb-nav-item-copy{display:block;min-width:0}
.huck-system .hb-nav-dropdown strong{display:block;font-family:var(--huck-font-display);font-size:21px;line-height:1.15;font-weight:750;letter-spacing:-.4px;margin-bottom:5px}
.huck-system .hb-nav-description{display:block;font-size:13px;line-height:1.4;color:#6f4035}

.huck-system .huck-footer{background:var(--huck-oxblood);color:var(--huck-cream);padding:75px var(--huck-page-gutter) 34px}
.huck-system .huck-footer p,.huck-system .huck-footer a,.huck-system .huck-footer-meta{color:var(--huck-cream)}
.huck-system .huck-footer-meta{border-color:var(--huck-line-light)}

/* Approved surface utilities */
.huck-surface--cream{background:var(--huck-cream)!important;color:var(--huck-on-cream)!important}
.huck-surface--ice{background:var(--huck-ice)!important;color:var(--huck-on-ice)!important}
.huck-surface--sky{background:var(--huck-sky)!important;color:var(--huck-on-sky)!important}
.huck-surface--butter{background:var(--huck-butter)!important;color:var(--huck-on-butter)!important}
.huck-surface--sand{background:var(--huck-sand)!important;color:var(--huck-on-sand)!important}
.huck-surface--oxblood{background:var(--huck-oxblood)!important;color:var(--huck-on-oxblood)!important}
.huck-surface--green{background:var(--huck-green)!important;color:var(--huck-on-green)!important}

/* Light blue always carries the navy family. Local ink tokens keep headings,
   copy, borders, and muted text inside these sections in the same pairing. */
.huck-system :is(
  .huck-page-hero.tone-blue,.huck-inline-cta,.hiw-hero,.hiw-phone-column,
  .acq-hero-visual--blue,.acq-choice,.acq-route,.acq-trades,.acq-proof--home,
  .search-service-answer,.trust-receipt,.trust-cta,.trust-human-grid article:last-child,
  .resource-hero,.guide-answer,.guide-sources,.ama-hero-art,.ama-definition,.ama-customer,
  .pricing-hero,.pricing-proof,.pro-workloops,.pro-people,.pro-delivery-loop,.pro-price-card,
  .pro-agency-row p:last-child,.pro-agency-row.is-header strong:last-child,
  .air-visual,.air-split.blue,.air-route,
  .int-hero-demo,.int-contract,.grain-quote,.about-origin figure,.about-origin figcaption,
  .about-reveal,.about-proof
){
  --ink:var(--huck-navy);
  --muted:color-mix(in srgb,var(--huck-navy) 72%,transparent);
  color:var(--huck-navy);
}

/* Shared button component. Content CTAs use the homepage's 12px shape. */
.huck-system .huck-button,.huck-system .huck-waitlist-form button{min-height:56px;width:max-content;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:16px 22px;border:1px solid transparent;border-radius:12px;font-family:var(--huck-font-body);font-size:16px;font-weight:700;line-height:1.15;text-align:center;text-decoration:none!important;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.huck-system .huck-button:hover,.huck-system .huck-waitlist-form button:hover{transform:translateY(-1px)}
.huck-system .huck-button--primary,.huck-system .huck-waitlist-form button{border-color:var(--huck-scarlet)!important;background:var(--huck-scarlet)!important;color:var(--huck-on-scarlet)!important}
.huck-system .huck-button--primary:hover,.huck-system .huck-waitlist-form button:hover{border-color:#e52b22!important;background:#e52b22!important}
.huck-system .huck-button--secondary{border-color:var(--huck-oxblood)!important;background:transparent!important;color:var(--huck-oxblood)!important}
.huck-system .huck-button--secondary:hover{background:color-mix(in srgb,var(--huck-oxblood) 7%,transparent)!important}
.huck-system .huck-button--inverse{border-color:var(--huck-cream)!important;background:var(--huck-cream)!important;color:var(--huck-oxblood)!important}
.huck-system .huck-button__icon{font-size:1.15em;line-height:1}

/* Shared waitlist composition: field and action first, legal copy below. */
.huck-system .huck-waitlist-form{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'field action' 'consent consent' 'status status';gap:10px 9px;align-items:stretch;width:100%;min-width:0}
.huck-system .huck-waitlist-form input[type=tel]{grid-area:field!important;background:var(--huck-cream);border-color:var(--huck-oxblood);border-radius:12px;color:var(--huck-oxblood);padding:16px 18px;min-width:0}
.huck-system .huck-waitlist-form button{grid-area:action!important;width:auto;white-space:nowrap}
.huck-system .huck-waitlist-form .huck-form-consent{grid-area:consent!important}
.huck-system .huck-waitlist-form .huck-form-status{grid-area:status!important}
.huck-system .huck-waitlist-form input[type=tel]::placeholder{color:#716d6a;opacity:1}

/* Dark surfaces always use the homepage's cream hierarchy. */
.huck-system :is(.air-hero,.air-flow,.air-number,.trust-hero,.trust-human,.huck-band.is-dark,.acq-hero--dark,.acq-related,.acq-close,.acq-number-map,.ama-loop,.ama-receipt,.pro-hero,.pro-price-copy,.grain-hero,.grain-close,.about-hero,.about-company,.int-hero,.int-systems,.int-cta,.guide-hero,.guide-close,.pricing-terms,.hiw-channels){color:var(--huck-cream)}
.huck-system :is(.air-hero,.air-flow,.air-number,.trust-hero,.trust-human,.huck-band.is-dark,.acq-hero--dark,.acq-related,.acq-close,.acq-number-map,.ama-loop,.ama-receipt,.pro-hero,.pro-price-copy,.grain-hero,.grain-close,.about-hero,.about-company,.int-hero,.int-systems,.int-cta,.guide-hero,.guide-close,.pricing-terms,.hiw-channels) :is(p,small){color:color-mix(in srgb,var(--huck-cream) 82%,transparent)!important}

/* Butter surfaces follow the homepage proof section: green type, not oxblood. */
.huck-system :is(.air-proof,.acq-proof,.air-split.green,.guide-product,.pricing-plan.is-pro,.pro-proof,.pro-cta,.success-page){--ink:var(--huck-green);--muted:color-mix(in srgb,var(--huck-green) 72%,transparent);color:var(--huck-green)}
.huck-system :is(.air-proof,.acq-proof,.air-split.green,.guide-product,.pricing-plan.is-pro,.pro-proof,.pro-cta,.success-page) :is(p,blockquote,a,small){color:inherit}

/* Huck Pro price split: the story panel is oxblood/cream; the product card is
   ice/navy. Keep product UI grays inside the phone mockup only. */
.huck-system .pro-price{background:var(--huck-oxblood)}
.huck-system .pro-price-copy{color:var(--huck-cream)}
.huck-system .pro-price-copy>p{color:color-mix(in srgb,var(--huck-cream) 82%,transparent)!important}
.huck-system .pro-price-card{--ink:var(--huck-navy);--muted:color-mix(in srgb,var(--huck-navy) 70%,transparent);background:var(--huck-ice);color:var(--huck-navy)}
.huck-system .pro-price-card>header{border-color:color-mix(in srgb,var(--huck-navy) 48%,transparent)}
.huck-system .pro-price-card :is(h3,h4,h5,.pro-price-lockup p,.pro-commitments span){color:var(--huck-navy)}
.huck-system .pro-price-card>header strong{font-family:var(--huck-font-display);font-variation-settings:'SOFT' 80,'WONK' 1;font-weight:850;letter-spacing:-.025em;color:var(--huck-navy)}
.huck-system .pro-price-card>header span{color:var(--huck-navy);font-weight:600}
.huck-system .pro-price-lockup small{font-family:var(--huck-font-body);font-weight:600;color:color-mix(in srgb,var(--huck-navy) 72%,transparent)!important}
.huck-system .pro-price-card :is(.pro-scope>p,.pro-report-intro p,.pro-price-note,.pro-scope-grid li span){color:color-mix(in srgb,var(--huck-navy) 74%,transparent)!important}
.huck-system .pro-scope-grid{border-color:color-mix(in srgb,var(--huck-navy) 36%,transparent)}
.huck-system .pro-scope-grid section{border-color:color-mix(in srgb,var(--huck-navy) 36%,transparent)}
.huck-system .pro-scope-grid h5{background:var(--huck-cream);border-color:color-mix(in srgb,var(--huck-navy) 36%,transparent)}
.huck-system .pro-scope-grid li{border-color:color-mix(in srgb,var(--huck-navy) 24%,transparent)}
.huck-system .pro-report-card{border-color:var(--huck-navy)}
.huck-system .pro-commitments span:before{color:var(--huck-scarlet)}
.huck-system .pro-cta{--ink:var(--huck-green)!important;--muted:color-mix(in srgb,var(--huck-green) 72%,transparent)!important;color:var(--huck-green)!important}

/* Retire page-local button colors after a component is promoted. */
.huck-system .guide-actions .huck-button--primary,.huck-system .guide-close .huck-button--primary{color:var(--huck-on-scarlet)!important}

/* Two-column proof layouts must not let long copy collapse the photo track. */
.huck-system .air-proof,.huck-system .acq-proof{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

@media(min-width:981px){
  .huck-system .huck-header{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
  .huck-system .huck-nav{display:contents}
  .huck-system .hb-nav-links{grid-column:2}
  .huck-system .huck-nav-cta{grid-column:3;justify-self:end}
}
@media(min-width:981px) and (max-width:1180px){
  .huck-system .huck-header{padding-inline:4%}
  .huck-system .huck-logo{width:115px}
  .huck-system .hb-nav-links{gap:22px}
  .huck-system .hb-nav-links>a,.huck-system .hb-nav-disclosure summary{font-size:14px}
}
@media(max-width:980px){
  .huck-system .huck-header{padding:20px 6%;min-height:78px}
  .huck-system .huck-logo{width:115px}
  .huck-system .huck-nav{gap:0}
  .huck-system .huck-nav-cta{justify-content:center}
  .huck-system .hb-nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .huck-system .hb-nav-disclosure summary{padding:14px 0;justify-content:space-between}
  .huck-system .hb-nav-dropdown{position:static;transform:none;width:100%;margin:2px 0 12px;padding:4px 16px}
  .huck-system .hb-nav-dropdown a{grid-template-columns:36px minmax(0,1fr) 22px;gap:12px;padding:17px 0;min-height:88px}
  .huck-system .hb-nav-icon{width:36px;height:36px}
  .huck-system .hb-nav-arrow{width:22px;height:22px}
  .huck-system .huck-waitlist-form{grid-template-columns:1fr!important;grid-template-areas:'field' 'action' 'consent' 'status'!important;gap:10px!important}
  .huck-system .huck-waitlist-form button{width:100%;white-space:normal}
  .huck-system .huck-waitlist-form .huck-form-consent{margin-top:4px}
}
@media(max-width:680px){
  .huck-system .air-hero{grid-template-columns:minmax(0,1fr)}
  .huck-system .air-copy h1{font-size:clamp(52px,15vw,70px)!important}
  .huck-system .huck-footer{gap:34px;padding:55px 6% 28px}
  .huck-system .huck-footer-meta{flex-wrap:wrap;gap:14px}
  .huck-system .huck-footer-meta a{margin-left:0}
  .huck-system .pro-price-card>header strong{font-size:clamp(64px,20vw,82px)}
  .huck-system .pro-price-card>header span{font-size:16px}
}
@media(max-width:1100px){
  .huck-system .air-proof,.huck-system .acq-proof{grid-template-columns:1fr}
}