/* New main-page composition, scoped so shared site surfaces keep their styles. */
.sf-home-nav { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 21px); }
.sf-home-nav a { color: inherit; font-size: .8rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.sf-home-nav a:hover { color: var(--home-nav-hover); }
.sf-home-wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.sf-home-hero { position: relative; isolation: isolate; overflow: hidden; }
.sf-home-hero__grid { position: relative; z-index: 1; display: block; }
.sf-home-hero__visual { position: absolute; z-index: -1; overflow: hidden; }
.sf-home-hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease; }
.sf-home-hero__visual .sf-home-hero__scene--work { opacity: 1; }
.sf-home-hero.is-friends .sf-home-hero__visual .sf-home-hero__scene--work { opacity: 0; }
.sf-home-hero.is-friends .sf-home-hero__visual .sf-home-hero__scene--friends { opacity: 1; }
.sf-home-hero__visual::after { position: absolute; inset: 0; content: ""; }
.sf-home-hero__copy { position: relative; z-index: 2; }
.sf-home-eyebrow { margin: 0 0 12px; color: var(--sv4-brand); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sf-home-mode { display: inline-flex; gap: 4px; margin: 0 0 24px; padding: 4px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; background: rgb(17 19 42 / 66%); }
.sf-home-mode button { padding: 9px 15px; border: 0; border-radius: 999px; color: #f4efff; background: transparent; font: inherit; font-size: .9rem; cursor: pointer; }
.sf-home-mode button.is-active { color: #1d1535; background: #fff; font-weight: 750; }
.sf-home-hero h1 { max-width: 570px; margin: 0; font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: .99; letter-spacing: -.045em; }
.sf-home-hero__text { max-width: 520px; margin: 22px 0 0; font-size: 1.12rem; line-height: 1.55; }
.sf-home-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.sf-home-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 12px 19px; border: 1px solid transparent; border-radius: 13px; font: inherit; font-weight: 750; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.sf-home-button:hover { transform: translateY(-2px); }
.sf-home-button--primary { color: #fff; background: var(--sv4-orange); }
.sf-home-button--primary:hover { color: #fff; background: var(--home-button-primary-hover); }
.sf-home-button--light { color: var(--home-button-light-text); background: var(--home-button-light-background); }
.sf-home-button--light:hover { color: var(--home-button-light-text); background: var(--home-button-light-hover-background); }
.sf-home-text-link { display: inline-block; margin-top: 17px; color: inherit; font-weight: 750; text-underline-offset: 4px; }
.sf-home-note { margin: 18px 0 0; color: #c4bed2; font-size: .82rem; }
.sf-home-proof-band { padding: 20px 0 27px; background: var(--home-section-background); }
.sf-home-proof { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; gap: 14px; }
.sf-home-proof__group { min-width: 0; padding: 18px; border: 1px solid var(--home-proof-border); border-radius: 18px; background: var(--home-proof-background); box-shadow: var(--home-proof-shadow); }
.sf-home-proof__heading { display: flex; align-items: center; gap: 8px; min-height: 22px; color: #292333; font-size: .86rem; font-weight: 750; }
.sf-home-proof__metrics { display: grid; gap: 10px; margin-top: 14px; }
.sf-home-proof__metrics--live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-home-proof__metrics--total { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-home-proof__metric { display: flex; min-width: 0; min-height: 92px; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border-radius: 12px; background: var(--home-proof-metric-background); text-align: center; }
.sf-home-proof__value { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 31px; }
.sf-home-proof__value svg { width: 23px; height: 23px; flex: none; fill: none; stroke: var(--home-proof-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-home-proof__value strong { color: #171824; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-home-proof__metric > span { margin-top: 5px; color: #625b6b; font-size: .82rem; line-height: 1.25; }
.sf-home-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-live-dot-background); box-shadow: var(--home-live-dot-shadow); }
.sf-home-section-head { max-width: 710px; margin-bottom: 28px; }
.sf-home-section-head h2, .sf-home-history h2, .sf-home-friends h2, .sf-home-company h2 { margin: 0; color: #171824; font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.05; letter-spacing: -.035em; }
.sf-home-section-head > p:last-child { max-width: 680px; margin: 12px 0 0; color: #656575; font-size: 1.02rem; line-height: 1.55; }
.sf-home-process { padding: 82px 0 88px; background: var(--home-section-background); }
.sf-home-process .sf-home-section-head, .sf-home-process .sf-home-section-head > p:last-child { max-width: none; }
.sf-home-process__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.sf-home-step { display: flex; min-height: 338px; flex-direction: column; padding: 25px; border-radius: 23px; }
.sf-home-step--lavender { background: var(--home-step-lavender-background); }
.sf-home-step--peach { background: var(--home-step-peach-background); }
.sf-home-step--mint { background: var(--home-step-mint-background); }
.sf-home-step > span { color: #5d4b93; font-size: .72rem; font-weight: 850; letter-spacing: .09em; }
.sf-home-step h3 { max-width: 295px; margin: 18px 0 0; color: #211d2a; font-size: 1.48rem; line-height: 1.15; }
.sf-home-step > p { margin: 10px 0 20px; color: #595466; line-height: 1.5; }
.sf-home-step__visual { margin-top: auto; min-height: 92px; border: 1px solid rgb(78 53 133 / 12%); border-radius: 16px; background: rgb(255 255 255 / 74%); }
.sf-home-mini-room { display: flex; width: min(82%, 250px); flex-direction: column; gap: 7px; justify-content: center; margin-left: auto; padding: 15px 18px; color: #242039; box-shadow: 0 14px 28px rgb(54 39 80 / 11%); transform: rotate(5deg); }
.sf-home-mini-room small { color: #686276; }
.sf-home-mini-room span { color: #795bd1; letter-spacing: .22em; }
.sf-home-game-pills { display: flex; align-items: end; justify-content: flex-end; gap: 8px; border: 0; background: transparent; }
.sf-home-game-pills img { width: clamp(60px, 6vw, 74px); height: clamp(60px, 6vw, 74px); border-radius: 12px; object-fit: cover; box-shadow: 0 8px 18px rgb(54 39 80 / 13%); }
.sf-home-history-pill { display: flex; width: min(82%, 250px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; margin-left: auto; padding: 18px; color: #375b4b; box-shadow: 0 14px 28px rgb(54 39 80 / 10%); transform: rotate(-5deg); }
.sf-home-history-pill small { color: #777180; font-size: .75rem; font-weight: 500; }
.sf-home-games { overflow: hidden; padding: 82px 0 88px; color: #fff; background: var(--home-games-background); }
.sf-home-section-head--dark h2 { color: #fff; }
.sf-home-section-head--dark > p:last-child { color: #c8c2d3; }
.sf-home-section-head--dark .sf-home-eyebrow { color: #c3a8ff; }
.sf-home-carousel { overflow: visible; }
.sf-home-carousel .grid.card-grid { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 13px; scroll-snap-type: x mandatory; scrollbar-color: #71629a #23243c; }
.site-v4 .sf-home-games .sf-home-game-card { display: flex; position: relative; flex: 0 0 250px; min-height: 285px; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--sv4-line); border-radius: 19px; color: var(--sv4-ink); background: #fff; text-decoration: none; scroll-snap-align: start; }
.sf-home-game-card:hover { border-color: #a78bea; color: var(--sv4-ink); transform: translateY(-2px); }
.sf-home-game-card__art { position: relative; flex: none; width: 100%; height: 154px; min-height: 0; display: block; overflow: hidden; background: #252741; }
.sf-home-game-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sf-home-game-card__rank { position: absolute; bottom: 10px; left: 10px; padding: 6px 9px; border-radius: 999px; color: #201331; background: #ffe5a5; font-size: .7rem; font-weight: 800; }
.sf-home-game-card__body { display: flex; flex: 1; flex-direction: column; padding: 17px 18px 20px; }
.sf-home-game-card__body h3 { margin: 0 0 9px; color: var(--sv4-ink); font-size: 1.22rem; line-height: 1.2; }
.sf-home-game-card__body p { margin: 0; color: #5e5b67; font-size: .9rem; line-height: 1.4; }
.site-v4 .sf-home-games .sf-home-game-card--catalog { justify-content: center; padding: 24px; border-color: #ffc79e; color: #211d2a; background: linear-gradient(145deg, #fff0e4, #ffead9); }
.site-v4 .sf-home-games .sf-home-game-card--catalog strong { color: #c43a0e; font-size: 2.7rem; }
.site-v4 .sf-home-games .sf-home-game-card--catalog > span { margin-top: 4px; color: #554950; font-size: .92rem; letter-spacing: 0; }
.site-v4 .sf-home-games .sf-home-game-card--catalog p { color: #3f3940; }
.site-v4 .sf-home-games .sf-home-game-card--catalog b { margin-top: 22px; color: #c43a0e; }
.site-v4 .sf-home-games .sf-home-game-card--catalog:hover { border-color: #c43a0e; }
.sf-home-collections { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.sf-home-collections .site-v4__btn { max-width: 100%; white-space: normal; text-align: center; }
.sf-home-history { padding: 84px 0; background: var(--home-history-background); }
.sf-home-history__grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 54px; }
.sf-home-history__grid > div:first-child > p:not(.sf-home-eyebrow) { margin: 16px 0 22px; color: #625f6c; line-height: 1.6; }
.sf-home-history__grid > div:first-child > small { display: block; margin-top: 12px; color: #777281; font-size: .76rem; }
.sf-home-history-screen { padding: 18px; border: 1px solid #e4deed; border-radius: 22px; background: #fff; box-shadow: 0 20px 48px rgb(47 32 80 / 10%); }
.sf-home-history-screen__bar { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid #eeeaf3; color: #554b68; font-size: .83rem; }
.sf-home-history-screen__bar span { color: #91899d; }
.sf-home-history-screen__title { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 17px; }
.sf-home-history-screen__title span { color: #7958c8; font-size: .64rem; font-weight: 850; letter-spacing: .08em; }
.sf-home-history-screen__title b { color: #211c2b; font-size: 1.45rem; }
.sf-home-history-screen__title small { color: #777180; }
.sf-home-history-screen__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.sf-home-history-screen__stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 15px 12px; border-radius: 14px; background: #efe8ff; }
.sf-home-history-screen__stats div:nth-child(2) { background: #d9f4e9; }
.sf-home-history-screen__stats div:nth-child(3) { background: #ffeadc; }
.sf-home-history-screen__stats strong { color: #291d3c; font-size: 1.15rem; white-space: nowrap; }
.sf-home-history-screen__stats span { color: #665a72; font-size: .72rem; }
.sf-home-history-screen__rows { display: grid; gap: 8px; }
.sf-home-history-screen__rows div { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 12px; background: #f7f5fa; font-size: .82rem; }
.sf-home-history-screen__rows img { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.sf-home-history-screen__rows div > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sf-home-history-screen__rows b { color: #292433; }
.sf-home-history-screen__rows small { color: #777180; }
.sf-home-history-screen__rows div > span:last-child { color: #7958c8; font-size: 1rem; }
.sf-home-history-screen > small { display: block; margin-top: 13px; color: #928b9d; font-size: .7rem; }
.sf-home-friends { padding: 32px 0; background: #fff; }
.sf-home-friends__card { display: grid; position: relative; min-height: 340px; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; border-radius: 27px; color: #fff; background: #271d45; }
.sf-home-friends__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .63; }
.sf-home-friends__card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #241b3f 0%, rgb(36 27 63 / 92%) 48%, rgb(36 27 63 / 15%) 100%); }
.sf-home-friends__card > div { position: relative; z-index: 1; max-width: 550px; padding: 42px; }
.sf-home-friends h2 { color: #fff; }
.sf-home-friends .sf-home-button--light { color: #211a36 !important; background: #fff !important; border-color: #fff; }
.sf-home-friends p:not(.sf-home-eyebrow) { color: #e1dbea; line-height: 1.55; }
.sf-home-company { padding: 82px 0; background: var(--home-company-background); }
.sf-home-company__grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 56px; }
.sf-home-company__grid > div:first-child > p:not(.sf-home-eyebrow) { margin: 15px 0 23px; color: #625f6c; line-height: 1.6; }
.sf-home-hub { padding: 23px; border: 1px solid var(--home-hub-border); border-radius: 20px; background: var(--home-hub-background); box-shadow: 0 17px 42px rgb(47 32 80 / 9%); }
.sf-home-hub__head { display: flex; justify-content: space-between; gap: 12px; color: #292433; }
.sf-home-hub__head span, .sf-home-hub small { color: #827a8d; font-size: .78rem; }
.sf-home-hub__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0 15px; }
.sf-home-hub__stats div { display: flex; flex-direction: column; gap: 3px; padding: 15px 11px; border-radius: 13px; background: var(--home-hub-stat-background); }
.sf-home-hub__stats div:nth-child(2) { background: var(--home-hub-stat-second-background); }
.sf-home-hub__stats div:nth-child(3) { background: var(--home-hub-stat-third-background); }
.sf-home-hub__stats strong { color: #291d3c; font-size: 1.3rem; }
.sf-home-hub__stats span { color: #625b6b; font-size: .7rem; }
.sf-home-hub__teams { display: grid; gap: 8px; margin-bottom: 15px; }
.sf-home-hub__teams div { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 12px; background: var(--home-hub-team-background); }
.sf-home-hub__teams div > span { color: #57c990; }
.sf-home-hub__teams div:nth-child(2) > span { color: #a385e8; }
.sf-home-hub__teams b { flex: 1; color: #292433; font-size: .83rem; }
.sf-home-hub__teams small { text-align: right; }
.sf-home-hub small { display: block; line-height: 1.45; }
.sf-home-updates, .sf-home-blog { padding: 76px 0; background: var(--home-section-background); }
.sf-home-updates__grid, .sf-home-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.sf-home-updates__grid > a, .sf-home-blog__grid > a { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--home-content-card-border); border-radius: 18px; color: #24212c; background: var(--home-content-card-background); text-decoration: none; }
.sf-home-updates__grid > a:hover, .sf-home-blog__grid > a:hover { border-color: #b6a1e7; box-shadow: 0 10px 25px rgb(48 32 83 / 8%); }
.sf-home-updates__grid span, .sf-home-blog__grid span { color: #7958c8; font-size: .68rem; font-weight: 800; letter-spacing: .07em; }
.sf-home-updates__grid h3, .sf-home-blog__grid h3 { margin: 14px 0 7px; font-size: 1.18rem; line-height: 1.25; }
.sf-home-updates__grid p { color: #696575; font-size: .9rem; line-height: 1.45; }
.sf-home-updates__grid b, .sf-home-blog__grid b { margin-top: auto; padding-top: 10px; color: #6944bd; font-size: .86rem; }
.sf-home-blog__grid > a { overflow: hidden; padding: 0 0 18px; }
.sf-home-blog__grid img { width: 100%; height: 154px; margin-bottom: 16px; object-fit: cover; }
.sf-home-blog__grid span, .sf-home-blog__grid h3, .sf-home-blog__grid p, .sf-home-blog__grid b { margin-right: 17px; margin-left: 17px; }
.sf-home-blog__grid p { color: #696575; font-size: .9rem; line-height: 1.45; }
.sf-home-faq { padding: 76px 0; background: var(--home-faq-background); }
.sf-home-faq details { border-bottom: 1px solid #e4dfea; }
.sf-home-faq summary { padding: 18px 38px 18px 0; color: #282432; font-weight: 750; cursor: pointer; }
.sf-home-faq details p { max-width: 820px; margin: 0; padding: 0 0 18px; color: #625f6c; line-height: 1.55; }
.sf-home-faq details a { color: #6540cd; }
.sf-home-faq > .sf-home-text-link { color: #6540cd; }

@media (max-width: 991px) {
  .sf-home-nav { display: none; }
  .sf-home-proof { grid-template-columns: 1fr; }
  .sf-home-proof__group { min-height: 68px; }
  .sf-home-history__grid, .sf-home-company__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .sf-home-wrap { width: min(100% - 32px, 560px); }
  .sf-home-proof__metrics--total { grid-template-columns: minmax(0, 1fr); }
  .sf-home-hero h1 { max-width: 520px; font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .sf-home-hero__text { max-width: 480px; font-size: 1rem; }
  .sf-home-actions { gap: 9px; }
  .sf-home-actions .sf-home-button { flex: 1 1 210px; }
  .sf-home-proof { gap: 9px; }
  .sf-home-proof__value strong { font-size: 1.55rem; }
  .sf-home-process, .sf-home-games, .sf-home-history, .sf-home-company, .sf-home-updates, .sf-home-blog, .sf-home-faq { padding: 58px 0; }
  .sf-home-process__grid { grid-template-columns: 1fr; gap: 12px; }
  .sf-home-step { min-height: 290px; padding: 21px; }
  .sf-home-section-head { margin-bottom: 21px; }
  .sf-home-section-head h2, .sf-home-history h2, .sf-home-friends h2, .sf-home-company h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .site-v4 .sf-home-games .sf-home-game-card { flex-basis: 78vw; min-height: 285px; }
  .sf-home-history__grid, .sf-home-company__grid { grid-template-columns: 1fr; gap: 26px; }
  .sf-home-friends__card { min-height: 380px; grid-template-columns: 1fr; }
  .sf-home-friends__card > img { object-position: 65% center; }
  .sf-home-friends__card::after { background: linear-gradient(90deg, rgb(36 27 63 / 94%), rgb(36 27 63 / 70%)), linear-gradient(0deg, #241b3f 0%, transparent 100%); }
  .sf-home-friends__card > div { padding: 27px 22px; }
  .sf-home-updates__grid, .sf-home-blog__grid { grid-template-columns: 1fr; }
  .sf-home-updates__grid > a { min-height: 180px; }
  .sf-home-blog__grid > a { min-height: 275px; }
  .sf-home-weekly__head { align-items: flex-start; }
}
@media (max-width: 420px) {
  .sf-home-wrap { width: calc(100% - 28px); }
  .sf-home-mode button { padding: 8px 11px; font-size: .82rem; }
  .sf-home-proof__group { padding: 14px; }
  .sf-home-proof__metrics { gap: 7px; }
  .sf-home-proof__metric { min-height: 84px; padding: 8px 4px; }
  .sf-home-proof__value { gap: 5px; }
  .sf-home-proof__value svg { width: 19px; height: 19px; }
  .sf-home-proof__metric > span { font-size: .72rem; }
  .sf-home-weekly__item { flex: 1 1 100%; }
  .sf-home-hub__teams div { flex-wrap: wrap; }
  .sf-home-hub__teams small { flex-basis: 100%; text-align: left; padding-left: 18px; }
}

/* Match the approved concept: a warm, readable photo card with a small sticker. */
.sf-home-hero { width: min(1420px, calc(100% - 48px)); margin: 22px auto 0; padding: 0; border-radius: 32px; color: var(--home-hero-text); background: var(--home-hero-background); }
.sf-home-hero__grid { width: auto; min-height: 580px; padding: 35px 5% 70px; }
.sf-home-hero__copy { width: min(610px, 58%); padding: 22px 0 35px; }
.sf-home-hero .sf-home-eyebrow { color: var(--home-hero-eyebrow); }
.sf-home-hero h1 { color: var(--home-hero-text); }
.sf-home-hero__text { color: var(--home-hero-copy); }
.sf-home-hero__visual { inset: 0; left: 20%; border-radius: inherit; }
.sf-home-hero__visual img { object-position: center 43%; }
.sf-home-hero__visual::after { background: var(--home-hero-overlay); }
.sf-home-hero .sf-home-text-link { color: var(--home-hero-text); }
.sf-home-hero .sf-home-note { color: var(--home-hero-note); }
.sf-home-hero__sticker { position: absolute; z-index: 3; right: 4.5%; bottom: 30px; display: flex; align-items: center; gap: 9px; padding: 14px 19px; border-radius: 999px; color: var(--home-sticker-text); background: var(--home-sticker-background); box-shadow: var(--home-sticker-shadow); font-size: .9rem; font-weight: 800; transform: rotate(2deg); }
.sf-home-hero__sticker span { color: var(--home-sticker-icon); }
.sf-home-proof { width: min(1160px, calc(100% - 40px)); }
.spaces-home:not([hidden]) + .sf-home-hero { margin-top: 0; }
.sf-home-hero .sf-home-mode { border-color: var(--home-mode-border); background: var(--home-mode-background); }
.sf-home-hero .sf-home-mode button { color: var(--home-mode-text); }
.sf-home-hero .sf-home-mode button.is-active { color: var(--home-mode-active-text); background: var(--home-mode-active-background); }
.sf-home-hero.is-friends { color: var(--home-hero-friends-text); background: var(--home-hero-friends-background); }
.sf-home-hero.is-friends .sf-home-hero__visual::after { background: var(--home-hero-friends-overlay); }
.sf-home-hero.is-friends h1 { color: var(--home-hero-friends-text); }
.sf-home-hero.is-friends .sf-home-hero__text { color: var(--home-hero-friends-copy); }
.sf-home-hero.is-friends .sf-home-eyebrow { color: var(--home-hero-friends-eyebrow) !important; }
.sf-home-hero.is-friends .sf-home-text-link { color: var(--home-hero-friends-text); }
.sf-home-hero.is-friends .sf-home-note { color: var(--home-hero-friends-note); }

@media (max-width: 991px) {
  .sf-home-hero__grid { min-height: 540px; }
  .sf-home-hero__copy { width: min(590px, 68%); }
}
@media (max-width: 767px) {
  .sf-home-hero { width: calc(100% - 28px); margin-top: 14px; border-radius: 27px; }
  .sf-home-hero__grid { width: auto; min-height: 0; padding: 20px 22px 112px; }
  .sf-home-hero__copy { width: 100%; padding: 12px 0 0; }
  .sf-home-hero__visual { inset: 0; left: 0; }
  .sf-home-hero__visual img { object-position: 62% center; }
  .sf-home-hero__visual::after { background: var(--home-hero-overlay); }
  .sf-home-hero.is-friends .sf-home-hero__visual::after { background: var(--home-hero-friends-overlay); }
  .sf-home-hero h1 { color: var(--home-hero-text); }
  .sf-home-hero__text { color: var(--home-hero-copy); }
  .sf-home-hero.is-friends h1, .sf-home-hero.is-friends .sf-home-hero__text { color: var(--home-hero-friends-copy); }
  .sf-home-hero .sf-home-note { display: inline-block; padding: 5px 8px; border-radius: 8px; background: rgb(255 248 239 / 85%); }
  .sf-home-hero.is-friends .sf-home-note { background: rgb(33 27 114 / 75%); }
  .sf-home-hero__sticker { right: 17px; bottom: 17px; max-width: calc(100% - 34px); padding: 12px 15px; font-size: .78rem; }
  .sf-home-proof { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-home-hero__visual img { transition: none; }
}