.ybag-stage { --stage-accent: var(--ybag-blue); --stage-soft: #edf6ff; color: var(--ink); background: var(--paper); }
.ybag-stage-pink { --stage-accent: var(--ybag-pink); --stage-soft: #fff0f6; }
.ybag-stage-gold { --stage-accent: var(--ybag-gold); --stage-soft: #fff8e6; }
.ybag-stage-green { --stage-accent: var(--ybag-green); --stage-soft: #f2f9e9; }
.ybag-stage-violet { --stage-accent: var(--ybag-violet); --stage-soft: #f6effc; }
.ybag-stage-frame { width: min(calc(100% - 48px), var(--ybag-frame)); margin-inline: auto; }
.ybag-stage .ybag-kicker { color: var(--stage-accent); }
.ybag-stage .ybag-button-primary { background: var(--stage-accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--stage-accent) 25%, transparent); }
.ybag-stage-hero { position: relative; overflow: hidden; padding: clamp(54px, 8vw, 108px) 0; background: linear-gradient(130deg, var(--panel) 0 62%, var(--stage-soft) 62%); }
.ybag-stage-hero::after { position: absolute; right: -120px; bottom: -220px; width: 520px; height: 520px; border: 60px solid color-mix(in srgb, var(--stage-accent) 10%, transparent); border-radius: 50%; content: ''; pointer-events: none; }
.ybag-stage-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: clamp(38px, 7vw, 92px); align-items: center; }
.ybag-stage .ybag-page-signal span { background: var(--stage-accent); }
.ybag-stage-hero h1 { max-width: 740px; margin: 0; color: var(--brand-dark); font-size: clamp(40px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.034em; }
.ybag-stage-lead { max-width: 760px; margin: 26px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 21px); line-height: 1.72; }
.ybag-stage-hero-side { display: grid; gap: 18px; }
.ybag-stage-reassurance { border: 1px solid color-mix(in srgb, var(--stage-accent) 30%, var(--line)); border-radius: 28px; padding: clamp(28px, 4vw, 42px); background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: var(--ybag-shadow); }
.ybag-stage-reassurance span { color: var(--stage-accent); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.ybag-stage-reassurance p { margin: 13px 0 0; color: var(--brand-dark); font: 800 clamp(19px, 2vw, 25px)/1.25 'Changa', Arial, sans-serif; }
.ybag-stage-switcher { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.ybag-stage-switcher .ybag-stage-frame { display: flex; overflow-x: auto; gap: 7px; padding-block: 13px; scrollbar-width: thin; }
.ybag-stage-switcher a { flex: 0 0 auto; border-radius: 999px; padding: 9px 14px; color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none; }
.ybag-stage-switcher a:hover { color: var(--brand-dark); background: var(--stage-soft); }
.ybag-stage-switcher a[aria-current='page'] { color: #fff; background: var(--stage-accent); }
.ybag-stage-focus, .ybag-stage-moments, .ybag-stage-principles, .ybag-stage-safety, .ybag-stage-next { padding: clamp(64px, 8vw, 108px) 0; }
.ybag-stage-heading { max-width: 790px; margin-bottom: 38px; }
.ybag-stage-heading h2, .ybag-stage-safety h2, .ybag-stage-next h2 { margin: 0; color: var(--brand-dark); font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -.035em; }
.ybag-stage-heading > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.7; }
.ybag-stage-heading-center { margin-inline: auto; text-align: center; }
.ybag-stage-focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ybag-stage-focus-grid article { min-height: 300px; border: 1px solid var(--line); border-top: 5px solid var(--stage-accent); border-radius: 20px; padding: 28px; background: var(--panel); box-shadow: 0 14px 36px rgba(20,43,92,.06); }
.ybag-stage-focus-grid article > span { color: color-mix(in srgb, var(--stage-accent) 70%, var(--muted)); font-size: 12px; font-weight: 900; }
.ybag-stage-focus-grid h3 { margin: 54px 0 10px; color: var(--brand-dark); font-size: 26px; line-height: 1.08; }
.ybag-stage-focus-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.ybag-stage-moments { background: var(--stage-soft); }
.ybag-stage-moments-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 7vw, 94px); align-items: start; }
.ybag-stage-moment-list { display: grid; gap: 12px; }
.ybag-stage-moment-list article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, var(--line)); border-radius: 18px; padding: 24px; background: var(--panel); }
.ybag-stage-moment-list article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: var(--stage-accent); font-size: 11px; font-weight: 900; }
.ybag-stage-moment-list p { margin: 0 0 5px; color: var(--stage-accent); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ybag-stage-moment-list h3 { margin: 0; color: var(--brand-dark); font-size: 22px; line-height: 1.2; }
.ybag-stage-moment-list small { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ybag-stage-principle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--ybag-shadow); }
.ybag-stage-principle-grid article { padding: 30px; border-right: 1px solid var(--line); }
.ybag-stage-principle-grid article:last-child { border: 0; }
.ybag-stage-principle-grid strong { color: var(--stage-accent); font: 800 26px/1.1 'Changa', Arial, sans-serif; }
.ybag-stage-principle-grid p { color: var(--muted); line-height: 1.6; }
.ybag-stage-safety { color: #fff; background: var(--brand-dark); }
.ybag-stage-safety-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(42px, 7vw, 100px); align-items: start; }
.ybag-stage-safety h2 { color: #fff; }
.ybag-stage-safety-grid > p { margin: 27px 0 0; color: #d9e5ff; font-size: 18px; line-height: 1.8; }
.ybag-stage-next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; border-radius: 28px; padding: clamp(34px, 5vw, 58px); background: linear-gradient(125deg, var(--stage-soft), var(--panel)); box-shadow: var(--ybag-shadow); }
.ybag-stage-next-card > div:first-child > p:last-child { max-width: 760px; color: var(--muted); line-height: 1.7; }
.ybag-stage-next-card > div:last-child { display: grid; gap: 14px; justify-items: center; text-align: center; }
.ybag-stage-next-card > div:last-child > a:last-child { color: var(--brand-dark); font-size: 13px; font-weight: 800; }
@media (max-width: 1060px) { .ybag-stage-focus-grid, .ybag-stage-principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ybag-stage-principle-grid article:nth-child(2) { border-right: 0; } .ybag-stage-principle-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 820px) { .ybag-stage-hero-grid, .ybag-stage-moments-layout, .ybag-stage-safety-grid, .ybag-stage-next-card { grid-template-columns: 1fr; } .ybag-stage-next-card > div:last-child { justify-items: start; text-align: left; } }
@media (max-width: 620px) { .ybag-stage-frame { width: min(calc(100% - 30px), var(--ybag-frame)); } .ybag-stage-hero { background: linear-gradient(155deg, var(--panel) 0 65%, var(--stage-soft) 65%); } .ybag-stage-hero h1 { font-size: 40px; } .ybag-stage-focus-grid, .ybag-stage-principle-grid { grid-template-columns: 1fr; } .ybag-stage-principle-grid article { border-right: 0; border-bottom: 1px solid var(--line); } .ybag-stage-focus-grid article { min-height: 0; } .ybag-stage-focus-grid h3 { margin-top: 34px; } .ybag-stage-moment-list article { grid-template-columns: 40px minmax(0, 1fr); padding: 20px; } }