/* ============================================================================
   FAMILY — the pieces HappyStack shares with HappyStack Labs (2026-10-29, Cian).
   Loaded after each page's own stylesheet on index, apply and about, so the
   motion and the footer stay identical across pages. Same world, separate brands.
   ============================================================================ */

/* ---- TYPE: Greed everywhere, set the Labs way (2026-10-29, Cian) ------------
   Labs runs one face, Greed 400–800. Headings sit at 500 with tight tracking
   (-.042em) instead of a heavy weight; body runs big and tight with the first
   sentence bright and the rest soft; no small uppercase labels. Words untouched. */
@font-face{font-family:'Greed';font-weight:400;font-style:normal;src:url("fonts/greed-Regular.otf") format('opentype');font-display:block}
:root{--body:'Greed',ui-sans-serif,system-ui,sans-serif}
body{letter-spacing:-.012em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* headings: medium weight, tight, balanced */
.h1,.h2,.cred-h,.proof-h,.scard h3,.dawn .h1{font-weight:500;letter-spacing:-.042em;line-height:1.02;text-wrap:balance}
.scard h3{letter-spacing:-.036em;line-height:1.04}
/* medium weight reads lighter, so section heads go up a size to hold their place */
@media (min-width:921px){
  .cred-h,.proof-h,.faq .section-head .h2{font-size:clamp(36px,4.2vw,60px)}
  .dawn .h1{font-size:clamp(40px,5vw,72px)}
}
.cred-num,.v-h .cred-num,.v-c .cred-num{font-weight:500;letter-spacing:-.05em}
.dawn-claim{letter-spacing:-.03em}

/* labels: sentence case in the brand face, no tracked caps */
.pill,.mono-note,.cred-eyebrow,.proof-eyebrow,.v-h .mono-note,.cred-card .mono-note{
  text-transform:none;letter-spacing:-.01em;font-weight:500;font-size:15px}
.pill{font-size:14px}
.oc-lab,.form-field label{text-transform:none;letter-spacing:-.01em;font-size:14px}
.h1{text-transform:none}   /* about.h1 was still in caps at 700; every page now matches */

/* body: the Labs lead — bigger, tighter, first sentence bright, the rest soft.
   Single sentences sit soft. */
.cred-lede,.dawn-sub{color:var(--ink);font-size:clamp(18px,1.45vw,21px);line-height:1.4;letter-spacing:-.018em;text-wrap:pretty}
.cred-lede b,.dawn-sub b{font-weight:500}
.cred-lede .mu,.dawn-sub .mu{opacity:.56}
.cred-sub,.v-h .cred-sub{color:rgba(242,242,233,.62);font-size:clamp(16px,1.2vw,18px);line-height:1.4;letter-spacing:-.015em}
.faq-answer p{color:rgba(242,242,233,.62);font-size:clamp(16px,1.3vw,18px);line-height:1.5;letter-spacing:-.015em}
.faq-row>summary{letter-spacing:-.025em}

/* How it works: the beat title is the bright sentence, its copy the soft rest.
   Beats you are not on blur back like the Labs nav; the current one is sharp. */
@media (min-width:921px){
  .scard h3{font-size:clamp(30px,3.1vw,44px)}
  .beat-title,.is-stat .beat-title{font-size:clamp(17px,1.35vw,20px);line-height:1.38;letter-spacing:-.018em;font-weight:500}
  .beat-body p,.scard .txt .beat-body p{font-size:clamp(17px,1.35vw,20px);line-height:1.42;letter-spacing:-.016em;max-width:32em}
}
.beat-body p,.scard .txt .beat-body p{color:rgba(242,242,233,.56)}
.is-stat .beat-title{font-family:var(--display)}
@media (min-width:921px) and (prefers-reduced-motion:no-preference){
  .beats[data-ready] .beat-title{transition:color .5s var(--ease),filter .5s var(--ease),opacity .5s var(--ease)}
  .beats[data-ready] .beat:not(.on) .beat-title{color:var(--ink);opacity:.38;filter:blur(1.2px)}
  .beats[data-ready] .beat:not(.on) .beat-head:hover .beat-title{opacity:.7;filter:none}
}

/* ---- card stack: the receding card dims via this overlay's opacity (script.js),
   which the compositor animates without repainting the card underneath. */
.scard{position:relative}
.scard-dim{position:absolute;inset:0;z-index:20;background:#000;opacity:0;pointer-events:none;
  border-radius:inherit;will-change:opacity}
.stack-ready .scard{will-change:transform}

/* ---- blur fade in: the Labs reveal. Things arrive out of focus and settle.
   Layers on the existing .rv (opacity + 16px rise, data-d stagger); only adds
   the blur and the Labs timing. Ends on filter:none, not blur(0), so a revealed
   element never keeps a filter (that would break backdrop-filter inside it). */
.motion-ready .rv{filter:blur(12px);
  transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease)}
