/* ClinicalSlim "Choose a program" page (auth.register-select-form). Builds on cs-auth.css (tokens, buttons). */
.cs-pick{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--cream);}
.cs-pick__wrap{width:min(1180px, 100% - 32px); margin:0 auto;}

/* top bar */
.cs-top{padding:22px 0 0;}
.cs-top .cs-pick__wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-right:min(300px, 30vw);}
.cs-top .cs-logo{width:210px; margin:0;}
.cs-top__login{font-size:14px; font-weight:600; color:var(--green); text-decoration:none; white-space:nowrap; border-bottom:1px solid var(--gold); padding-bottom:2px;}
.cs-top__login:hover{border-bottom-color:var(--green);}
@media (max-width:719px){ .cs-top .cs-pick__wrap{padding-right:0; padding-top:44px;} .cs-top .cs-logo{width:180px;} }

/* hero */
.cs-hero{padding:44px 0 36px;}
.cs-hero .cs-pick__wrap{display:grid; gap:28px; grid-template-columns:1fr; align-items:stretch;}
@media (min-width:960px){ .cs-hero .cs-pick__wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:40px;} }
.cs-hero__kicker{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2);}
.cs-hero__kicker::before{content:""; width:28px; height:2px; background:var(--gold); border-radius:2px;}
.cs-hero__title{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(38px,5vw,62px); line-height:1.05; letter-spacing:-.015em; color:var(--green);}
.cs-hero__title em{font-style:italic; color:var(--gold-2);}
.cs-hero__sub{margin:18px 0 0; max-width:46ch; font-size:17px; line-height:1.65; color:var(--muted);}
.cs-steps{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:560px; counter-reset:cs;}
.cs-steps li{position:relative; padding:14px 14px 14px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink);}
.cs-steps li span{display:block; margin:0 0 8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--cream-2); color:var(--green); font-family:var(--serif); font-size:14px;}
.cs-steps li.is-current{border-color:var(--green); box-shadow:0 10px 24px -20px rgba(35,59,49,.6);}
.cs-steps li.is-current span{background:var(--green); color:#FBF8F2;}
@media (max-width:520px){ .cs-steps{grid-template-columns:1fr;} .cs-steps li{display:flex; align-items:center; gap:12px;} .cs-steps li span{margin:0;} }

.cs-promise{position:relative; overflow:hidden; border-radius:28px; padding:34px 30px; color:#EFE9DC;
  background:radial-gradient(130% 120% at 100% 0%, #3A6153 0%, var(--green) 45%, #203A30 100%); box-shadow:0 30px 60px -40px rgba(35,59,49,.8);}
.cs-promise::before{content:""; position:absolute; right:-18%; bottom:-22%; width:78%; aspect-ratio:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(233,225,207,.5), rgba(184,168,138,.25)); -webkit-mask:var(--cs-mark) center/contain no-repeat; mask:var(--cs-mark) center/contain no-repeat; opacity:.55;}
.cs-promise::after{content:""; position:absolute; left:30px; right:30px; top:0; height:3px; background:linear-gradient(90deg, var(--gold), transparent); border-radius:0 0 3px 3px;}
.cs-promise > *{position:relative;}
.cs-promise__eyebrow{margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);}
.cs-promise__title{margin:0 0 22px; font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.4vw,30px); line-height:1.2; color:#FBF8F2; max-width:16ch;}
.cs-promise ul{list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:34ch;}
.cs-promise li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:rgba(239,233,220,.9);}
.cs-promise li svg{flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(184,168,138,.22); color:var(--gold);}

/* programs */
.cs-programs{padding:12px 0 8px;}
.cs-programs__head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px;}
.cs-programs__head h2{margin:0; font-family:var(--serif); font-weight:600; font-size:26px; color:var(--green);}
.cs-programs__head p{margin:0; font-size:14px; color:var(--muted);}
.cs-cards{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:640px){ .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .cs-cards{grid-template-columns:repeat(3,minmax(0,1fr));} }

.cs-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:220px; padding:24px 24px 22px; text-align:left;
  font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:20px; cursor:pointer; overflow:hidden;
  box-shadow:0 1px 2px rgba(45,74,62,.04); transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s;}
