/* ---------- invite-hero.css · the invitation hero, transplanted from Trev's donor (10 Sep 2026) ----------
   Every class is ih-prefixed; the site's tokens (styles.css) are used. Numbers and links live in IH_CFG in index.html. */
.ih{position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft); padding:clamp(28px,3.5vw,44px) 0 clamp(36px,4.5vw,56px); font-family:var(--font-body); color:var(--text)}
.ih *{box-sizing:border-box}
.ih-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ih-bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.ih-veil{position:absolute; inset:0; background:
  radial-gradient(900px 520px at 78% 40%, rgba(0,212,255,.10), transparent 62%),
  radial-gradient(700px 420px at 20% 20%, rgba(30,107,255,.14), transparent 65%),
  linear-gradient(180deg, rgba(5,10,20,.10), rgba(5,10,20,.70))}
.ih-wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); display:grid; column-gap:clamp(24px,4vw,56px); row-gap:10px; grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr); grid-template-areas:"top mark" "top side" "bottom side"; align-items:center}
.ih-top{grid-area:top; align-self:end}
.ih-bottom{grid-area:bottom; align-self:start; padding-top:6px}
.ih-mark{grid-area:mark; display:grid; place-items:center; align-self:end}
.ih-side{grid-area:side; align-self:start; display:flex; flex-direction:column; gap:14px}

/* type */
.ih-mono{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase}
.ih-eyebrow-row{display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:14px}
.ih-eyebrow{display:flex; align-items:center; gap:12px; color:var(--cyan); font-weight:600}
.ih-eyebrow::after{content:""; width:56px; height:1px; background:linear-gradient(90deg, rgba(0,212,255,.55), transparent)}
.ih-pill{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1; padding:.55em .9em; border-radius:999px; color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(0,212,255,.35); background:rgba(0,212,255,.06); white-space:nowrap}
.ih-pill--teal{color:var(--teal); box-shadow:inset 0 0 0 1px rgba(58,214,196,.35); background:rgba(58,214,196,.06)}
.ih-pill--bronze{color:var(--bronze-light); box-shadow:inset 0 0 0 1px var(--bronze-edge); background:var(--bronze-muted); font-weight:600}
.ih-reason{color:var(--text-3); font-size:1rem; margin:0 0 22px; max-width:56ch; line-height:1.5}
.ih h1{font-family:var(--font-display); font-size:clamp(2.2rem,4.4vw,3.55rem); font-weight:800; line-height:1.04; letter-spacing:-.035em; margin:0 0 18px; max-width:15ch; text-wrap:balance}
.ih h1 .ih-accent{color:var(--cyan-soft)}
.ih-lede{font-size:clamp(1rem,1.5vw,1.12rem); color:var(--text-2); max-width:52ch; margin:0 0 16px; line-height:1.55}
.ih-lede b{color:var(--text); font-weight:600}
.ih-hook{font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.02em; line-height:1.3; color:var(--text); margin:0 0 6px; max-width:30ch; text-wrap:balance}
.ih-hook em{font-style:normal; color:var(--cyan)}
.ih-hook .ih-mk{color:var(--text-2); font-weight:500}
.ih-agents{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin:0}
.ih-agents-line{margin:0; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); line-height:1.8}
.ih-agents-line b{color:var(--text); font-weight:600}
.ih-btn--agent{min-height:42px; padding:10px 20px; font-size:.66rem; color:var(--bronze-light); border-color:var(--bronze-edge)}
.ih-btn--agent:hover{color:#e8b987; border-color:var(--bronze-light)}
.ih-btn--agent span{font-size:.55rem}
.ih-coverage{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text); line-height:1.8}
.ih-coverage .ih-k{color:var(--cyan); font-weight:600}
.ih-coverage .ih-sep{color:var(--steel)}
.ih-trust{margin:0; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); font-weight:600; line-height:1.9}
.ih-trust-sub{margin:4px 0 0; color:var(--text-3); font-size:.92rem; max-width:60ch; line-height:1.5}

/* the mark */
.ih-logo{width:clamp(130px,12vw,172px); height:auto; aspect-ratio:560/486; display:block; will-change:transform,filter; filter:drop-shadow(0 0 44px rgba(0,212,255,.34)); animation:ihGlow 6.5s ease-in-out infinite}
@keyframes ihGlow{0%,100%{filter:drop-shadow(0 0 30px rgba(0,212,255,.28))}50%{filter:drop-shadow(0 0 64px rgba(0,212,255,.52))}}

/* the ticket */
.ih-ticket{position:relative; isolation:isolate; overflow:hidden; border:0; border-radius:var(--radius); width:100%;
  background-color:var(--frost-glass-elevated); background-image:var(--frost-glass-img-elevated);
  box-shadow:var(--frost-shadow-elevated), inset 0 0 0 1px var(--frost-hairline-strong);
  -webkit-backdrop-filter:blur(var(--frost-blur-elevated)) saturate(122%); backdrop-filter:blur(var(--frost-blur-elevated)) saturate(122%)}
