:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #ececf0;
  --text: #101014;
  --muted: #62626a;
  --line: rgba(16,16,20,.12);
  --soft-line: rgba(16,16,20,.07);
  --purple: #7028e4;
  --violet: #a855f7;
  --button-text: #fff;
  --header: rgba(245,245,247,.78);
  --shadow: 0 32px 80px rgba(28,20,45,.14);
  --radius: 32px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07030e;
  --surface: #10081c;
  --surface-2: #171020;
  --text: #f7f5fb;
  --muted: #aaa4b6;
  --line: rgba(255,255,255,.16);
  --soft-line: rgba(255,255,255,.08);
  --purple: #8b27ff;
  --violet: #c551ff;
  --button-text: #fff;
  --header: rgba(7,3,14,.76);
  --shadow: 0 38px 100px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; transition: background .35s ease, color .35s ease; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; padding: .8rem 1rem; background: var(--text); color: var(--bg); border-radius: 10px; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 70px; padding: 0 clamp(1.25rem,4vw,4.5rem); background: var(--header); border-bottom: 1px solid var(--soft-line); backdrop-filter: blur(22px) saturate(150%); }
.brand { display: inline-flex; align-items: center; width: max-content; }
.official-logo { display: block; width: auto; object-fit: contain; }
.site-logo { width: 220px; max-height: 38px; transition: filter .35s ease; }
html[data-theme="dark"] .site-logo { filter: invert(1) brightness(1.2); }
.site-header nav { display: flex; gap: 2rem; font-size: .87rem; color: var(--muted); }
.site-header nav a:hover, .footer-links a:hover { color: var(--text); }
.site-header > .button { justify-self: end; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .65rem; min-height: 52px; padding: .8rem 1.35rem; color: var(--button-text); font-weight: 650; font-size: .95rem; background: linear-gradient(120deg, #6424d8, #a21dff); border: 0; border-radius: 999px; box-shadow: 0 12px 30px rgba(118,37,224,.25); transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(118,37,224,.34); }
.button-small { min-height: 42px; padding: .65rem 1.1rem; font-size: .82rem; }
.text-link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 650; }
.text-link:hover { color: var(--purple); }
.eyebrow { margin: 0 0 1.35rem; color: var(--purple); font-size: .74rem; line-height: 1.2; font-weight: 760; letter-spacing: .17em; text-transform: uppercase; }
.hero { position: relative; min-height: calc(100vh - 70px); display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(3rem,5vw,6rem); padding: clamp(2rem,4vw,3.5rem) clamp(1.25rem,5.5vw,6.5rem) clamp(4rem,8vw,8rem); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 55vw; height: 55vw; border-radius: 50%; right: -20vw; top: -28vw; background: radial-gradient(circle, rgba(140,40,255,.16), transparent 64%); pointer-events: none; }
.hero-priority { position: relative; z-index: 2; grid-column: 1 / -1; width: 100%; text-align: center; }
.hero-priority h1 { max-width: 13ch; margin: 0 auto; font-size: clamp(3.825rem,7.65vw,8.5rem); line-height: .86; letter-spacing: -.075em; font-weight: 760; }
.hero-priority h1 span { color: var(--purple); }
.hero-copy h2 { max-width: 12ch; margin: 0; font-size: clamp(2.7rem,4.7vw,5.8rem); line-height: .96; letter-spacing: -.06em; font-weight: 720; }
.hero-copy h2 span, .section-intro h2 span { color: var(--muted); }
.hero-lede { max-width: 660px; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.08rem,1.5vw,1.35rem); line-height: 1.52; letter-spacing: -.018em; }
.hero-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2rem; }
.microcopy { margin: 1.25rem 0 0; color: var(--muted); font-size: .83rem; }
.hero-visual { position: relative; min-height: 720px; }
.portrait-frame { position: absolute; inset: 4% 1% 3% 12%; border-radius: 42px; overflow: hidden; box-shadow: var(--shadow); }
.portrait-frame img { height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.85); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, transparent 55%, rgba(92,24,175,.18)); }
.hero-profile-view { position: absolute; z-index: 2; left: 0; top: 50%; width: auto; height: min(96%,700px); max-width: 64%; object-fit: contain; transform: translateY(-50%); border-radius: 24px; box-shadow: 0 40px 90px rgba(0,0,0,.34); }
.phone { position: absolute; width: 285px; min-height: 570px; left: 0; top: 50%; transform: translateY(-50%) rotate(-2.5deg); overflow: hidden; color: #fff; background: #0b0b0e; border: 8px solid #1d1d21; border-radius: 42px; box-shadow: 0 40px 90px rgba(0,0,0,.38); }
.phone-top { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 9px; background: #0b0b0e; }
.phone-top i { width: 68px; height: 18px; border-radius: 20px; background: #000; }
.profile-hero { height: 190px; background: linear-gradient(0deg,rgba(9,3,18,.2),transparent), url("assets/creator-studio.png") 61% 29%/cover; }
.profile-content { padding: 19px 17px 18px; }
.profile-kicker { margin: 0 0 5px !important; color: #c79dff !important; font-size: 8px !important; letter-spacing: .11em; text-transform: uppercase; }
.profile-content h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.profile-content > p { margin: 7px 0 13px; color: #a9a6ae; font-size: 11px; line-height: 1.45; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 11px 0; border-block: 1px solid rgba(255,255,255,.12); }
.stats div { display: grid; gap: 2px; }
.stats b { font-size: 13px; }
.stats span { color: #84818b; font-size: 7px; text-transform: uppercase; }
.work-card { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; margin-top: 12px; padding: 11px; background: linear-gradient(135deg,#7028e4,#a21dff); border-radius: 15px; }
.work-card .play { display: grid; place-items: center; width: 28px; height: 28px; background: rgba(255,255,255,.18); border-radius: 50%; font-size: 9px; }
.work-card div { display: grid; }
.work-card small { font-size: 6px; opacity: .7; letter-spacing: .08em; }
.work-card strong { font-size: 11px; }
.floating-proof { position: absolute; display: grid; gap: 4px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.78); color: #141218; border-radius: 17px; box-shadow: 0 20px 50px rgba(20,10,35,.2); backdrop-filter: blur(20px); }
html[data-theme="dark"] .floating-proof { background: rgba(17,9,28,.8); border-color: rgba(255,255,255,.14); color: #fff; }
.floating-proof span { color: #76717e; font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; }
.floating-proof b { font-size: .82rem; }
.proof-one { right: -2%; top: 18%; }
.proof-two { right: 2%; bottom: 7%; }
.manifesto { padding: clamp(7rem,14vw,13rem) clamp(1.25rem,8vw,10rem); text-align: center; background: var(--surface); }
.manifesto-line { max-width: 1050px; margin: 0 auto; font-size: clamp(3rem,6vw,6.8rem); line-height: .98; letter-spacing: -.06em; }
.manifesto-copy { max-width: 850px; margin: 2.5rem auto 0; color: var(--muted); font-size: clamp(1.2rem,2vw,1.65rem); line-height: 1.55; letter-spacing: -.025em; }
.principles { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); background: var(--surface); }
.principle { position: relative; min-height: 440px; padding: clamp(2rem,4vw,4.5rem); border-right: 1px solid var(--line); }
.principle:last-child { border-right: 0; }
.principle .number { color: var(--muted); font-size: .74rem; letter-spacing: .12em; }
.principle svg { width: 58px; height: 58px; margin-top: 6.5rem; fill: none; stroke: var(--purple); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.principle h3 { margin: 1.7rem 0 .7rem; font-size: clamp(2rem,3vw,3.2rem); letter-spacing: -.05em; }
.principle p { max-width: 390px; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.portfolio-section { padding: clamp(7rem,12vw,12rem) clamp(1.25rem,5.5vw,6.5rem); }
.section-intro { max-width: 1020px; margin-bottom: 4rem; }
.section-intro h2 { margin: 0; font-size: clamp(3rem,5.8vw,6.4rem); line-height: .98; letter-spacing: -.06em; }
.section-intro > p:last-child { max-width: 700px; margin: 1.8rem 0 0; color: var(--muted); font-size: 1.25rem; line-height: 1.55; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-card { display: grid; grid-template-rows: auto 1fr; min-height: 640px; overflow: hidden; padding: clamp(1.7rem,3vw,3rem); background: var(--surface); border: 1px solid var(--soft-line); border-radius: var(--radius); }
.feature-large { grid-column: 1 / -1; grid-template-columns: .72fr 1.28fr; min-height: 760px; }
.card-copy > span { color: var(--purple); font-size: .75rem; letter-spacing: .12em; }
.card-copy h3 { max-width: 12ch; margin: 1.1rem 0 .7rem; font-size: clamp(2.2rem,4vw,4.8rem); line-height: 1; letter-spacing: -.055em; }
.feature-card:not(.feature-large) .card-copy h3 { font-size: clamp(2rem,3vw,3.6rem); }
.card-copy p { max-width: 490px; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.vertical-feed { align-self: end; justify-self: end; position: relative; width: min(100%,650px); height: 625px; overflow: hidden; border-radius: 32px 32px 0 0; background: #0b0711; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.feed-main { position: absolute; inset: 0 122px 0 0; }
.feed-main img { height: 100%; object-fit: cover; }
.feed-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,3,9,.9),transparent 52%); }
.feed-overlay { position: absolute; z-index: 2; left: 28px; bottom: 30px; display: grid; gap: 8px; color: white; }
.feed-overlay small { color: #caaaff; font-size: .62rem; letter-spacing: .12em; }
.feed-overlay b { font-size: 2rem; }
.feed-overlay span { font-size: .85rem; }
.feed-side { position: absolute; right: 0; top: 0; bottom: 0; width: 122px; display: grid; grid-template-rows: repeat(3,1fr); background: #120a1c; }
.feed-side div { display: grid; place-items: center; color: #9d93a8; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .76rem; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .12em; text-transform: uppercase; }
.metric-stack { align-self: end; display: grid; margin-top: 4rem; }
.metric-stack div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .3rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.metric-stack span { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.metric-stack b { font-size: clamp(2.6rem,5vw,5.3rem); letter-spacing: -.06em; }
.metric-stack i { padding: .35rem .55rem; color: var(--purple); background: rgba(126,42,230,.1); border-radius: 999px; font-size: .69rem; font-style: normal; }
.service-list { align-self: end; display: grid; gap: 9px; margin-top: 4rem; }
.service-list div { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 1.15rem 1.2rem; background: var(--surface-2); border-radius: 17px; }
.service-list span { font-weight: 700; }
.service-list small { grid-row: 2; color: var(--muted); }
.service-list b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--purple); font-size: .85rem; }
.account-showcase { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(620px,1.28fr); gap: clamp(3rem,6vw,7rem); align-items: start; padding: clamp(7rem,12vw,12rem) clamp(1.25rem,5.5vw,6.5rem); background: var(--surface); }
.account-intro { position: sticky; top: 8rem; max-width: 560px; margin: clamp(2rem,6vw,6rem) 0 0; }
.account-intro h2 { max-width: 9ch; margin: 0; font-size: clamp(3.2rem,4.7vw,5.7rem); line-height: .98; letter-spacing: -.06em; }
.account-intro > p:last-child { max-width: 540px; margin: 1.8rem 0 0; color: var(--muted); font-size: 1.2rem; line-height: 1.58; }
.account-screens { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2vw,1.8rem); align-items: start; width: 100%; max-width: 980px; margin-left: auto; padding: clamp(1rem,2vw,1.7rem); background: linear-gradient(145deg, rgba(111,37,225,.13), rgba(168,85,247,.04) 45%, rgba(61,184,255,.08)); border: 1px solid var(--soft-line); border-radius: 42px; }
.account-screen { position: relative; overflow: hidden; margin: 0; background: #faf9fc; border: 1px solid #e4e0e8; border-radius: 30px; box-shadow: 0 30px 80px rgba(49,27,69,.18); }
.account-screen-links { margin-top: clamp(2rem,7vw,7rem); }
.account-screen img { display: block; width: 100%; height: auto; }
.contrast-section { padding: clamp(6rem,11vw,11rem) clamp(1.25rem,5.5vw,6.5rem); background: var(--text); color: var(--bg); }
.contrast-copy { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; align-items: start; }
.contrast-copy h2 { max-width: 900px; margin: 0; font-size: clamp(3rem,5vw,5.8rem); line-height: .98; letter-spacing: -.06em; }
.comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; margin-top: 5rem; }
.comparison-card { min-height: 410px; padding: clamp(2rem,4vw,4rem); border: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); border-radius: 28px; }
.comparison-card small { font-size: .68rem; letter-spacing: .15em; opacity: .6; }
.comparison-card h3 { max-width: 14ch; margin: 1.5rem 0 2rem; font-size: clamp(1.8rem,3vw,3.2rem); line-height: 1.05; letter-spacing: -.045em; }
.comparison-card ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; opacity: .7; }
.comparison-card li::before { content: "—"; margin-right: .7rem; }
.comparison-card.new { color: #fff; background: linear-gradient(145deg,#4d11a7,#8b27ff 70%,#b446ff); border: 0; box-shadow: 0 28px 80px rgba(106,25,208,.35); }
.comparison-card.new small, .comparison-card.new ul { opacity: .88; }
.comparison-arrow { font-size: 2.3rem; opacity: .4; }
.agency { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(3rem,8vw,9rem); align-items: center; overflow: hidden; padding: clamp(7rem,12vw,12rem) clamp(1.25rem,6vw,7rem); color: #fff; background: #090311; }
.agency-glow { position: absolute; width: 50vw; height: 50vw; right: -15vw; top: -18vw; background: radial-gradient(circle,rgba(129,31,255,.5),transparent 68%); }
.agency-copy { position: relative; z-index: 2; }
.agency-copy h2 { margin: 0; font-size: clamp(3rem,5.3vw,6.1rem); line-height: .98; letter-spacing: -.06em; }
.agency-copy > p:not(.eyebrow) { max-width: 620px; margin: 1.6rem 0 2rem; color: #aaa4b2; font-size: 1.2rem; line-height: 1.55; }
.button-light { color: #151019; background: #fff; box-shadow: none; }
.roster { position: relative; z-index: 2; padding: 1.3rem; color: #17121b; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.35); border-radius: 29px; box-shadow: 0 50px 120px rgba(0,0,0,.42); transform: rotate(1.5deg); }
.roster-head { display: flex; justify-content: space-between; padding: 1rem .5rem 1.4rem; }
.roster-head span { font-size: 1.1rem; font-weight: 750; }
.roster-head b { color: #77717e; font-size: .76rem; }
.roster-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; margin-bottom: 7px; padding: 1rem; background: #f3f2f5; border-radius: 17px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; color: white; background: #7028e4; border-radius: 50%; font-size: .73rem; font-style: normal; font-weight: 700; }
.a2 { background: #131119; }.a3 { background: #d25b94; }
.roster-row > span { display: grid; gap: 3px; }
.roster-row small { color: #88828f; }
.roster-row em { color: #756f7a; font-size: .75rem; font-style: normal; }
.roster-row > strong { padding: .38rem .55rem; color: #22613a; background: #dff2e5; border-radius: 999px; font-size: .62rem; }
.roster-foot { display: flex; justify-content: space-between; align-items: end; margin-top: 1rem; padding: 1.2rem .5rem .4rem; }
.roster-foot span { color: #77717e; font-size: .76rem; }
.roster-foot b { font-size: 2rem; letter-spacing: -.04em; }
.roster-foot i { color: #7028e4; font-size: .72rem; font-style: normal; }
.final-cta { position: relative; min-height: 780px; display: grid; place-content: center; justify-items: center; overflow: hidden; padding: 8rem 1.25rem; text-align: center; }
.final-cta h2 { max-width: 1100px; margin: 0; font-size: clamp(3.2rem,6.3vw,7.2rem); line-height: .96; letter-spacing: -.065em; }
.final-cta > p:not(.eyebrow) { max-width: 640px; margin: 1.8rem auto 0; color: var(--muted); font-size: 1.2rem; line-height: 1.55; }
.final-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2rem; }
.orb { position: absolute; z-index: -1; width: 580px; height: 580px; border-radius: 50%; background: radial-gradient(circle,rgba(139,39,255,.2),transparent 64%); filter: blur(8px); }
footer { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 3rem; padding: 4rem clamp(1.25rem,5.5vw,6.5rem) 2rem; background: var(--surface); border-top: 1px solid var(--line); }
.footer-brand p { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 1rem 2rem; color: var(--muted); font-size: .86rem; }
.theme-picker { display: grid; gap: .55rem; align-content: start; }
.theme-picker label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.theme-picker select { min-width: 135px; padding: .65rem 2rem .65rem .8rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .76rem; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .hero-copy { position: relative; z-index: 2; }
  .hero-priority { grid-column: auto; }
  .hero-visual { width: min(100%,800px); min-height: 700px; justify-self: center; }
  .feature-large { grid-template-columns: 1fr; }
  .feature-large .card-copy { margin-bottom: 4rem; }
  .account-showcase { grid-template-columns: 1fr; }
  .account-intro { position: static; max-width: 900px; margin: 0 0 4.5rem; }
  .account-intro h2 { max-width: 12ch; }
  .account-intro > p:last-child { max-width: 720px; }
  .account-screens { max-width: 900px; margin: 0 auto; }
  .agency { grid-template-columns: 1fr; }
  .roster { width: min(100%,760px); }
}

@media (max-width: 760px) {
  .site-header { min-height: 62px; padding-inline: 1rem; }
  .site-header .button { min-height: 38px; padding-inline: .8rem; }
  .site-header .button span { display: none; }
  .site-logo { width: 145px; max-height: 30px; }
  .hero { min-height: auto; padding: 2rem 1rem 5rem; }
  .hero-priority h1 { font-size: clamp(3.145rem,13.6vw,4.93rem); line-height: .88; }
  .hero-copy h2 { font-size: clamp(2.7rem,12vw,4.6rem); }
  .hero-lede { font-size: 1.05rem; }
  .hero-actions, .final-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 590px; margin-top: 1.5rem; }
  .portrait-frame { inset: 5% 0 4% 11%; border-radius: 28px; }
  .hero-profile-view { height: min(96%,570px); max-width: 82%; border-radius: 20px; }
  .phone { width: 225px; min-height: 455px; border-width: 6px; border-radius: 34px; }
  .profile-hero { height: 145px; }.profile-content { padding: 13px; }.profile-content h2 { font-size: 20px; }
  .profile-content > p { font-size: 9px; }.stats b { font-size: 11px; }.work-card { padding: 8px; }
  .floating-proof { padding: 11px 12px; }.proof-one { right: -3%; top: 8%; }.proof-two { right: 1%; bottom: 4%; }
  .manifesto { padding-inline: 1.1rem; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle svg { margin-top: 4.2rem; }
  .product-grid { grid-template-columns: 1fr; }
  .feature-large { grid-column: auto; }
  .feature-card { min-height: 580px; padding: 1.4rem; border-radius: 24px; }
  .vertical-feed { height: 500px; }.feed-main { right: 86px; }.feed-side { width: 86px; }
  .account-screens { grid-template-columns: 1fr; padding: .6rem; border-radius: 26px; }
  .account-screen { border-radius: 20px; }
  .account-screen-links { margin-top: 0; }
  .contrast-copy { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }.comparison-arrow { transform: rotate(90deg); justify-self: center; }
  .comparison-card { min-height: auto; }
  .agency { padding-inline: 1rem; }
  .roster { padding: .75rem; border-radius: 22px; transform: none; }
  .roster-row { grid-template-columns: auto 1fr auto; gap: .65rem; padding: .8rem; }
  .roster-row em { display: none; }.avatar { width: 38px; height: 38px; }
  footer { grid-template-columns: 1fr; }
  .footer-bottom { grid-column: auto; flex-direction: column; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}