/* howitworks.css — How it works page only: hero + journey switcher, three journeys on a spine (pains + steps), per-journey CTA */

/* hero */
.hhero{position:relative;padding:72px 0 40px;overflow:hidden}
.hhero .blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hhero .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22}
.hhero .blob.a{width:780px;height:640px;left:-160px;top:40px;background:radial-gradient(circle,rgba(224,0,108,.28),transparent 62%)}
.hhero .blob.b{width:760px;height:620px;right:-200px;top:120px;background:radial-gradient(circle,rgba(255,107,53,.30),transparent 62%)}
.hhero .wrap{position:relative}
.hhero .eyebrow{margin-bottom:14px}
.hhero h1{font-size:54px;line-height:1.08;letter-spacing:-.04em;font-weight:700;margin:0 auto 18px;max-width:880px}
.hhero .what{font-size:18px;line-height:1.55;color:var(--sub);max-width:640px;margin:0 auto}
.hhero .seg{margin-top:30px}
.hhero .seg button{min-width:150px;justify-content:center}

/* journey */
.hsec{position:relative;padding:40px 0 80px}
.journey{max-width:860px;margin:0 auto}
.jhead{text-align:center;margin:0 auto 44px}
.jhead .eyebrow{margin-bottom:12px}
.jhead h2{font-size:42px;line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:0 0 14px}
.jhead .lead{max-width:640px;margin:0 auto}

/* the spine */
.spine{position:relative;list-style:none;margin:0;padding:0 0 0 76px}
.spine::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--mag),var(--org));border-radius:2px;opacity:.5}
.spine>li{position:relative;margin-bottom:22px}
.spine .n{position:absolute;left:-76px;top:26px;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;font-size:20px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 26px rgba(224,0,108,.28);border:4px solid #fff}
.spine .n i{font-style:normal;font-size:20px}
.spine .step.pre .n{background:var(--ink);box-shadow:0 10px 26px rgba(20,20,48,.2)}
.spine .card{border-radius:26px;padding:24px 28px 22px;display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:start;transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.spine .card>*{position:relative}
.spine .card:hover{box-shadow:var(--gls),0 0 0 1.5px rgba(224,0,108,.45);transform:translateY(-2px)}
.spine .ttl{grid-column:1}
.spine .ttl .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.spine .ttl b{display:block;font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.spine .card p{grid-column:1;font-size:15.5px;line-height:1.55;color:var(--sub);margin:4px 0 0;max-width:560px}
.spine .meta{grid-column:2;grid-row:1/3;align-self:start;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:980px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.spine .step.pre .meta{background:#E6F7EF;-webkit-background-clip:border-box;background-clip:border-box;color:#0B6B47;box-shadow:none;border-color:#CDEEDD}

/* pain interjections */
.spine .pain{margin:10px 0 22px;padding:14px 18px 14px 18px;border-radius:18px;background:rgba(20,20,48,.04);border:1px dashed rgba(20,20,48,.16);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.spine .pain::before{content:"";position:absolute;left:-55px;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(20,20,48,.25);transform:translateY(-50%)}
.spine .pain .tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 6px;border-radius:980px;background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
.spine .pain .tag i{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center}
.spine .pain p{margin:0;font-size:15px;line-height:1.45;color:#6E6E7A;font-style:italic}

/* honest line + CTA */
.clock{display:flex;gap:12px;align-items:flex-start;max-width:720px;margin:12px auto 0;padding:0 0 0 76px;font-size:14.5px;line-height:1.55;color:var(--sub)}
.clock i{font-style:normal;color:#22D38A;font-size:12px;line-height:1.7;flex:none}
.jcta{position:relative;margin:36px 0 0;border-radius:30px;padding:40px 40px 32px;text-align:center}
.jcta>*{position:relative}
.jcta h3{font-size:34px;line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 20px}
.jcta .ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.jcta .risk{font-size:14px;color:var(--mute);margin:16px 0 0;font-weight:600}

/* reveal: cards rise in when the journey is shown (site.js data-reveal not needed; CSS only) */
@keyframes jrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.journey:not([hidden]) .spine>li{animation:jrise .55s var(--ease) both}
.journey:not([hidden]) .spine>li:nth-child(2){animation-delay:.06s}.journey:not([hidden]) .spine>li:nth-child(3){animation-delay:.12s}.journey:not([hidden]) .spine>li:nth-child(4){animation-delay:.18s}.journey:not([hidden]) .spine>li:nth-child(5){animation-delay:.24s}.journey:not([hidden]) .spine>li:nth-child(6){animation-delay:.3s}.journey:not([hidden]) .spine>li:nth-child(7){animation-delay:.36s}.journey:not([hidden]) .spine>li:nth-child(8){animation-delay:.42s}.journey:not([hidden]) .spine>li:nth-child(9){animation-delay:.48s}
html.static .spine>li,.journey:not([hidden]) .spine>li{animation-duration:.55s}
html.static .journey .spine>li{animation:none}
@media (prefers-reduced-motion:reduce){.journey .spine>li{animation:none}.spine .card:hover{transform:none}}

@media (max-width:1023px){.hhero h1{font-size:44px}.jhead h2{font-size:34px}}
@media (max-width:767px){
  .hhero{padding:44px 0 28px}.hhero h1{font-size:clamp(30px,8.5vw,38px)}.hhero .what{font-size:16px}
  .hhero .seg{display:flex;width:100%;margin-top:22px}.hhero .seg button{flex:1;min-width:0;padding:0 8px;font-size:13.5px;height:40px}
  .hsec{padding:28px 0 56px}.jhead{margin-bottom:28px}.jhead h2{font-size:28px}.jhead .lead{font-size:15.5px}
  .spine{padding-left:52px}.spine::before{left:19px}.spine .n{left:-52px;top:22px;width:40px;height:40px;font-size:15px;border-width:3px}.spine .n i{font-size:15px}
  .spine .card{padding:18px 18px 16px;grid-template-columns:1fr;gap:6px}.spine .ttl b{font-size:19px}.spine .card p{font-size:14.5px}.spine .meta{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px;height:30px;font-size:12px}
  .spine .pain{grid-template-columns:1fr;gap:8px;padding:12px 14px;justify-items:start}.spine .pain::before{left:-39px}.spine .pain p{font-size:14px}
  .clock{padding-left:0;font-size:14px}
  .jcta{padding:28px 20px 24px;border-radius:24px}.jcta h3{font-size:26px}.jcta .ctas{flex-direction:column}.jcta .ctas .pill{width:100%}
}