/* become-a-member — ported verbatim from the client-approved static build (become-a-member.html).
   Loaded only on this template. Do not restyle without checking the approved demo. */


.pagewrap{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}
.hero{background:var(--hft-navy);color:#fff;padding:clamp(38px,6vw,68px) 0;
  border-bottom:3px solid var(--hft-red);margin-bottom:0}
.hero .in{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}
.hero .kick{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hft-gold-hi);
  font-weight:750;margin-bottom:14px}
.hero h1{margin:0 0 16px;font-size:clamp(30px,5.2vw,52px);line-height:1.04;letter-spacing:-.032em;
  font-weight:760;color:#fff;max-width:19ch;text-wrap:balance}
.hero p{margin:0 0 22px;color:#b9c3d1;font-size:clamp(16px,1.9vw,19px);max-width:56ch}
.proofrow{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14)}
.pf{display:flex;flex-direction:column}
.pf .v{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:750;color:#fff}
.pf .k{font-size:.76rem;color:#8f9db0}

section{padding:clamp(44px,6vw,72px) 0}
h2{margin:0 0 12px;font-size:clamp(23px,3.4vw,34px);line-height:1.1;letter-spacing:-.026em;
  font-weight:730;border:0;padding:0;text-wrap:balance}
.lede{color:var(--hft-ink-2);font-size:1.03rem;max-width:64ch;margin:0 0 30px}
.kick2{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hft-red-hi);
  font-weight:750;margin-bottom:12px}

/* problem / outcome */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.pane{border:1px solid var(--hft-line);border-radius:.5rem;padding:24px;background:var(--hft-surface)}
.pane.bad{border-top:3px solid var(--hft-ink-3)}
.pane.good{border-top:3px solid var(--hft-red)}
.pane h3{margin:0 0 14px;font-size:1.1rem;font-weight:720}
.pane ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:9px;
  color:var(--hft-ink-2);font-size:.95rem}
.pane.bad li::marker{color:var(--hft-ink-3)}
.pane.good li::marker{color:var(--hft-red)}

/* day */
.day{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:1px;
  background:var(--hft-line);border:1px solid var(--hft-line);border-radius:.5rem;overflow:hidden}
.slot{background:var(--hft-surface);padding:22px 20px;display:flex;flex-direction:column;gap:8px;
  border-top:3px solid transparent}
.slot:hover{border-top-color:var(--hft-red)}
.slot .t{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hft-red-hi);font-weight:750}
.slot h4{margin:0;font-size:1.04rem;font-weight:700}
.slot p{margin:0;font-size:.88rem;color:var(--hft-ink-2)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:stretch}
.tier{border:1px solid var(--hft-line);border-radius:.6rem;padding:30px 26px;background:var(--hft-surface);
  display:flex;flex-direction:column;gap:16px}
.tier.feat{border:2px solid var(--hft-red);position:relative;padding:29px 25px;
  box-shadow:0 22px 50px -34px rgba(165,35,26,.55)}
.tier .flag{position:absolute;top:-12px;left:25px;background:var(--hft-red);color:#fff;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:770;
  padding:4px 11px;border-radius:.2rem}
.tier h3{margin:0;font-size:1.24rem;font-weight:730}
.price{display:flex;align-items:baseline;gap:7px}
.price .n{font-size:2.6rem;font-weight:760;letter-spacing:-.04em;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.price .p{font-size:.9rem;color:var(--hft-ink-3)}
.was{font-size:.85rem;color:var(--hft-ink-3);margin-top:-10px}
.was strong{color:var(--hft-red-hi)}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;
  font-size:.95rem;color:var(--hft-ink-2)}
.tier li{display:flex;gap:10px;align-items:flex-start}
.tier li .c{color:var(--hft-red-hi);font-weight:800;flex-shrink:0}
.cta{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;
  border-radius:.35rem;font-weight:680;text-decoration:none;margin-top:auto;font-size:1rem}
.cta.main{background:var(--hft-red);color:#fff}
.cta.main:hover{background:var(--hft-red-hi);color:#fff}
.cta.alt{border:1px solid var(--hft-line);color:var(--hft-ink)}
.cta.alt:hover{border-color:var(--hft-red);color:var(--hft-red-hi)}
.cta.gold{background:var(--hft-gold-hi);color:var(--hft-navy)}
.micro{font-size:.79rem;color:var(--hft-ink-3);text-align:center}

/* quote */
.qband{background:var(--hft-navy);color:#fff;border-top:3px solid var(--hft-red);
  border-bottom:3px solid var(--hft-red)}
.qband blockquote{margin:0;max-width:46ch;font-size:clamp(20px,2.7vw,28px);line-height:1.34;
  font-weight:600;letter-spacing:-.018em;padding-left:22px;border-left:3px solid var(--hft-gold-hi)}
.qband .attr{margin-top:22px;padding-left:25px;color:#9fadbd;font-size:.95rem}
.qband .attr strong{display:block;color:var(--hft-gold-hi);font-size:1rem}

/* faq */
.faq{max-width:800px}
.fq{border-bottom:1px solid var(--hft-line)}
.fq summary{padding:16px 0;font-weight:650;cursor:pointer;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";color:var(--hft-red-hi);font-weight:800}
.fq[open] summary::after{content:"−"}
.fq p{margin:0 0 16px;color:var(--hft-ink-2);font-size:.95rem;max-width:70ch}
.final{text-align:center;background:var(--hft-surface-2)}
.final h2{max-width:20ch;margin:0 auto 14px}
.final p{max-width:52ch;margin:0 auto 24px;color:var(--hft-ink-2)}