/* thrivin-commerce -- the StrengthsMultiplier purchase pages (C, D, 01, G, H,
 * the upgrade) and the pricing block.
 *
 * Built only from the theme's tokens (style.css :root) and its scales: radii
 * 0/2/4/8/12/999, the 4pt spacing set, the declared font sizes. Fields follow
 * the theme's .gate conventions so these forms read as the site's own.
 */

.sm-page{padding-block:48px 104px; color:var(--ink)}
.sm-page .screen-reader-text,.sm-hp{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* ---- layout ---- */
.sm-page__grid{display:grid; grid-template-columns:minmax(0,680px) minmax(0,480px); gap:48px 120px; align-items:start; justify-content:space-between}
.sm-page__grid--done{grid-template-columns:minmax(0,600px) minmax(0,520px); padding-top:24px}
@media (max-width:1180px){
  .sm-page__grid,.sm-page__grid--done{grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:48px 56px}
}
@media (max-width:960px){
  .sm-page__grid,.sm-page__grid--done{grid-template-columns:minmax(0,1fr)}
  .sm-summary{max-width:680px}
}

/* ---- steps ---- */
.sm-steps{display:flex; align-items:center; gap:12px; list-style:none; margin:0 0 40px; padding:0; font-size:14px; line-height:20px; font-weight:500; color:var(--muted)}
.sm-steps__step{display:flex; align-items:center; gap:8px}
.sm-steps__step + .sm-steps__step::before{content:""; width:32px; height:1px; background:var(--edge); margin-right:4px}
.sm-steps__n{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; border:1px solid var(--edge); background:var(--surface); font-size:12px; font-weight:600}
.sm-steps__step.is-current{color:var(--ink); font-weight:600}
.sm-steps__step.is-current .sm-steps__n{background:var(--ink); border-color:var(--ink); color:var(--surface)}

/* ---- form ---- */
.sm-form{max-width:680px}
.sm-back{display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:20px; font-weight:600; color:var(--muted); text-decoration:none}
.sm-back::before{content:"←"}
.sm-back:hover{color:var(--ink)}
.sm-form__title{margin:16px 0 8px; font-size:44px; line-height:52px; font-weight:400; letter-spacing:-.5px}
.sm-form__lede{margin:0 0 40px; font-size:18px; line-height:28px; color:rgba(25,26,28,.75)}
@media (max-width:860px){ .sm-form__title{font-size:36px; line-height:44px} }

.sm-group{border:0; margin:0 0 36px; padding:0; min-width:0}
.sm-group__title{padding:0; margin:0 0 20px; font-size:20px; line-height:28px; font-weight:600}
.sm-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin-bottom:4px}
.sm-row__n{grid-column:1/-1; margin:8px 0 8px; font-size:13px; line-height:20px; font-weight:600; color:var(--muted)}
@media (max-width:640px){ .sm-row{grid-template-columns:minmax(0,1fr)} }

.sm-field{margin:0 0 20px; min-width:0}
.sm-field label,.sm-invite__form label{display:block; margin:0 0 8px; font-size:14px; line-height:20px; font-weight:600}
.sm-optional{font-weight:400; font-size:13px; color:var(--muted)}
.sm-field input,.sm-field textarea,.sm-invite__form textarea{
  display:block; width:100%; min-height:52px; padding:12px 16px; box-sizing:border-box;
  font:400 16px/24px 'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif; color:var(--ink);
  background:var(--surface); border:1px solid var(--edge); border-radius:8px; outline:none;
  transition:border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft)}
