/* Extracted from signup.html (L18 pass-5) */
.signup-layout { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; padding: 56px 0 80px; }
    .signup-main { }
    .signup-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
    .aside-card { background: var(--c-bg-green); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; margin-bottom: 20px; }
    .aside-card h4 { margin-bottom: 14px; font-size: .95rem; }
    .aside-feature { display: flex; gap: 10px; margin-bottom: 12px; font-size: .88rem; color: var(--c-muted); }
    .aside-feature__icon { flex-shrink: 0; color: var(--c-green-vivid); }
    .step-panel { display: none; }
    .step-panel.active { display: block; }
    .plan-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }
    .plan-opt { border: 2px solid var(--c-border); border-radius: var(--r-lg); padding: 18px 14px; cursor: pointer; transition: all var(--transition); position: relative; }
    .plan-opt:hover { border-color: var(--c-green-mid); }
    .plan-opt.selected { border-color: var(--c-green-vivid); background: var(--c-green-light); }
    .plan-opt__name { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-bottom: 4px; }
    .plan-opt__price { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--c-navy); }
    .plan-opt__sub { font-size: .72rem; color: var(--c-muted); line-height: 1.4; }
    .plan-opt__cos { font-size: .72rem; color: var(--c-green); font-weight: 600; margin-top: 4px; line-height: 1.4; }
    .plan-opt__annual { font-size: .68rem; color: var(--c-muted); margin-top: 2px; line-height: 1.4; }
    .plan-opt input { position: absolute; opacity: 0; }
    .plan-opt__pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--c-green-vivid); color: #fff; font-size: .62rem; font-weight: 700; padding: 2px 10px; border-radius: 100px; white-space: nowrap; }
    .billing-toggle { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: .88rem; color: var(--c-muted); }
    .toggle-switch { position: relative; width: 44px; height: 24px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; inset: 0; background: var(--c-border-mid); border-radius: 100px; cursor: pointer; transition: background var(--transition); }
    .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); }
    .toggle-switch input:checked + .toggle-slider { background: var(--c-green-vivid); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
    .annual-badge { background: var(--c-green-light); color: var(--c-green); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
    .tab-nav { display: flex; border-bottom: 2px solid var(--c-border); margin-bottom: 32px; }
    .tab-btn { background: none; border: none; cursor: pointer; padding: 10px 20px; font-size: .9rem; font-weight: 600; color: var(--c-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); }
    .tab-btn.active { color: var(--c-green-vivid); border-bottom-color: var(--c-green-vivid); }
    @media (max-width: 980px) {
      .signup-layout { grid-template-columns: 1fr; }
      .signup-aside { display: none; }
      .plan-select { grid-template-columns: 1fr; }
    }