@font-face{font-family:Magnetik;src:url('/assets/fonts/Magnetik-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Magnetik;src:url('/assets/fonts/Magnetik-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Magnetik;src:url('/assets/fonts/Magnetik-Heavy.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}
:root{--benefit-green:#8cff01;--benefit-blue:#03b2ff;--benefit-black:#111600;--benefit-muted:#4c4c4c;--benefit-border:#eeeeee}
.benefits-public-page{margin:0;background:#f7f7f7;color:var(--benefit-black);font-family:Magnetik,Arial,sans-serif}
.benefits-public-main{overflow:hidden}
.benefits-container{width:min(1330px,calc(100% - 60px));margin:0 auto}
.benefits-hero{padding:78px 0 48px;background:#f7f7f7}
.benefits-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);gap:48px;align-items:end}
.benefits-eyebrow{margin:0 0 16px;color:var(--benefit-muted);font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.benefits-hero h1{max-width:840px;margin:0;color:var(--benefit-black);font-size:clamp(44px,6vw,82px);line-height:.96;font-weight:900;letter-spacing:0}
.benefits-hero p{max-width:680px;margin:24px 0 0;color:var(--benefit-muted);font-size:22px;line-height:1.32;font-weight:400}
.benefits-hero-note{border-left:5px solid var(--benefit-green);padding:12px 0 12px 24px;color:var(--benefit-black);font-size:19px;line-height:1.35;font-weight:400}
.benefits-list-section{padding:26px 0 88px;background:#f7f7f7}
.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.benefit-card{display:flex;min-height:100%;flex-direction:column;overflow:hidden;border:1px solid var(--benefit-border);border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(17,22,0,.08)}
.benefit-card-media{aspect-ratio:4/3;background:#eaffd8;overflow:hidden}
.benefit-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.benefit-card-body{display:flex;flex:1;flex-direction:column;padding:26px}
.benefit-card-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;color:#69705f;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.benefit-card h2{margin:0;color:var(--benefit-black);font-size:29px;line-height:1.06;font-weight:900;letter-spacing:0}
.benefit-card p{flex:1;margin:14px 0 24px;color:var(--benefit-muted);font-size:18px;line-height:1.35;font-weight:400}
.benefit-card button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;border:0;border-radius:7px;background:var(--benefit-green);color:var(--benefit-black);font:900 18px/1 Magnetik,Arial,sans-serif;cursor:pointer;padding:0 24px;text-decoration:none}
.benefit-card button:disabled{cursor:wait;opacity:.72}
.benefits-status{display:none;margin:0 0 22px;border:1px solid var(--benefit-border);border-radius:12px;background:#fff;padding:18px 20px;color:var(--benefit-muted);font-size:17px;line-height:1.35}
.benefits-status.is-visible{display:block}
.benefits-empty{display:none;border:1px solid var(--benefit-border);border-radius:16px;background:#fff;padding:32px;box-shadow:0 16px 38px rgba(17,22,0,.06)}
.benefits-empty.is-visible{display:block}
.benefits-empty h2{margin:0 0 10px;font-size:32px;line-height:1.08}
.benefits-empty p{margin:0;color:var(--benefit-muted);font-size:19px;line-height:1.35}
.benefits-how{padding:78px 0;background:#fff}
.benefits-how h2{max-width:760px;margin:0 0 32px;font-size:48px;line-height:1.08;font-weight:900}
.benefits-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefits-step{border:1px solid var(--benefit-border);border-radius:14px;background:#fff;padding:28px;box-shadow:0 10px 32px rgba(69,86,65,.07)}
.benefits-step strong{display:block;margin:0 0 12px;font-size:25px;line-height:1.1}
.benefits-step p{margin:0;color:var(--benefit-muted);font-size:18px;line-height:1.35}
@media(max-width:980px){.benefits-hero-grid,.benefits-grid,.benefits-steps{grid-template-columns:1fr}.benefits-hero-note{align-self:start}.benefits-container{width:min(100% - 36px,1330px)}}
@media(max-width:640px){.benefits-hero{padding:56px 0 32px}.benefits-list-section{padding-bottom:62px}.benefits-how{padding:58px 0}.benefits-hero p{font-size:19px}.benefit-card h2{font-size:25px}.benefits-how h2{font-size:36px}}