.cs-card::before{content:""; position:absolute; left:24px; right:24px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);}
.cs-card:hover{transform:translateY(-4px); border-color:#D9CFBC; box-shadow:0 24px 40px -30px rgba(35,59,49,.45);}
.cs-card:hover::before{transform:scaleX(1);}
.cs-card:focus-visible{outline:2px solid var(--green); outline-offset:3px;}
.cs-card__top{display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 18px;}
.cs-card__ico{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg, #F3EDE0, #E8DFCB); color:var(--green);}
.cs-card__ico svg{width:24px; height:24px;}
.cs-card__tag{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); background:#F6F1E6; border:1px solid #ECE3D1; padding:5px 10px; border-radius:999px;}
.cs-card__name{margin:0 0 8px; font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.2; color:var(--green);}
.cs-card__desc{margin:0 0 20px; font-size:14.5px; line-height:1.6; color:var(--muted);}
.cs-card__go{margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--green);}
.cs-card__go i{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); transition:background .2s, border-color .2s, color .2s, transform .2s;}
.cs-card__go svg{width:15px; height:15px;}
.cs-card:hover .cs-card__go i{background:var(--green); border-color:var(--green); color:#FBF8F2; transform:translateX(3px);}

/* the bundle: wide green card */
.cs-card--feature{grid-column:1/-1; min-height:0; padding:30px clamp(22px,3.4vw,40px); display:grid; grid-template-columns:1fr; gap:18px; align-items:center;
  color:#EFE9DC; border:0; background:radial-gradient(120% 140% at 0% 0%, #3A6153 0%, var(--green) 40%, #203A30 100%);}
@media (min-width:760px){ .cs-card--feature{grid-template-columns:auto minmax(0,1fr) auto;} }
.cs-card--feature::before{left:0; right:auto; top:0; bottom:0; width:4px; height:auto; border-radius:0; transform:none; background:linear-gradient(180deg, var(--gold), transparent);}
.cs-card--feature:hover{box-shadow:0 30px 50px -34px rgba(35,59,49,.9);}
.cs-card--feature .cs-card__ico{width:62px; height:62px; border-radius:18px; background:rgba(184,168,138,.18); color:var(--gold);}
.cs-card--feature .cs-card__ico svg{width:30px; height:30px;}
.cs-card--feature .cs-card__tag{background:rgba(184,168,138,.16); border-color:rgba(184,168,138,.35); color:var(--gold); display:inline-block; margin:0 0 10px;}
.cs-card--feature .cs-card__name{color:#FBF8F2; font-size:clamp(24px,2.6vw,30px);}
.cs-card--feature .cs-card__desc{color:rgba(239,233,220,.82); margin:0;}
.cs-card--feature .cs-card__go{margin:0; padding:14px 22px; border-radius:10px; background:var(--gold); color:#1E2B25; white-space:nowrap;}
.cs-card--feature .cs-card__go i{border:0; width:auto; height:auto;}
.cs-card--feature:hover .cs-card__go{background:#CDBE9F;}
.cs-card--feature:hover .cs-card__go i{background:none; color:inherit;}

.cs-pick__note{margin:22px 0 0; text-align:center; font-size:14px; color:var(--muted);}
.cs-pick__note a{color:var(--green); font-weight:700; text-decoration:none; border-bottom:1px solid var(--gold);}

/* help */
.cs-help{margin:48px 0 0; padding:0 0 48px;}
.cs-help__box{display:grid; gap:22px; grid-template-columns:1fr; align-items:center; padding:30px clamp(22px,3.6vw,44px); border-radius:24px;
  background:linear-gradient(120deg, #F1EBDF, #EAE2D3); border:1px solid #E1D8C6;}
@media (min-width:860px){ .cs-help__box{grid-template-columns:minmax(0,1fr) auto;} }
.cs-help__box h2{margin:0 0 6px; font-family:var(--serif); font-weight:600; font-size:28px; color:var(--green);}
.cs-help__box p{margin:0; font-size:15px; line-height:1.6; color:var(--muted); max-width:52ch;}
.cs-help__actions{display:flex; flex-wrap:wrap; gap:12px;}
.cs-help__actions .cs-btn{width:auto; padding:0 24px; margin:0;}
.cs-pick .cs-foot{margin:0; padding:20px 16px 26px; border-top:1px solid var(--line);}
@media (prefers-reduced-motion:reduce){ .cs-card, .cs-card::before{transition:none;} }

/* Demo brand: a single program (Weight Loss) sits centred, a little wider. */
.cs-cards:has(> .cs-card:only-child){grid-template-columns:minmax(0,520px);justify-content:center;}