.ih-ticket::before{content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 16% 0%, rgba(234,247,255,.08), transparent 34%), linear-gradient(90deg, transparent, rgba(0,212,255,.035), transparent)}
.ih-row{padding:14px 22px 16px; display:grid; gap:9px}
.ih-row--beta{box-shadow:inset 3px 0 0 var(--bronze-light); background:linear-gradient(180deg,rgba(215,160,106,.07),rgba(215,160,106,.02))}
.ih-row + .ih-row{border-top:1px solid rgba(140,220,255,.1)}
.ih-big{display:flex; align-items:center; gap:14px; margin:2px 0 0}
.ih-big-n{font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,5vw,3.9rem); line-height:.95; letter-spacing:-.045em; color:var(--bronze-light); font-variant-numeric:tabular-nums}
.ih-big-l{font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.1; letter-spacing:-.02em; color:var(--text)}
.ih-meter--mini .ih-track{height:4px; border-radius:2px}
.ih-meter--mini .ih-fill{border-radius:2px; box-shadow:none}
.ih-row-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.ih-count{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); white-space:nowrap}
.ih-count b{font-family:var(--font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; color:var(--text); margin-right:.15em; font-variant-numeric:tabular-nums}
.ih-count span{color:var(--text-2)}
.ih-offer{margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.3rem); letter-spacing:-.015em; line-height:1.25; color:var(--text); text-wrap:balance}
.ih-offer em{font-style:normal; color:var(--green)}
.ih-offer .ih-b{color:var(--bronze-light)}
.ih-sub{margin:0; font-size:.84rem; line-height:1.45; color:var(--text-2)}
.ih-sub b{color:var(--text); font-weight:600}
.ih-ask{margin:0; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.ih-ask b{color:var(--text); font-weight:600}
/* bars */
.ih-meter{display:grid; gap:6px}
.ih-track{position:relative; height:8px; border-radius:4px; background:rgba(53,80,122,.28); box-shadow:inset 0 0 0 1px rgba(140,220,255,.12); overflow:hidden}
.ih-track::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(var(--seg,10%) - 2px), #050A14 calc(var(--seg,10%) - 2px) var(--seg,10%)); pointer-events:none}
.ih-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px; background:linear-gradient(90deg, rgba(215,160,106,.65), var(--bronze-light)); box-shadow:0 0 12px rgba(215,160,106,.45); transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.ih-fold .ih-fill{background:linear-gradient(90deg, rgba(41,211,145,.7), var(--green)); box-shadow:0 0 12px rgba(41,211,145,.4)}
.ih-meter-lbl{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.ih-meter[data-state="unavailable"] .ih-fill{display:none}
.ih-meter[data-state="full"] .ih-fill{width:100% !important; background:linear-gradient(90deg, rgba(53,80,122,.9), var(--steel)); box-shadow:none}
/* buttons */
.ih-btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:48px; padding:12px 26px; border-radius:999px; font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; transition:box-shadow .2s, background .2s, color .2s, transform .15s; white-space:nowrap; cursor:pointer}
.ih-btn--primary{background:var(--cyan); color:var(--text-inverse); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -14px rgba(0,212,255,.65)}
.ih-btn--primary:hover{background:var(--cyan-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -12px rgba(0,212,255,.8)}
.ih-btn--primary:active{transform:translateY(1px)}
.ih-btn--ghost{background:var(--frost-glass); color:var(--text); border-color:var(--frost-hairline); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.ih-btn--ghost:hover{border-color:var(--cyan); color:var(--cyan)}
.ih-btn:focus-visible,.ih a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.ih-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.ih-link{display:inline-flex; align-items:center; gap:.7em; color:var(--cyan); font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
.ih-link i{width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,212,255,.45); display:grid; place-items:center; font-style:normal; font-size:.6rem}
.ih-link:hover{color:var(--cyan-2)}
.ih-link--bronze{color:var(--bronze-light)} .ih-link--bronze i{box-shadow:inset 0 0 0 1px var(--bronze-edge)} .ih-link--bronze:hover{color:#e8b987}
.ih-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; padding:10px 22px 12px; border-top:1px solid rgba(140,220,255,.1); font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); line-height:1.7}
.ih-foot b{color:var(--text-2); font-weight:500}
.ih-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:2px 4px 0}
.ih-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* the opening sequence — each line arrives in turn, once */
html.ih-js .ih-cue{opacity:0; transform:translateY(10px); animation:ihCue .7s cubic-bezier(.2,.7,.2,1) forwards}
html.ih-js .ih-cue-1{animation-delay:.05s} html.ih-js .ih-cue-2{animation-delay:.18s} html.ih-js .ih-cue-3{animation-delay:.32s} html.ih-js .ih-cue-4{animation-delay:.46s} html.ih-js .ih-cue-5{animation-delay:.62s} html.ih-js .ih-cue-6{animation-delay:.78s} html.ih-js .ih-cue-7{animation-delay:.92s} html.ih-js .ih-cue-8{animation-delay:1.04s}
@keyframes ihCue{to{opacity:1; transform:none}}

@media (max-width:900px){
  .ih-wrap{grid-template-columns:1fr; grid-template-areas:"mark" "top" "side" "bottom"; row-gap:18px}
  .ih-logo{width:min(36vw,160px)}
  .ih h1{max-width:none}
  .ih-actions .ih-btn{flex:1 1 100%}
}
@media (max-width:520px){.ih-row{padding:16px 16px} .ih-foot{padding-left:16px; padding-right:16px}}
@media (prefers-reduced-motion:reduce){
  .ih *,.ih *::before,.ih *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html.ih-js .ih-cue{opacity:1; transform:none}
}
/* the film control is a button on the seed site (opens the Three Pillars modal) — same look as the donor's link */
button.ih-link{appearance:none; background:none; border:0; padding:0; cursor:pointer; font:inherit}

/* the FREE stamp beside the 50 (10 Sep) — a rubber stamp, not a badge */
.ih-stamp{display:inline-grid; justify-items:center; align-content:center; gap:1px; padding:6px 12px 5px; border-radius:8px; transform:rotate(-7deg);
  color:var(--green); box-shadow:inset 0 0 0 2px rgba(41,211,145,.55), inset 0 0 0 4px rgba(41,211,145,.1); background:rgba(41,211,145,.07)}
.ih-stamp b{font-family:var(--font-display); font-weight:800; font-size:1.16rem; letter-spacing:.03em; line-height:1; text-transform:uppercase}
.ih-stamp i{font-style:normal; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(41,211,145,.8)}
@media (max-width:520px){.ih-stamp{padding:6px 11px 5px} .ih-stamp b{font-size:1rem}}

/* ---- 10 Sep · the ticket, simplified: one subject (the 50 places), the rest behind a fold ---- */
.ih-row--beta .ih-pill--bronze{font-size:.84rem; padding:.56em 1em; letter-spacing:.15em}
.ih-big{align-items:center; gap:16px; margin:2px 0 0}
.ih-big-n{display:inline-flex; align-items:baseline; font-family:var(--font-display); font-weight:800; font-size:clamp(2.7rem,4.4vw,3.6rem); line-height:.95; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.ih-big-n b{color:var(--bronze-light); font-weight:800}
.ih-big-n em{font-style:normal; color:var(--text-3); font-weight:600; font-size:.62em; margin:0 .04em}
.ih-big-n i{font-style:normal; color:var(--text-2); font-weight:700; font-size:.62em}
.ih-big-l{font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.15; letter-spacing:-.02em; color:var(--text)}
.ih-meter-lbl{align-items:baseline}
.ih-meter-lbl [data-ih-rem]{font-family:var(--font-display); font-size:1.1rem; font-weight:800; letter-spacing:-.02em; text-transform:none; color:var(--bronze-light); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.ih-meter-lbl [data-ih-asof]{text-align:right; white-space:nowrap; font-size:.54rem}
.ih-meter[data-state="full"] .ih-meter-lbl [data-ih-rem]{color:var(--text-2); font-size:.95rem}
.ih-meter[data-state="unavailable"] .ih-meter-lbl [data-ih-rem]{font-family:var(--font-mono); font-size:.58rem; font-weight:500; color:var(--text-3); letter-spacing:.12em; text-transform:uppercase}

/* the fold: the founding-member route, out of the way until it is wanted */
.ih-fold{border-top:1px solid rgba(140,220,255,.1)}
.ih-fold summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; padding:13px 22px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); line-height:1.6}
.ih-fold summary::-webkit-details-marker{display:none}
.ih-fold-t{flex:1 1 auto}
.ih-fold-t b{color:var(--green); font-weight:600}
.ih-fold-i{font-style:normal; color:var(--green); transition:transform .3s; flex:none}
.ih-fold[open] .ih-fold-i{transform:rotate(180deg)}
.ih-fold summary:hover .ih-fold-t b{color:#4fe6ac}
.ih-fold summary:focus-visible{outline:2px solid var(--green); outline-offset:-3px}
.ih-fold-in{display:grid; gap:10px; padding:2px 22px 18px}
.ih-fold-n{margin:0; display:flex; align-items:baseline; gap:8px; font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; color:var(--green); font-variant-numeric:tabular-nums}
.ih-fold-n em{font-style:normal; color:var(--text-3); font-weight:600; font-size:.62em; margin:0 -4px}
.ih-fold-n i{font-style:normal; color:var(--text-2); font-weight:700; font-size:.62em}
.ih-fold-n span{font-family:var(--font-mono); font-size:.58rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.ih-fold-n .ih-fold-rem{color:var(--green); margin-left:auto; text-align:right}
.ih-fold-in .ih-meter--mini .ih-track{height:6px; border-radius:3px}
.ih-fold-in .ih-meter--mini .ih-fill{border-radius:3px}
.ih-btn--members{min-height:42px; padding:10px 20px; font-size:.64rem; border-color:rgba(41,211,145,.4); justify-self:start}
.ih-btn--members:hover{border-color:var(--green); color:var(--green)}
.ih-fold-f{margin:0; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
@media (max-width:520px){
  .ih-fold summary{padding:12px 16px} .ih-fold-in{padding:2px 16px 16px}
  .ih-big{gap:12px} .ih-meter-lbl [data-ih-rem]{font-size:1rem}
}