/* ==========================================================================
   Pillbox product branch — v4 override layer.
   Loaded AFTER pillbox.css + v2 + v3. Applies v4 feedback without changing
   the v3 baseline: larger/fading LF header lockup, light-section collapsed
   nav, second-person copy polish, proof-band LF treatment, and the dog paw.
   ========================================================================== */

/* ---- header logo: 50% larger on desktop, then fade before it collides with
       the first hero eyebrow. The JS only toggles the class; the motion lives
       here so reduced-motion can simplify it. ---- */
header.site .brand{
  gap:20px;
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out);
  transform-origin:top left;
}
header.site .mark img{height:90px;width:auto}
header.site .wordmark img{height:78px;width:auto}
body.logo-faded header.site .brand{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
}

/* ---- v4 reveal rhythm: slower, and reversible. Content enters from below,
       rests in place, then exits upward as it leaves the top of the viewport. ---- */
.reveal{
  transition:opacity .95s var(--ease-out),transform 1.05s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.in:not(.v4-visible),
.reveal.v4-before{
  opacity:0;
  transform:translateY(34px);
}
.reveal.v4-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal.v4-after{
  opacity:0;
  transform:translateY(-34px);
}

/* ---- v4 nav: keep the full written stack on the first dark hero. Once the
       page reaches the light body, visually collapse to the active section.
       Hover/focus reveals the rest, sliding in over a transparent background. ---- */
body.nav-compact.ground-light nav.stack{
  background:rgba(239,239,241,0) !important;
  border-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.nav-compact.ground-light nav.stack a{
  max-width:170px;
  transition:opacity .26s ease,visibility .26s ease,transform .34s var(--ease-out),color .25s ease;
}
body.nav-compact.ground-light nav.stack a.on{
  color:var(--action) !important;
}
body.nav-compact.ground-light nav.stack:not(:hover):not(:focus-within) a:not(.on){
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(18px);
}
body.nav-compact.ground-light nav.stack:hover a,
body.nav-compact.ground-light nav.stack:focus-within a{
  opacity:.82;
  visibility:visible;
  transform:none;
}
body.nav-compact.ground-light nav.stack:hover a.on,
body.nav-compact.ground-light nav.stack:focus-within a.on{
  opacity:1;
  color:var(--action) !important;
}

/* ---- proof section: Logic Foundry takes the primary blue and the wordmark's
       500/300 weight relationship, while the rest of the heading steps down. ---- */
.proof h2.proof-title{
  font-weight:400;
  max-width:27ch;
}
.proof h2 .lf-name{
  color:var(--action-dark);
  white-space:nowrap;
}
.proof h2 .lf-logic{font-weight:500}
.proof h2 .lf-foundry{font-weight:300}
.proof .proof-callout{
  margin:28px 0 0;
  max-width:56ch;
}
.proof .stats{
  margin:28px 0 0;
  padding-bottom:34px;
}
.proof-logo-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:max-content;
  max-width:100%;
  margin:34px auto;
  text-decoration:none;
  opacity:.96;
  transition:opacity .2s ease,transform .2s var(--ease-out);
}
.proof-logo-lockup:hover{opacity:1}
.proof-logo-lockup:active{transform:scale(.985)}
.proof-logo-lockup img{display:block;width:auto}
.proof-mark img{height:92px}
.proof-wordmark img{height:78px}
.proof-link-row{
  max-width:none !important;
  margin:0;
  text-align:center;
}

/* ---- inline dog paw. It inherits the callout colour and scales as 1em. ---- */
.pawprint{
  display:inline-block;
  width:.96em;
  height:.96em;
  margin-left:.26em;
  vertical-align:-.12em;
  color:currentColor;
  fill:currentColor;
}

@media(max-width:760px){
  header.site .brand{gap:14px}
  header.site .mark img{height:72px}
  header.site .wordmark img{height:62px}
}

@media(max-width:640px){
  .hero{padding-top:238px}
  header.site{padding-top:18px}
  header.site .brand{gap:12px}
  header.site .mark img{height:66px}
  header.site .wordmark img{height:56px}
  .proof-logo-lockup{gap:13px}
  .proof-mark img{height:66px}
  .proof-wordmark img{height:58px}
}

@media(max-width:390px){
  header.site .mark img{height:58px}
  header.site .wordmark img{height:49px}
}

@media(prefers-reduced-motion:reduce){
  header.site .brand{
    transition:opacity .2s ease;
    transform:none !important;
  }
  body.logo-faded header.site .brand{transform:none}
  body.nav-compact.ground-light nav.stack a,
  .proof-logo-lockup{transition:none}
  .reveal,
  .reveal.in:not(.v4-visible),
  .reveal.v4-before,
  .reveal.v4-visible,
  .reveal.v4-after{
    opacity:1;
    transform:none;
    transition:opacity .2s ease;
  }
}