.sm-field textarea,.sm-invite__form textarea{min-height:120px; resize:vertical}
.sm-field input:focus,.sm-field textarea:focus,.sm-invite__form textarea:focus,.sm-stepper__value:focus{border-color:var(--signal); box-shadow:0 0 0 3px rgba(27,127,168,.18)}
.sm-field [aria-invalid="true"]{border-color:var(--limited)}
.sm-field__err{display:none; margin:8px 0 0; font-size:13px; line-height:20px; color:var(--limited)}
.sm-field__err.is-on{display:block}
.sm-help{margin:8px 0 0; font-size:13px; line-height:20px; color:var(--muted)}
.sm-help a,.sm-summary__fine a,.sm-mail a{color:var(--ink); font-weight:600}
.sm-count{margin:8px 0 0; text-align:right; font-size:12px; line-height:16px; color:var(--muted)}
.sm-count.is-over{color:var(--limited)}

/* team seats */
.sm-seats{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:0 0 24px}
.sm-seats__price{margin:0; font-size:15px; line-height:22px; font-weight:500}
.sm-seats .sm-help{margin-top:2px}
.sm-stepper{display:inline-flex; align-items:stretch; background:var(--surface); border:1px solid var(--edge); border-radius:8px; overflow:hidden}
.sm-stepper__btn{width:52px; height:52px; border:0; background:none; font-size:20px; color:var(--ink); cursor:pointer}
.sm-stepper__btn:hover:not(:disabled){background:var(--recessed)}
.sm-stepper__btn:disabled{color:var(--edge); cursor:default}
.sm-stepper__value{width:64px; height:52px; border:0; border-inline:1px solid var(--line); text-align:center; font:600 18px/24px 'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:none; outline:none; -moz-appearance:textfield}
.sm-stepper__value::-webkit-inner-spin-button,.sm-stepper__value::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.sm-check{display:flex; align-items:flex-start; gap:12px; cursor:pointer}
.sm-check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--ink); flex:none}
.sm-check strong{display:block; font-size:15px; line-height:22px; font-weight:600}
.sm-check .sm-help{display:block; margin-top:2px}
.sm-panel{background:var(--recessed); border-radius:8px; padding:16px 20px; margin:0 0 36px}
.sm-panel p{margin:0; font-size:14px; line-height:22px; color:rgba(25,26,28,.75)}
.sm-panel .sm-panel__title{margin-bottom:4px; font-size:15px; font-weight:600; color:var(--ink)}

