:root {
  --sn-refer-black: #0a0c0b;
  --sn-refer-green: #123f2f;
  --sn-refer-cream: #f5f1e8;
  --sn-refer-lime: #c9ff3d;
  --sn-refer-line: rgba(255,255,255,.18);
}

.sn-refer-page { background: var(--sn-refer-cream); color: var(--sn-refer-black); }
.sn-refer-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sn-refer-hero { position: relative; overflow: hidden; background: var(--sn-refer-black); color: #fff; }
.sn-refer-hero::after { content: "30"; position: absolute; inset: auto -3vw -18vw auto; color: rgba(201,255,61,.075); font: 900 clamp(18rem, 42vw, 42rem)/.75 Inter, Arial, sans-serif; letter-spacing: -.1em; pointer-events: none; }
.sn-refer-hero__inner { position: relative; z-index: 1; padding-block: clamp(5.5rem, 10vw, 9rem); }
.sn-refer-eyebrow { margin: 0 0 1.1rem; color: var(--sn-refer-lime); font: 800 .875rem/1.2 Inter, Arial, sans-serif; letter-spacing: .16em; }
.sn-refer-hero h1 { max-width: 970px; margin: 0; font: 900 clamp(3rem, 7vw, 7.4rem)/.86 Inter, Arial, sans-serif; letter-spacing: -.065em; text-wrap: balance; }
.sn-refer-hero h1 span { display: block; }
.sn-refer-hero h1 span:first-child { color: #fff; }
.sn-refer-hero h1 span:last-child { color: var(--sn-refer-lime); }
.sn-refer-lede { max-width: 760px; margin: 2rem 0 0; color: rgba(255,255,255,.82); font: 500 clamp(1.05rem, 2vw, 1.3rem)/1.65 Inter, Arial, sans-serif; }
.sn-refer-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.sn-refer-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .8rem; padding: .9rem 1.25rem; border: 1px solid currentColor; border-radius: 0; font: 800 .82rem/1 Inter, Arial, sans-serif; letter-spacing: .09em; text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.sn-refer-button--primary { border-color: var(--sn-refer-lime); background: var(--sn-refer-lime); color: var(--sn-refer-black); }
.sn-refer-button--secondary { color: #fff; }
.sn-refer-button--light { border-color: #fff; color: #fff; }
.sn-refer-button:hover, .sn-refer-button:focus-visible { background: #fff; border-color: #fff; color: var(--sn-refer-black); }
.sn-refer-button:focus-visible, .sn-refer-care__links > a:focus-visible { outline: 3px solid var(--sn-refer-lime); outline-offset: 4px; }
.sn-refer-details { padding-block: clamp(4rem, 8vw, 7rem); }
.sn-refer-section-head { display: grid; grid-template-columns: .65fr 1.35fr; gap: 2rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid rgba(10,12,11,.2); }
.sn-refer-section-head .sn-refer-eyebrow { color: var(--sn-refer-green); }
.sn-refer-section-head h2, .sn-refer-care h2 { margin: 0; font: 900 clamp(2.1rem, 5vw, 4.8rem)/.94 Inter, Arial, sans-serif; letter-spacing: -.05em; }
.sn-refer-steps { margin: 0; padding: 0; list-style: none; }
.sn-refer-steps li { display: grid; grid-template-columns: .65fr 1.35fr; gap: 2rem; padding-block: 2rem; border-bottom: 1px solid rgba(10,12,11,.2); }
.sn-refer-steps li > span { color: var(--sn-refer-green); font: 800 1rem/1 Inter, Arial, sans-serif; }
.sn-refer-steps h3 { margin: 0 0 .55rem; font: 850 clamp(1.35rem, 3vw, 2.25rem)/1 Inter, Arial, sans-serif; letter-spacing: -.03em; }
.sn-refer-steps p { max-width: 620px; margin: 0; font: 500 1rem/1.65 Inter, Arial, sans-serif; }
.sn-refer-care { background: var(--sn-refer-green); color: #fff; }
.sn-refer-care__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; padding-block: clamp(4rem, 8vw, 7rem); }
.sn-refer-care p:not(.sn-refer-eyebrow) { max-width: 650px; margin: 1.25rem 0 0; color: rgba(255,255,255,.82); font: 500 1.05rem/1.65 Inter, Arial, sans-serif; }
.sn-refer-care__links { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.sn-refer-care__links > a:not(.sn-refer-button) { color: #fff; font: 700 .98rem/1.35 Inter, Arial, sans-serif; text-underline-offset: .2em; }
.sn-refer-legal { padding-block: 1.25rem; font: 600 .8rem/1.5 Inter, Arial, sans-serif; }

@media (max-width: 760px) {
  .sn-refer-shell { width: min(100% - 28px, 1180px); }
  .sn-refer-hero__inner { padding-block: 4.5rem; }
  .sn-refer-hero h1 { font-size: clamp(2.75rem, 14.5vw, 4.8rem); }
  .sn-refer-actions, .sn-refer-button { width: 100%; }
  .sn-refer-section-head, .sn-refer-steps li, .sn-refer-care__inner { grid-template-columns: 1fr; }
  .sn-refer-section-head, .sn-refer-steps li { gap: .8rem; }
  .sn-refer-care__links { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-refer-button { transition: none; }
}