.tribal-join-shell { max-width: 900px; }
.tribal-quiz-progress { margin-bottom: 1rem; }
.tribal-quiz-progress p { margin: 0 0 .65rem; color: var(--tribal-muted,#665f57); font-size: .82rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tribal-quiz-progress__track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--tribal-border,#ddd5ca); }
.tribal-quiz-progress__track span { display: block; height: 100%; border-radius: inherit; background: var(--tribal-accent,#f36b35); transition: width .2s ease; }
.tribal-quiz, .tribal-quiz-result, .tribal-join-continuation { padding: clamp(1.25rem,4vw,2.5rem); border: 1px solid var(--tribal-border,#ddd5ca); border-radius: var(--tribal-radius,24px); background: var(--tribal-surface,#fff); box-shadow: var(--tribal-shadow-sm,0 10px 30px rgba(0,0,0,.08)); }
.tribal-quiz-step { margin: 0; padding: 0; border: 0; }
.tribal-quiz-step legend { max-width: 780px; color: var(--tribal-heading,#171513); font-size: clamp(1.55rem,4vw,2.4rem); font-weight: 900; line-height: 1.08; letter-spacing: -.035em; }
.tribal-quiz-step > p { color: var(--tribal-muted,#665f57); }
.tribal-quiz-options { display: grid; gap: .8rem; margin-top: 1.5rem; }
.tribal-quiz-options label { cursor: pointer; }
.tribal-quiz-options input { position: absolute; opacity: 0; pointer-events: none; }
.tribal-quiz-options span { display: flex; align-items: center; min-height: 56px; padding: .85rem 1rem; border: 2px solid var(--tribal-border,#ddd5ca); border-radius: var(--tribal-radius-sm,14px); color: var(--tribal-heading,#171513); font-weight: 780; transition: border-color .15s ease,background-color .15s ease; }
.tribal-quiz-options input:checked + span { border-color: var(--tribal-accent,#f36b35); background: #fff3ec; }
.tribal-quiz-options input:focus-visible + span { outline: 3px solid var(--tribal-focus,#235789); outline-offset: 3px; }
.tribal-quiz-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.tribal-quiz-actions .tribal-button { min-width: 130px; }
.tribal-quiz-error { min-height: 1.5rem; margin-top: .75rem; color: var(--tribal-error,#a72d26); font-weight: 750; }
.tribal-quiz-result h2, .tribal-join-continuation h2 { margin-bottom: .5rem; font-size: clamp(2rem,5vw,3.5rem); }
.tribal-result-reason { max-width: 680px; margin: 1rem 0 0; color: var(--tribal-muted,#665f57); font-size: 1.05rem; }
.tribal-join-price { color: var(--tribal-muted,#665f57); }
.tribal-join-price strong { color: var(--tribal-accent-hover,#cf4f1e); font-size: 1.8rem; }
.tribal-result-benefits { display: grid; gap: .55rem; margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--tribal-radius-sm,14px); background: #f5efe7; list-style: none; }
.tribal-result-benefits li { position: relative; padding-left: 1.35rem; color: var(--tribal-heading,#171513); font-weight: 720; }
.tribal-result-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--tribal-accent,#f36b35); font-weight: 950; }
.tribal-result-choose { min-width: min(100%,280px); }
.tribal-result-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1rem; }
.tribal-result-links a { color: var(--tribal-heading,#171513); font-weight: 780; }
.tribal-result-product { padding: clamp(1.15rem,3vw,1.75rem); border: 1px solid var(--tribal-border,#ddd5ca); border-radius: var(--tribal-radius-sm,14px); background: #fff; }
.tribal-result-product--primary { border: 2px solid var(--tribal-accent,#f36b35); background: #fff8f3; }
.tribal-result-product h3 { margin-bottom: .45rem; font-size: clamp(1.45rem,4vw,2.35rem); }
.tribal-result-product p { max-width: 650px; margin: .55rem 0 1rem; color: var(--tribal-muted,#665f57); }
.tribal-result-product__price { color: var(--tribal-accent-hover,#cf4f1e) !important; font-size: 1.25rem; font-weight: 900; }
.tribal-result-group { margin-top: 2rem; }
.tribal-result-group[hidden] { display: none; }
.tribal-result-group [data-alternative-results], .tribal-result-group [data-addon-results] { display: grid; gap: .85rem; }
.tribal-result-group .tribal-result-product h3 { font-size: 1.2rem; }
.tribal-result-group .tribal-result-product .tribal-button { width: 100%; }
.tribal-join-continuation[hidden] { display: none; }
.tribal-continuation-confirm { margin: 1.25rem 0; color: var(--tribal-heading,#171513); font-size: 1.08rem; font-weight: 760; }
.tribal-continuation-next { margin-top: 1.5rem; padding: clamp(1.15rem,3vw,1.75rem); border-radius: var(--tribal-radius-sm,14px); background: var(--tribal-heading,#171513); color: rgba(255,255,255,.75); }
.tribal-continuation-next h3 { margin-bottom: 1.25rem; color: #fff; font-size: clamp(1.35rem,3vw,2rem); }
.tribal-continuation-next .tribal-eyebrow { color: #ff9a6e; }
.tribal-continuation-copy { max-width: 700px; margin: -.45rem 0 1.25rem; color: rgba(255,255,255,.78); }
.tribal-continuation-actions { display: grid; gap: .75rem; }
.tribal-continuation-actions .tribal-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; text-align: center; }
.tribal-continuation-actions .tribal-button--secondary { border-color: var(--tribal-accent,#f36b35); background: transparent; color: #fff; }
.tribal-continuation-actions .tribal-button--secondary:hover { background: rgba(243,107,53,.14); }
.tribal-selected-products h2 { margin-bottom: .5rem; }
.tribal-selected-products h3 { margin-top: 1.25rem; }
.tribal-product-selector { display: grid; gap: 1rem; }
.tribal-product-selector article { padding: 1.35rem; border: 1px solid var(--tribal-border,#ddd5ca); border-radius: var(--tribal-radius,24px); background: var(--tribal-surface,#fff); }
.tribal-product-selector article > p:last-of-type { color: var(--tribal-muted,#665f57); }
.tribal-join-restart { display: block; margin-top: 1.25rem; padding: .3rem 0; border: 0; background: transparent; color: var(--tribal-heading,#171513); font-weight: 750; text-decoration: underline; cursor: pointer; }
.tribal-join-plans { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; }
.tribal-join-plan { display: block; cursor: pointer; }
.tribal-join-plan > input { position: absolute; opacity: 0; pointer-events: none; }
.tribal-join-plan__body { display: grid; gap: .7rem; min-height: 100%; padding: 1.35rem; border: 2px solid var(--tribal-border,#ddd5ca); border-radius: var(--tribal-radius,24px); background: var(--tribal-surface,#fff); box-shadow: var(--tribal-shadow-sm,0 10px 30px rgba(0,0,0,.06)); transition: border-color .15s ease,transform .15s ease; }
.tribal-join-plan__body > strong { color: var(--tribal-heading,#171513); font-size: 1.2rem; }
.tribal-join-plan__price { color: var(--tribal-accent-hover,#cf4f1e); font-size: 1.75rem; font-weight: 900; }
.tribal-join-plan__price small { display: block; color: var(--tribal-muted,#665f57); font-size: .78rem; font-weight: 700; }
.tribal-join-plan input:checked + .tribal-join-plan__body { border-color: var(--tribal-accent,#f36b35); background: #fff7f1; transform: translateY(-2px); }
.tribal-join-plan input:focus-visible + .tribal-join-plan__body { outline: 3px solid var(--tribal-focus,#235789); outline-offset: 3px; }
.tribal-join-summary { display: grid; gap: 1.5rem; align-items: start; }
.tribal-join-summary[hidden] { display: none; }
.tribal-join-summary .tribal-answer-card { position: sticky; top: 1rem; }
@media (min-width:640px) { .tribal-quiz-options { grid-template-columns: repeat(2,minmax(0,1fr)); } .tribal-join-plans { grid-template-columns: repeat(2,minmax(0,1fr)); } .tribal-result-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); } .tribal-result-group [data-alternative-results], .tribal-result-group [data-addon-results], .tribal-product-selector { grid-template-columns: repeat(2,minmax(0,1fr)); } .tribal-continuation-actions { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width:900px) { .tribal-join-plans { grid-template-columns: repeat(4,minmax(0,1fr)); } .tribal-join-summary { grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 3rem; } }
@media (max-width:479px) { .tribal-quiz-actions { flex-direction: column-reverse; } .tribal-quiz-actions .tribal-button, .tribal-result-choose, .tribal-continuation-next .tribal-button { width: 100%; } .tribal-join-summary .tribal-answer-card { position: static; } .tribal-result-benefits { padding: 1rem; } }
@media (prefers-reduced-motion:reduce) { .tribal-quiz-progress__track span, .tribal-join-plan__body { transition: none; } }