/* ───────────────────────── The way in ─────────────────────────
   /get, /download, /join, /checkout, /account, /invite (WEBSITE-V2, xs21).
   Built on styles.css's tokens only: ivory ground, ink type, one cherry.
   Cherry marks the one action on a page and the step numbers; nothing else. */
.wi{display:block; max-width:1080px; margin:0 auto; padding:132px var(--gutter) 72px}
.wi > section + section{margin-top:clamp(72px,10vw,128px)}

/* Hero: the icon, one line, one action. */
.wi-hero{text-align:center; max-width:760px; margin:0 auto}
.wi-hero .wi-icon{width:112px; height:112px; border-radius:26px; box-shadow:0 26px 50px -24px rgba(60,20,30,.45)}
.wi-hero h1{font-size:clamp(46px,7.4vw,88px); line-height:1.02; letter-spacing:-.045em; font-weight:650; margin:28px 0 18px}
.wi-hero .wi-lede{font-size:clamp(19px,2.1vw,23px); line-height:1.45; letter-spacing:-.015em; color:var(--ink-2); margin:0 auto; max-width:34em}
.wi-actions{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center; margin-top:34px}
.wi-actions .btn-cherry{width:auto; padding:16px 30px}
.wi-link{color:var(--ink); font-weight:500; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; gap:6px}
.wi-link::after{content:"›"; font-size:1.15em; line-height:1; transform:translateY(-1px)}
.wi-link:hover{text-decoration:underline}
.wi-meta{margin:22px 0 0; color:var(--ink-3); font-size:15px; letter-spacing:-.005em}
.wi-meta span + span::before{content:"·"; margin:0 .55em}

/* Section heads. */
.wi-head{max-width:720px; margin:0 auto 40px; text-align:center}
.wi-head h2, .wi-hero h1, .wi-hero .wi-lede, .wi-panel h2{text-wrap:balance}
.wi-head h2{font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-.04em; font-weight:650; margin:0}
.wi-head p{color:var(--ink-2); font-size:19px; line-height:1.5; margin:14px 0 0}

/* Steps: one card each, numbered in cherry, with where it happens. */
.wi-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:wi}
.wi-steps > li{counter-increment:wi; position:relative; background:var(--paper); border:1px solid var(--hair-2); border-radius:24px; padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px}
.wi-steps > li::before{content:counter(wi); position:absolute; top:22px; right:22px; width:28px; height:28px; border-radius:50%; background:var(--cherry); color:var(--ivory); box-shadow:var(--cherry-edge); font-size:14px; font-weight:600; display:grid; place-items:center; font-variant-numeric:tabular-nums}
.wi-steps svg{width:30px; height:30px; color:var(--ink)}
.wi-steps h3{font-size:21px; line-height:1.25; letter-spacing:-.02em; margin:8px 0 0; font-weight:620}
.wi-steps p{margin:0; color:var(--ink-2); line-height:1.55; font-size:16px}
.wi-where{margin-top:auto !important; padding-top:10px; font-size:13px !important; letter-spacing:.01em; color:var(--ink-3) !important}
.wi-steps.wi-three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Quiet panels: requirements, invitations, account actions. */
.wi-panel{background:var(--paper); border:1px solid var(--hair-2); border-radius:28px; padding:clamp(26px,4vw,48px)}
.wi-panel h2{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.035em; line-height:1.1; margin:0 0 12px; font-weight:650}
.wi-panel h3{font-size:19px; letter-spacing:-.015em; margin:0 0 6px; font-weight:620}
.wi-panel p{color:var(--ink-2); line-height:1.6; margin:0}
.wi-panel p + p{margin-top:12px}
.wi-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start}
.wi-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.wi-list li{padding:16px 0; border-top:1px solid var(--hair); display:grid; gap:2px}
.wi-list li:first-child{border-top:0; padding-top:4px}
.wi-list b{font-weight:600; color:var(--ink)}
.wi-list span{color:var(--ink-2)}
.wi-list .wi-sub{color:var(--ink-3); font-size:15px; margin-top:4px}
.wi-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

/* Plain questions, answered. */
.wi-faq{max-width:760px; margin:0 auto; border-top:1px solid var(--hair)}
.wi-faq details{border-bottom:1px solid var(--hair)}
.wi-faq summary{list-style:none; cursor:pointer; padding:22px 36px 22px 0; font-size:19px; font-weight:560; letter-spacing:-.015em; position:relative}
.wi-faq summary::-webkit-details-marker{display:none}
.wi-faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-weight:400; font-size:24px; color:var(--ink-3); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wi-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.wi-faq details p{margin:0 0 22px; color:var(--ink-2); line-height:1.6; max-width:40em}

/* The integrity block and code. */
.wi code{font-family:var(--mono); font-size:.86em; overflow-wrap:anywhere}
.wi-sum{display:block; padding:14px 16px; margin:12px 0; border-radius:14px; background:var(--ground-2); color:var(--ink); line-height:1.5}

/* Status lines written by join.js / checkout.js. */
.wi-status{min-height:1.6em; margin:22px auto 0; max-width:34em; color:var(--ink); font-size:17px; line-height:1.55; text-align:center}
.wi-status:empty{display:none}
.wi-form{display:flex; gap:10px; max-width:600px; margin:30px auto 0; flex-wrap:wrap}
.wi-form label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wi-form input{flex:1 1 220px; min-width:0; min-height:54px; padding:0 18px; border-radius:16px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); font:inherit; font-size:17px}
.wi-form input:focus{outline:2px solid var(--ink); outline-offset:2px}
.wi-form .btn-cherry{width:auto; flex:0 0 auto; padding:0 24px; min-height:54px}
.wi-form .btn-cherry[disabled]{opacity:.55; cursor:default; transform:none}
.wi-fine{color:var(--ink-3); font-size:14px; line-height:1.6; text-align:center; margin:24px auto 0; max-width:40em}
.wi-fine a:not(.btn-cherry), .wi-panel a:not(.btn-cherry), .wi-faq a, .wi-steps a{color:inherit}
.wi [hidden]{display:none !important}   /* .btn-cherry's display:flex must not show a hidden button (join's Open Crew) */
.wi > .wi-panel{max-width:760px; margin-left:auto; margin-right:auto}

@media (max-width: 900px){
  .wi-steps, .wi-steps.wi-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wi-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 620px){
  .wi{padding:112px 16px 48px}
  .wi-steps, .wi-steps.wi-three, .wi-two{grid-template-columns:minmax(0,1fr)}
  .wi-steps > li{padding:22px 22px 24px; border-radius:20px}
  .wi-actions{flex-direction:column; gap:8px}
  .wi-actions .btn-cherry{width:100%}
  .wi-form .btn-cherry{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){ .wi-faq summary::after{transition:none} }
.wi-actions.wi-start{justify-content:flex-start}