.start-options-main { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: grid; place-items: center; padding: 130px 0 70px; }
.start-options-content { position: relative; z-index: 1; width: 100%; max-width: 1160px; text-align: center; }
.start-options-content > .hero-badge { display: inline-flex; }
.start-options-content h1 { max-width: 780px; margin: 1.4rem auto 1rem; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.08; letter-spacing: -.055em; }
.start-options-lede { max-width: 690px; margin: 0 auto; color: var(--text-2); font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.8; }
.start-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: clamp(2.2rem, 5vw, 3.5rem); text-align: left; }
.start-option-card { position: relative; min-width: 0; min-height: 325px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2rem); overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--bg-card) 90%, transparent); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md); transition: transform var(--transition-spring), border-color var(--transition), box-shadow var(--transition); }
.start-option-card::after { content: ''; position: absolute; width: 190px; height: 190px; right: -80px; top: -85px; border-radius: 50%; background: var(--grad-brand); opacity: .08; }
.start-option-card:hover { transform: translateY(-6px); border-color: var(--orange); box-shadow: var(--shadow-lg), 0 14px 50px var(--glow-orange); }
.start-option-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.start-option-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #fff; background: var(--grad-brand); box-shadow: 0 12px 28px var(--glow-orange); }
.start-option-icon svg { width: 32px; height: 32px; }
.organization-icon { background: linear-gradient(135deg, #7c4dff, #3c80f6); box-shadow: 0 12px 28px rgba(92, 91, 246, .24); }
.start-option-copy { position: relative; z-index: 1; display: block; margin-top: 1.45rem; }
.start-option-kicker { display: block; margin-bottom: .65rem; color: var(--orange); font-size: .7rem; font-weight: 800; letter-spacing: .13em; }
.organization .start-option-kicker { color: #6d6af8; }
.start-option-copy strong { display: block; margin-bottom: .7rem; font-size: clamp(1.25rem, 2.5vw, 1.55rem); letter-spacing: -.035em; }
.start-option-copy > span:last-child { display: block; color: var(--text-2); font-size: .9rem; line-height: 1.7; }
.start-option-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.4rem; color: var(--orange); font-size: .88rem; font-weight: 800; }
.organization .start-option-cta { color: #6d6af8; }
.owner-icon { background: linear-gradient(135deg, #10b981, #0e9f9a); box-shadow: 0 12px 28px rgba(16, 163, 127, .26); }
.owner .start-option-kicker, .owner .start-option-cta { color: #0f9d77; }
.owner:hover { border-color: #10b981; box-shadow: var(--shadow-lg), 0 14px 50px rgba(16, 185, 129, .2); }
.owner:focus-visible { outline-color: #10b981; }
.owner::after { background: linear-gradient(135deg, #10b981, #0e9f9a); }
:root[data-theme="dark"] .owner .start-option-kicker, :root[data-theme="dark"] .owner .start-option-cta { color: #34d399; }
.organization:hover { border-color: #6d6af8; box-shadow: var(--shadow-lg), 0 14px 50px rgba(92, 91, 246, .2); }
.start-options-back { display: inline-flex; gap: .5rem; margin-top: 2rem; color: var(--text-2); font-size: .86rem; font-weight: 700; }
.start-options-back:hover { color: var(--orange); }
.start-options-glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .16; }
.glow-one { width: 420px; height: 420px; top: 12%; left: -180px; background: var(--orange); }
.glow-two { width: 450px; height: 450px; right: -180px; bottom: -100px; background: #745cff; }
/* Three across from 1000px. Below that, two across with the third card laid
   out horizontally on its own row, so no tile is ever left orphaned. */
@media (max-width: 999px) {
  .start-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-option-card:nth-child(3) { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.4rem; }
  .start-option-card:nth-child(3) .start-option-copy { margin-top: 0; }
  .start-option-card:nth-child(3) .start-option-cta { margin-top: 0; padding-top: 0; white-space: nowrap; }
}
@media (max-width: 720px) {
  .start-options-main { place-items: start center; padding-top: 110px; }
  .start-options-grid { grid-template-columns: 1fr; }
  .start-option-card, .start-option-card:nth-child(3) { min-height: 0; display: flex; align-items: flex-start; }
  .start-option-card:nth-child(3) .start-option-copy { margin-top: 1.45rem; }
  .start-option-card:nth-child(3) .start-option-cta, .start-option-cta { margin-top: auto; padding-top: 1.4rem; }
}
@media (max-width: 420px) { .start-options-main { padding-bottom: 45px; } .start-option-card { border-radius: 20px; } .start-options-content h1 { font-size: 2.35rem; } }
@media (prefers-reduced-motion: reduce) { .start-option-card { transition: none; } }
.start-option-friends { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: 1rem 1.3rem; text-align: left; color: var(--text); background: color-mix(in srgb, var(--bg-card) 90%, transparent); border: 1px dashed var(--border-2); border-radius: 20px; transition: border-color var(--t), transform var(--t); }
.start-option-friends:hover { border-color: var(--orange); transform: translateY(-3px); }
.start-option-friends:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.start-option-friends > span:nth-child(2) { flex: 1; color: var(--text-2); font-size: .88rem; line-height: 1.6; }
.start-option-friends strong { color: var(--text); }
.start-option-friends .start-option-cta { margin: 0; padding: 0; white-space: nowrap; }
.start-option-friends-emoji { font-size: 1.8rem; }
@media (max-width: 720px) { .start-option-friends { flex-wrap: wrap; align-items: flex-start; } .start-option-friends > span:nth-child(2) { flex: 1 1 calc(100% - 3rem); } .start-option-friends .start-option-cta { padding-left: calc(1.8rem + 1rem); } }