.sm-rule{border:0; border-top:1px solid var(--line); margin:40px 0 32px}
.sm-submit{min-height:52px; padding-inline:32px; font-size:16px; line-height:24px}
.sm-submit[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.sm-note{margin:16px 0 0; font-size:13px; line-height:20px; color:var(--muted)}

/* alerts */
.sm-alert{margin:0 0 24px; padding:14px 16px; border-radius:8px; border:1px solid var(--edge); background:var(--surface); font-size:14px; line-height:22px}
.sm-alert strong{font-weight:600}
.sm-alert--error{border-color:var(--limited); color:var(--limited)}
.sm-alert--info{border-left:3px solid var(--signal)}

/* ---- summary card ---- */
.sm-summary{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px 32px;
  box-shadow:0 14px 36px -10px rgba(13,10,8,.10), 0 2px 1px rgba(13,10,8,.05)}
@media (min-width:961px){ .sm-summary{position:sticky; top:96px} }
.sm-eyebrow{margin:0 0 16px; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted)}
.sm-summary__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px}
.sm-summary__head .sm-eyebrow{margin:0}
.sm-summary__product{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:16px; align-items:center; margin:0 0 12px}
.sm-summary__icon{width:44px; height:44px; border-radius:4px; background:var(--signal)}
.sm-summary__name{margin:0; font-size:16px; line-height:24px; font-weight:600}
.sm-summary__meta{margin:0; font-size:14px; line-height:20px; color:var(--muted)}
.sm-summary__price{margin:0; font-size:16px; line-height:24px; font-weight:600}
.sm-summary__change{font-size:14px; line-height:20px; font-weight:600; color:var(--ink); text-decoration:none}
.sm-summary__change:hover{text-decoration:underline}
.sm-summary__box{background:var(--paper); border-radius:8px; padding:16px; margin:16px 0}
.sm-summary__rows{margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.sm-summary__rows div{display:flex; justify-content:space-between; gap:16px; margin:0 0 8px; font-size:14px; line-height:20px}
.sm-summary__rows dt{color:var(--muted)}
.sm-summary__rows dd{margin:0; font-weight:500; text-align:right}
.sm-summary__total{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:16px 0 8px; padding-top:16px; border-top:1px solid var(--line); font-size:16px; line-height:24px; font-weight:600}
.sm-summary__total strong{font-size:24px; line-height:32px; letter-spacing:-.4px}
.sm-summary__fine{margin:8px 0 0; font-size:12px; line-height:18px; color:var(--muted)}
.sm-ticks{list-style:none; margin:0; padding:0}
.sm-ticks li{position:relative; padding-left:24px; margin:0 0 8px; font-size:14px; line-height:20px; color:rgba(25,26,28,.8)}
.sm-ticks li::before{content:"✓"; position:absolute; left:0; color:var(--clear); font-weight:600}
.sm-ticks li:last-child{margin-bottom:0}

/* ---- pills ---- */
.sm-pill{display:inline-flex; align-items:center; gap:8px; margin:0; border-radius:999px; font-size:13px; line-height:20px; font-weight:600}
.sm-pill--ok{padding:4px 12px; color:var(--clear); background:rgba(39,138,71,.08); border:1px solid rgba(39,138,71,.24)}
.sm-pill--ok::before{content:"✓"}
.sm-pill--paid{padding:2px 8px; font-size:10px; line-height:14px; letter-spacing:1.2px; text-transform:uppercase; color:var(--clear); background:rgba(39,138,71,.1)}
.sm-pill--paid::before{content:"●"; font-size:8px}

/* ---- after payment ---- */
.sm-done__title{margin:24px 0 20px; font-size:60px; line-height:64px; font-weight:400; letter-spacing:-1.5px}
.sm-done__title span,.sm-done__title em{display:block}
.sm-done__title em{font-style:normal; font-weight:600; color:var(--accent)}
@media (max-width:860px){ .sm-done__title{font-size:44px; line-height:48px; letter-spacing:-1px} }
.sm-done__lede{margin:0 0 24px; font-size:18px; line-height:28px; color:rgba(25,26,28,.75)}
.sm-done__meta{margin:12px 0 0; font-size:13px; line-height:20px; color:var(--muted)}
.sm-mail{display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px}
.sm-mail__icon{width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--surface)}
.sm-mail__icon::before{content:"✉"; display:grid; place-items:center; height:100%; color:var(--muted)}
.sm-mail p{margin:0 0 4px; font-size:14px; line-height:22px}
.sm-mail .sm-mail__title{font-size:15px; font-weight:600}
.sm-people{list-style:none; margin:0 0 24px; padding:0}
.sm-people li{display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:22px}
.sm-people li span{color:var(--muted); overflow-wrap:anywhere}
.sm-quote{margin:0 0 24px; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:8px}
.sm-quote .sm-eyebrow{margin-bottom:8px}
.sm-quote blockquote{margin:0; font-size:15px; line-height:24px; overflow-wrap:anywhere}

/* invite box */
.sm-invite{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; margin:0 0 20px;
  box-shadow:0 14px 36px -10px rgba(13,10,8,.10), 0 2px 1px rgba(13,10,8,.05)}
