.on-hero{padding:32px 24px 60px;text-align:center;background:#fff;overflow:hidden}.on-hero-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:40px}.on-hero-text{flex:1;text-align:center}.on-hero-image{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.on-hero-img{width:100%;max-width:500px;border-radius:16px;object-fit:cover}.on-hero-tag{display:inline-block;padding:6px 18px;border-radius:30px;background:linear-gradient(135deg,#df27551a,#ff6a001a);color:#df2755;font-family:DM Sans,Arial,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.02em;margin-bottom:20px}.on-hero-title{font-family:Clash Display,sans-serif;font-weight:700;font-size:2.4rem;color:#1e3538;letter-spacing:-.02em;line-height:1.15;margin:0 0 20px}.on-hero-separator{font-family:Clash Display,sans-serif;font-size:1.5rem;color:#1e3538;margin:0 0 20px;line-height:1}.on-hero-subtitle{font-family:DM Sans,Arial,sans-serif;font-size:1.1rem;color:#555;line-height:1.7;margin:0 0 32px}.on-hero-buttons{display:flex;gap:14px;justify-content:flex-start;align-items:center;flex-wrap:wrap;margin-bottom:48px}.on-section .on-hero-buttons{justify-content:center;margin-bottom:0}.on-hero-pillars{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding-top:40px;border-top:1px solid #eee}.on-hero-pillar{display:flex;flex-direction:column;align-items:center;gap:4px}.on-hero-pillar-value{font-family:Clash Display,sans-serif;font-weight:600;font-size:1.6rem;color:#1e3538}.on-hero-pillar-label{font-family:DM Sans,Arial,sans-serif;font-size:.85rem;color:#888}.on-btn-primary{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#df2755,#ff6a00);color:#fff;border:none;border-radius:30px;font-family:DM Sans,Arial,sans-serif;font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;min-width:190px;text-align:center}.on-btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #df275540;color:#fff}.on-btn-outline{display:inline-block;padding:14px 32px;background:transparent;color:#1e3538;border:2px solid #1e3538;border-radius:30px;font-family:DM Sans,Arial,sans-serif;font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease;min-width:190px;text-align:center}.on-btn-outline:hover{background:#1e3538;color:#fff}.on-section{padding:60px 24px;background:#fff}.on-section-alt{background:#f9f9f9}.on-section-inner{max-width:1100px;margin:0 auto}.on-section-subtext{font-family:DM Sans,Arial,sans-serif;font-size:.95rem;color:#888;text-align:center;margin:-32px 0 48px;line-height:1.6;font-style:italic}.on-problem-inner{max-width:1200px}.on-problem-header{text-align:center;margin-bottom:48px}.on-problem-badge{display:inline-block;padding:8px 18px;margin:0 0 20px;border-radius:999px;background:#df27551f;color:#c91f4a;font-family:DM Sans,Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.on-problem-title{font-family:Clash Display,sans-serif;font-weight:700;font-size:2.4rem;color:#1e3538;letter-spacing:-.02em;line-height:1.1;margin:0 auto 12px;max-width:920px}.on-problem-sub{font-family:DM Sans,Arial,sans-serif;font-size:1.05rem;font-weight:500;color:#777;line-height:1.5;margin:0 auto}.on-problem-grid{display:grid;grid-template-columns:1fr;gap:24px}.on-problem-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.on-problem-card:hover{border-color:#ddd;box-shadow:0 8px 28px #0000000f}.on-problem-card-media{display:flex;align-items:center;justify-content:center;min-height:140px;padding:28px 22px 12px;background:linear-gradient(180deg,#df27550f,#ff6a000a)}.on-problem-icon-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#df2755,#ff6a00);display:flex;align-items:center;justify-content:center;flex-shrink:0}.on-problem-icon{width:30px;height:30px;color:#fff}.on-problem-card-body{padding:22px 22px 26px;text-align:left}.on-problem-card-title{font-family:Clash Display,sans-serif;font-weight:600;font-size:1.1rem;color:#111;line-height:1.3;margin:0 0 10px}.on-problem-card-text{font-family:DM Sans,Arial,sans-serif;font-size:.92rem;color:#777;line-height:1.65;margin:0}@media(min-width:900px){.on-problem-grid{grid-template-columns:repeat(3,1fr);gap:28px}}:root[data-theme=dark] .on-hero,:root[data-theme=dark] .on-section{background:var(--color-page)}:root[data-theme=dark] .on-section-alt{background:var(--color-surface)}:root[data-theme=dark] :where(.on-hero-title,.on-hero-separator,.on-hero-pillar-value,.on-problem-title,.on-problem-card-title,.on-how-headline,.on-how-showcase-title){color:var(--color-text-primary)}:root[data-theme=dark] :where(.on-hero-subtitle,.on-hero-pillar-label,.on-section-subtext,.on-problem-sub,.on-problem-card-text,.on-how-body,.on-how-showcase-desc,.on-how-showcase-list li){color:var(--color-text-secondary)}:root[data-theme=dark] :where(.on-hero-tag,.on-problem-badge,.on-how-tag){background:var(--color-accent-soft);color:var(--color-accent-pink)}:root[data-theme=dark] .on-problem-card{background:var(--color-surface-raised);border-color:var(--color-border)}:root[data-theme=dark] .on-problem-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}:root[data-theme=dark] .on-problem-card-media{background:var(--color-accent-soft)}:root[data-theme=dark] .on-btn-outline{color:var(--color-text-primary);border-color:var(--color-text-primary)}:root[data-theme=dark] .on-btn-outline:hover{background:var(--color-text-primary);color:var(--color-page)}:root[data-theme=dark] :where(.on-hero-pillars,.on-how-showcase-communities,.on-how-showcase-circles,.on-how-showcase-programs,.on-how-showcase-announcements,.on-how-showcase-chats,.on-how-showcase-people-hub,.on-how-showcase-resident-profile,.on-how-showcase-survey-builder,.on-how-showcase-tracks){border-color:var(--color-border)}:root[data-theme=dark] .on-how-showcase-screen{filter:drop-shadow(0 24px 30px rgba(0,0,0,.34));box-shadow:none}.on-how-tag{display:table;margin:0 auto 20px;padding:8px 18px;border-radius:999px;background:#df27551f;color:#c91f4a;font-family:DM Sans,Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.on-how-headline{font-family:Clash Display,sans-serif;font-weight:700;font-size:2.4rem;color:#1e3538;letter-spacing:-.02em;line-height:1.15;text-align:center;max-width:900px;margin:0 auto 12px}.on-how-body{font-family:DM Sans,Arial,sans-serif;font-size:1rem;color:#555;line-height:1.7;text-align:center;max-width:720px;margin:0 auto 36px}.on-how-showcase{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;max-width:1000px;margin:0 auto;padding-top:8px}@media(max-width:899px){.on-how-showcase-copy{order:1}.on-how-showcase-media{order:2}}.on-how-showcase-media{width:100%;display:flex;justify-content:center}.on-how-showcase-screen{width:auto;max-width:100%;max-height:min(72vh,760px);margin:0 auto;height:auto;display:block;object-fit:contain;border-radius:16px}@media(max-width:899px){.on-how-showcase-screen{max-height:min(62vh,640px)}}.on-how-showcase-placeholder{position:relative;aspect-ratio:4 / 3;border-radius:16px;background:linear-gradient(145deg,#f2f2f2,#e8e8e8);border:1px solid #e0e0e0;box-shadow:0 12px 40px #00000014;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow:hidden}.on-how-showcase-placeholder-chrome{position:absolute;top:14px;left:16px;display:flex;gap:6px}.on-how-showcase-placeholder-chrome span{width:10px;height:10px;border-radius:50%;background:#ddd}.on-how-showcase-placeholder-chrome span:nth-child(1){background:#ff6b6b}.on-how-showcase-placeholder-chrome span:nth-child(2){background:#ffd166}.on-how-showcase-placeholder-chrome span:nth-child(3){background:#7ed957}.on-how-showcase-placeholder-caption{font-family:DM Sans,Arial,sans-serif;font-size:.9rem;font-weight:600;color:#999;text-align:center;margin:0;max-width:220px;line-height:1.45}.on-how-showcase-copy{text-align:left}.on-how-showcase-kicker{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-bottom:14px}.on-how-showcase-num{font-family:Clash Display,sans-serif;font-weight:700;font-size:clamp(3.25rem,10vw,4.75rem);line-height:.92;letter-spacing:-.05em;flex-shrink:0;-webkit-user-select:none;user-select:none;width:fit-content;max-width:100%;background:linear-gradient(120deg,#c91f4a,#df2755 35%,#ff6a00 78%,#ff8c42);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 32px rgba(223,39,85,.18)}.on-how-showcase-badge{flex-shrink:0;width:fit-content;max-width:100%;padding:6px 12px;border-radius:999px;font-family:DM Sans,Arial,sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-orange);background:#ff6a001a;border:1px solid rgba(255,106,0,.22)}.on-how-showcase-title{font-family:Clash Display,sans-serif;font-weight:700;font-size:clamp(2rem,5vw,2.75rem);color:#1e3538;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.on-how-showcase-desc{font-family:DM Sans,Arial,sans-serif;font-size:1rem;color:#555;line-height:1.65;margin:0 0 24px}.on-how-showcase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.on-how-showcase-list li{display:flex;align-items:flex-start;gap:12px;font-family:DM Sans,Arial,sans-serif;font-size:.95rem;color:#333;line-height:1.45}.on-how-showcase-check{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#df2755,#ff6a00);color:#fff;font-size:.78rem;font-weight:900;line-height:1;-webkit-text-stroke:.35px #fff;display:flex;align-items:center;justify-content:center;margin-top:1px}@media(min-width:900px){.on-how-showcase{grid-template-columns:1fr 1fr;gap:56px;max-width:1100px;padding-top:16px}}.on-how-showcase-communities{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-dorms{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-communities{margin-top:56px;padding-top:56px}}.on-how-showcase-circles{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-micro{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-circles{margin-top:56px;padding-top:56px}}.on-how-showcase-programs{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-programs{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-programs{margin-top:56px;padding-top:56px}}.on-how-showcase-announcements{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-announcements{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-announcements{margin-top:56px;padding-top:56px}}.on-how-showcase-chats{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-chats{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-chats{margin-top:56px;padding-top:56px}}.on-how-showcase-people-hub{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-people-hub{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-people-hub{margin-top:56px;padding-top:56px}}.on-how-showcase-resident-profile{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-resident-profile{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-resident-profile{margin-top:56px;padding-top:56px}}.on-how-showcase-survey-builder{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-survey-builder{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-survey-builder{margin-top:56px;padding-top:56px}}.on-how-showcase-tracks{margin-top:48px;padding-top:48px;border-top:1px solid #e8e8e8}.on-how-showcase-badge-tracks{color:#ff6a00;background:#ff6a001a;border-color:#ff6a0047}@media(min-width:900px){.on-how-showcase-tracks{margin-top:56px;padding-top:56px}}.on-cta-band{padding:80px 24px;background:linear-gradient(135deg,#df2755,#ff6a00);text-align:center}.on-cta-band-inner{max-width:700px;margin:0 auto}.on-cta-band h2{font-family:Clash Display,sans-serif;font-weight:600;font-size:2.4rem;color:#fff;letter-spacing:-.02em;margin:0 0 16px}.on-cta-subtext{font-family:DM Sans,Arial,sans-serif;font-size:1.05rem;color:#ffffffe6;line-height:1.6;margin:0 0 28px}.on-btn-white{background:#fff;color:#df2755}.on-btn-white:hover{box-shadow:0 4px 20px #0003}@media(min-width:768px){.on-hero{padding:48px 40px 80px}.on-hero-title{font-size:3rem}.on-hero-buttons{flex-direction:row}.on-section{padding:80px 40px}.on-problem-title,.on-how-headline{font-size:3rem}.on-problem-header{margin-bottom:56px}.on-cta-band h2{font-size:3rem}}@media(min-width:1024px){.on-hero{padding:56px 40px 100px}.on-hero-inner{flex-direction:row;align-items:center;gap:48px;text-align:left}.on-hero-text{flex:1;text-align:left}.on-hero-image{flex:1;display:flex;justify-content:flex-end}.on-hero-img{max-width:100%;width:100%}.on-hero-title{font-size:3.4rem}.on-hero-subtitle{font-size:1.2rem}.on-hero .on-hero-buttons{justify-content:flex-start}.on-section{padding:100px 40px}.on-problem-title,.on-how-headline,.on-cta-band h2{font-size:3.4rem}}