.motion-ready .rv.in{filter:none}

/* ---- headings marked data-words arrive word by word (split by family.js).
   The heading itself stays put; its words carry the blur, rise and stagger. */
.motion-ready [data-words].rv,.motion-ready [data-words].rv.in{opacity:1;filter:none;transform:none}
.motion-ready [data-words] .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px);
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--k) * 45ms)}
.motion-ready [data-words].in .w{opacity:1;filter:none;transform:none}

@media (prefers-reduced-motion:reduce){
  .motion-ready .rv,.motion-ready [data-words] .w{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
}

/* ---- footer: the Labs layout. One centred stack — brand, the Labs nod,
   socials, the line, legal. Keeps HappyStack's no-seam gradient into --bg-deep. */
footer{padding:clamp(56px,6vw,88px) 0 clamp(44px,5vw,64px)}
.foot-stack{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.foot-brand{font-size:19px;gap:10px;margin-bottom:4px}

/* "Home of Labs": the mirror of Labs' "Powered by HappyStack". The lockup is
   the Labs artwork untouched (scaled as a whole); on hover it turns Labs Green,
   the way Flippy comes into colour on the Labs footer.
   2026-11-10 Dylan: PARKED until Labs launches. The <p class="foot-labs"> line is
   deleted from all six footers (not hidden, so the unlaunched brand isn't in the
   page source). These rules stay so it comes back as-is: copy the line back in
   under .foot-brand from commit 5a966bb (e.g. index.html:431). */
.foot-labs{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;color:var(--ink-2)}
.foot-labs a{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;
  transition:color .4s var(--ease),transform .4s var(--ease)}
.foot-labs svg{height:15px;width:auto;display:block;fill:currentColor}
.foot-labs a:hover{color:#CBF98E;transform:translateY(-1px)}

.foot-stack .foot-social{margin:16px 0 4px}
.foot-copy{margin:0;font-family:var(--body);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* legal links hover like the Labs footer: no underline; the one you point at
   goes bright, the others blur and fade */
.foot-stack .foot-links{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 22px}
.foot-stack .foot-links a{display:inline;padding:0;font-size:13px;transition:opacity .5s var(--ease),filter .5s var(--ease),color .2s}
.foot-stack .foot-links:hover a:not(:hover){filter:blur(1.4px);opacity:.3}
@media (prefers-reduced-motion:reduce){.foot-stack .foot-links a{transition:none}}
@media (max-width:540px){
  .foot-stack .foot-links a{padding:12px 0;font-size:14px}   /* tap height without stacking */
}

/* ---- nav: three links in the middle slot, set as one quiet group. A soft glass
   highlight (family.js) slides under the link you point at and rests on the
   section you're in; that link goes to full ink, the rest sit softer. */
.nav-links{position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px}
.nav-links .nav-link{position:relative;z-index:1;font-size:14px;font-weight:500;letter-spacing:-.012em;
  padding:8px 14px;border-radius:999px;color:rgba(242,242,233,.6);transition:color .35s var(--ease)}
.nav-links .nav-link.lit,.nav-links .nav-link:hover{color:var(--ink)}
.nav-ind{position:absolute;left:0;top:3px;bottom:3px;width:0;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(244,243,236,.09),rgba(244,243,236,.045));
  box-shadow:inset 0 1px 0 rgba(244,243,236,.1),inset 0 0 0 1px rgba(244,243,236,.05);
  transition:transform .45s cubic-bezier(.3,.8,.25,1),width .45s cubic-bezier(.3,.8,.25,1),opacity .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.nav-ind{transition:opacity .2s}}

/* ---- the mascot hops: hover the wordmark and he gives a small bounce — a soft
   crouch, a ~3px lift with a slight tilt, a gentle landing. Kept to about half the
   room the nav pill leaves him (10px at its rounded end), so he never touches its
   edge. family.js adds .hop and clears it on animationend, so a hop always finishes. */
.nav-mascot,.foot-mascot{transform-origin:50% 100%}
.nav-mascot.hop,.foot-mascot.hop{animation:hs-hop .6s cubic-bezier(.3,.7,.3,1)}
@keyframes hs-hop{
  0%  {transform:none}
  16% {transform:scale(1.05,.94)}
  44% {transform:translateY(-3px) rotate(-4deg) scale(.98,1.03)}
  70% {transform:translateY(0) rotate(1.5deg) scale(1.03,.97)}
  86% {transform:translateY(-.5px) rotate(-.5deg)}
  100%{transform:none}
}
@media (prefers-reduced-motion:reduce){.nav-mascot.hop,.foot-mascot.hop{animation:none}}

/* ---- magnetic buttons: the primary pills lean a few px toward the cursor
   (family.js sets --mx/--my). Uses `translate`, separate from the buttons' own
   transform, so press and hover states are untouched. */
.btn,.nav-cta{translate:var(--mx,0px) var(--my,0px);transition-property:background,box-shadow,color,transform,translate}
.btn.is-magnet,.nav-cta.is-magnet{transition-duration:.2s,.2s,.2s,.1s,.18s}
.btn:not(.is-magnet),.nav-cta:not(.is-magnet){transition-duration:.2s,.2s,.2s,.1s,.55s;transition-timing-function:ease,ease,ease,ease,cubic-bezier(.2,.8,.2,1)}

/* ---- partner logos: the one you point at lifts a touch and brightens */
.mq-set li img{transition:opacity .35s var(--ease),translate .45s var(--ease),scale .45s var(--ease)}
.mq-set li:hover img{translate:0 -2px;scale:1.04}

/* ---- FAQ: an answer arrives the Labs way, out of focus and settling */
.faq-row[open] .faq-answer{animation:faq-in .55s var(--ease) both}
@keyframes faq-in{from{opacity:0;filter:blur(8px);transform:translateY(-4px)}to{opacity:1;filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){.faq-row[open] .faq-answer{animation:none}.btn,.nav-cta{translate:none}}

/* ---- title pills ("How it works", "Frequently asked", "Application received"):
   centred and a step more present — readable sentence case at 15px, bright ink,
   a slightly firmer rim. Same aura ring. */
.pill.aura{text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:500;color:var(--ink);
  padding:10px 20px;border-color:rgba(244,243,236,.14);
  background:linear-gradient(150deg,rgba(244,243,236,.09),rgba(244,243,236,.03) 60%,rgba(244,243,236,.012))}
@media (max-width:540px){.pill.aura{font-size:14px;padding:9px 18px}}

/* ---- polish pass (2026-10-29) ---- */
::selection{background:rgba(170,249,136,.28);color:#fff}
/* every section label is the same centred title pill */
.cred-eyebrow.pill,.proof-eyebrow.pill{display:inline-flex;margin:0 auto 6px}
.proof-head .proof-eyebrow.pill{margin-bottom:18px}

/* ---- type never touches (2026-10-29, Cian) -------------------------------------
   Measured, not eyeballed: every adjacent letter pair was drawn in Greed at its real
   size and tracking and the gap between the shapes measured. The Labs-tight tracking
   (-.042em headings, -.05em figures, ~-.016em body) pushed 108 pairs into contact
   ("77" overlapped by 2.5px). Rule now: nothing sits closer than Greed sets it, and
   no tightening may bring two letters within 1px. Text runs at the face's own
   spacing; only large headings and figures keep the tightest safe value measured for
   them. Deliberately wide-set caps keep their spacing. */
:where(body,body *:not(.foot-copy):not(.alpha-film__toggle)){letter-spacing:0!important}   /* zero specificity: the measured heading values below win */
.hero .h1,.hero .h1 *{letter-spacing:-.018em!important}
.cred-h,.cred-h *,.proof-h,.proof-h *{letter-spacing:-.017em!important}
.dawn .h1,.dawn .h1 *{letter-spacing:-.03em!important}
.apply-content .h1,.apply-content .h1 *,.about-hero .h1,.about-hero .h1 *{letter-spacing:-.017em!important}
.cred-num{letter-spacing:-.012em!important}
.oc-num{letter-spacing:-.02em!important}

/* 2026-11-05 Dylan: hide the footer "Company" link (→ about.html) for the moment, on every
   page. The markup stays in all six footers; delete this rule to bring it back. !important
   because the page sheets set display on .foot-links a (inline / block on phones). */
.foot-links > a[href$="about.html"]{display:none !important}