.participation-button{background:#245e63!important;color:#fff!important;border-color:#245e63!important;gap:.6rem}.participation-button:hover{background:#174b51!important;color:#fff!important}.participation-invitation{margin-top:1.5rem}body[data-page=participation]{--participation-petrol:#245e63;--participation-coral:#cf725b}body[data-page=participation] .eyebrow{color:#245e63}.participation-hero{background:#e6efeb;position:relative;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:3rem}.participation-art{text-align:center;color:#245e63;padding:2rem;border-radius:50% 40% 48% 38%;background:#f6e3d7}.participation-art>span{font-size:clamp(4rem,8vw,8rem);font-weight:700}.participation-art svg{width:75%;fill:none;stroke:#245e63;stroke-width:2;stroke-linecap:round}.participation-art p{font-weight:600}.participation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.participation-grid article{padding:2rem;background:#fff;border-top:3px solid #cf725b}.participation-symbol{color:#245e63;font-weight:700;font-size:1.6rem}.participation-safe{background:#f3e3d8;border-radius:1rem}.participation-steps{padding-left:1.5rem;max-width:850px}.participation-steps li{padding-left:.5rem;margin-bottom:1.3rem}.participation-details{margin-top:2rem;border-top:1px solid #bad0cc;padding-top:1rem}.participation-details summary{cursor:pointer;font-weight:600;color:#245e63}.participation-form-section{background:#e6efeb;border-radius:1rem}#participation-message{white-space:pre-line}.youth-panel .participation-button{background:#245e63!important}.participation-form-section .partner-form{max-width:850px}@media(max-width:760px){.participation-hero{grid-template-columns:1fr}.participation-art{max-width:320px;margin:auto}.participation-grid{grid-template-columns:1fr}}

.participation-art:has(.participation-gold-logo){background:transparent;padding:0}.participation-gold-logo{display:block;width:100%;max-width:400px;height:auto;border-radius:50%;margin:0 auto;box-shadow:0 8px 30px rgba(160,124,43,.08)}

/* Petrol and silver invitation buttons, paired with the gold partnership buttons. */
main .button.participation-button{background:linear-gradient(135deg,#245e63,#153f48)!important;color:#edf1f4!important;border:1px solid #bdc9d2!important;border-radius:4px;padding:.85rem 1.2rem;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 8%),0 3px 12px rgb(21 63 72 / 14%);font-weight:650;gap:.65rem;line-height:1.5;max-width:100%;text-align:left;transition:background .22s ease,box-shadow .22s ease,transform .22s ease}
main .button.participation-button:hover{background:linear-gradient(135deg,#31777d,#1e5360)!important;color:#fff!important;border-color:#f0f4f7!important;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 14%),0 5px 16px rgb(21 63 72 / 22%)}
main .button.participation-button:focus-visible{outline:2px solid #245e63;outline-offset:4px}
.participation-jump-button{display:flex;width:fit-content;margin-top:.8rem}
#nuoret-mukaan{scroll-margin-top:7rem}
.participation-form-section button.participation-button{font-size:1.08rem;padding:.85rem 1.35rem;min-height:72px}
.messenger-pigeon{width:64px;height:52px;flex-shrink:0;overflow:visible}
.participation-gold-logo{border-radius:0;box-shadow:none;background:none}
.participation-graffiti{display:block;width:90%;max-width:350px;height:auto;margin:.8rem auto 0}
@media(prefers-reduced-motion:reduce){main .button.participation-button{transition:none}}

/* Bright, reflective chrome edges and a sculpted sprout for every petrol invitation. */
main .button.participation-button{border:3px solid transparent!important;border-radius:7px;background:linear-gradient(135deg,#245e63,#153f48) padding-box,linear-gradient(135deg,#fff 0%,#b3c7d5 20%,#fff 34%,#7795aa 48%,#f9fdff 55%,#b6cbd9 76%,#fff 100%) border-box!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / 21%),0 0 0 1px #90a9b9,0 5px 16px rgb(21 63 72 / 23%);gap:.75rem;padding:.8rem 1.15rem;color:#f6fcff!important}
main .button.participation-button:hover{border:3px solid transparent!important;background:linear-gradient(135deg,#31777d,#1e5360) padding-box,linear-gradient(135deg,#fff 0%,#d2e1ec 22%,#fff 40%,#a6c0d1 58%,#fff 80%,#ccdfe9 100%) border-box!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / 28%),0 0 0 1px #c3d7e3,0 6px 20px rgb(21 63 72 / 29%)}
.chrome-sprout{display:block;width:44px;height:44px;flex:0 0 44px;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 18%))}
.participation-label{color:#edf6fc;text-shadow:0 1px 1px #0e343c;line-height:1.45}
@supports(background-clip:text){.participation-label{background:linear-gradient(180deg,#fff 0%,#d8e6ef 35%,#fff 48%,#bdcfdb 57%,#f3fbff 77%,#fff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px #12363e)}}
@media(max-width:480px){main .button.participation-button{gap:.55rem;padding:.8rem .9rem}.chrome-sprout{width:38px;height:38px;flex-basis:38px}.participation-form-section button.participation-button{gap:.5rem}.messenger-pigeon{width:54px;height:44px}}

/* Equal columns and equal grid rows keep the paired invitations symmetric, even when labels wrap. */
.ripari-invite-actions{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:.85rem;width:100%;max-width:38rem;margin-top:1.25rem}
main .ripari-invite-actions>a.button{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;width:100%;height:100%;min-height:78px;margin:0;padding:.8rem 1.15rem;font-size:1rem;line-height:1.45;border-radius:7px;gap:.75rem}
main .ripari-invite-actions>a.partnership-invite-button{border-width:3px}
.ripari-invite-actions .partnership-link-icon{width:44px;height:44px;flex:0 0 44px;margin:0}
@media(max-width:480px){main .ripari-invite-actions>a.button{padding:.8rem .9rem;gap:.55rem}.ripari-invite-actions .partnership-link-icon{width:38px;height:38px;flex-basis:38px}}

/* Home invitations: equal side-by-side cards, stacked on narrow screens. */
body[data-page="home"] .home-invite-actions{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
@media(max-width:680px){body[data-page="home"] .home-invite-actions{grid-template-columns:minmax(0,1fr)}}