.sm-invite__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.sm-invite__title{margin:0; font-size:18px; line-height:26px; font-weight:600}
.sm-invite__count{margin:0; font-size:14px; line-height:20px; font-weight:500; color:var(--muted)}
.sm-seatbar{display:flex; gap:4px; list-style:none; margin:16px 0; padding:0}
.sm-seatbar li{flex:1; height:4px; border-radius:2px; background:var(--line)}
.sm-seatbar li.is-on{background:var(--signal)}
.sm-invite__you{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; border-radius:8px; background:var(--paper); font-size:14px; line-height:20px}
.sm-invite__you span{overflow-wrap:anywhere}
.sm-invite__you strong,.sm-invite__people strong,.sm-invite__results .is-queued strong{font-size:13px; font-weight:600; color:var(--clear)}
.sm-invite__people,.sm-invite__results{list-style:none; margin:0 0 16px; padding:0}
.sm-invite__people:empty{display:none}
.sm-invite__people li,.sm-invite__results li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; line-height:20px; border-bottom:1px solid var(--line)}
.sm-invite__people li span,.sm-invite__results li span{overflow-wrap:anywhere}
.sm-invite__results li strong{font-size:13px; font-weight:600; color:var(--limited)}
.sm-invite__results .is-already_member strong{color:var(--muted)}
.sm-invite__actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:16px}
.sm-textlink{font-size:15px; line-height:22px; font-weight:600; color:var(--ink)}

/* ---- the upgrade ---- */
.sm-upgrade{margin-inline:auto}
.sm-upgrade .sm-summary__box{background:var(--surface); border:1px solid var(--line); padding:20px 24px}
.sm-upgrade__price{display:flex; align-items:baseline; gap:12px; margin:0 0 8px}
.sm-upgrade__price strong{font-size:36px; line-height:44px; font-weight:600}
.sm-upgrade__price span{font-size:15px; line-height:22px; color:var(--muted)}

/* ---- single notices ---- */
.sm-notice{max-width:600px; margin:48px auto; text-align:center}
.sm-notice__title{margin:24px 0 12px; font-size:44px; line-height:52px; font-weight:300}
.sm-notice__body{margin:0 auto 32px; max-width:520px; font-size:18px; line-height:28px; color:var(--muted)}
.sm-notice__spinner{display:inline-block; width:72px; height:72px; border-radius:999px; border:3px solid var(--line); border-top-color:var(--accent); animation:sm-spin 1s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .sm-notice__spinner{animation:none} }
@media (max-width:860px){ .sm-notice__title{font-size:36px; line-height:44px} }

/* ---- the pricing block (B0-B3) ---- */
.sm-pricing .sm-alert{margin:0 0 24px}
.sm-switch{border:0; margin:0 0 32px; padding:0; min-width:0}
.sm-switch__legend{padding:0; margin:0 0 12px; font-size:14px; line-height:20px; font-weight:600}
.sm-switch__opts{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--recessed); border:1px solid var(--line); border-radius:999px}
.sm-switch__opt{position:relative; cursor:pointer}
.sm-switch__opt input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.sm-switch__opt span{display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; font-size:14px; line-height:20px; font-weight:600; color:var(--muted); transition:background .2s var(--ease-soft), color .2s var(--ease-soft)}
.sm-switch__opt input:checked + span{background:var(--surface); color:var(--ink); box-shadow:0 2px 6px -2px rgba(13,10,8,.18)}
.sm-switch__opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.sm-switch__qty{display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; margin-top:20px}
.sm-switch__qlabel{font-size:14px; line-height:20px; font-weight:600}
.sm-switch__qty .sm-help{margin:0; flex-basis:100%}
.sm-stepper__btn:focus-visible,.sm-stepper__value:focus-visible,.sm-pricing .btn:focus-visible,.sm-sample:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sm-pricing .tier__cta form{display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:0}
.sm-pricing .btn[disabled]{opacity:.6; cursor:progress; transform:none}
.sm-sample{font-size:14px; line-height:20px; font-weight:600; color:inherit}
@media (max-width:480px){
  .sm-switch__opts{display:flex; border-radius:12px}
  .sm-switch__opt{flex:1 1 auto}
  .sm-switch__opt span{justify-content:center; width:100%; padding:0 12px; border-radius:8px; box-sizing:border-box}
}