.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.action-card{border:1px solid #285b47;border-radius:20px;background:#0a2119;padding:18px;min-width:0}.action-card h2{font-size:21px;margin:8px 0}.action-card p{color:#b7c6bf;font-size:14px}.action-card a{color:#a9ef88}.action-art{width:100%;height:115px;object-fit:contain}.install-box{margin:24px 0;padding:16px;border:1px solid #285b47;border-radius:16px}.install-box button{background:#7ed957;color:#06130f;padding:10px;border:0;border-radius:9px;cursor:pointer}.collection-mark{border-left:4px solid #7ed957;padding:16px;background:#0a2119;margin:16px 0}.collection-mark.locked{border-color:#789087}@media(max-width:370px){.action-grid{grid-template-columns:1fr}}
.action-card{position:relative;overflow:hidden;min-height:370px;padding:0;display:flex;align-items:flex-end;background:#234d38}.action-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.action-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(6,25,17,.3) 42%,rgba(6,25,17,.95) 78%)}.action-copy{position:relative;z-index:1;padding:20px;width:100%}.action-copy p{color:#e0eadd;line-height:1.5}.action-copy h2{color:#fff}.action-copy a{display:inline-block;font-weight:800;padding:8px 0}.action-copy .badge{background:#143927;color:#c5f3a7}@media(max-width:520px){.action-card{min-height:360px}.action-copy{padding:15px}.action-copy h2{font-size:20px}.action-copy p{font-size:13px}}
/* Match the spacing of the home-screen guide for supporting sections. */
.wrap > .day{margin:24px 0;padding:24px}.wrap > .day h2{margin:0 0 12px}.wrap > .day p{line-height:1.65}.install-box{padding:24px}.install-box h2{margin:0 0 12px}

.action-intro{display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px,4vw,56px);margin:24px 0 32px}.action-intro>div:first-child{min-width:0}.action-intro h1{font-size:clamp(38px,5.5vw,64px);line-height:1.05;letter-spacing:-.045em;margin:14px 0 0}.action-intro .eyebrow{font-size:12px;margin:0}.action-lead{color:#b7c6bf;font-size:14px;line-height:1.65;margin:18px 0 0}.action-mascot{width:220px;flex:0 0 220px;transform:translateY(24px)}.action-mascot img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}@media(max-width:600px){.action-intro{gap:16px;margin-bottom:24px}.action-intro h1{font-size:clamp(29px,7vw,40px)}.action-mascot{width:110px;flex-basis:110px;transform:translateY(12px)}.action-lead{font-size:13px}}@media(max-width:380px){.action-mascot{width:84px;flex-basis:84px}.action-intro .eyebrow{font-size:9px}}
/* Ground the cycling mascot without changing the transparent illustration. */
.action-mascot{position:relative;isolation:isolate}.action-mascot::after{content:"";position:absolute;z-index:-1;left:9%;right:9%;bottom:-5px;height:15px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 48%,transparent 74%);filter:blur(3px);pointer-events:none}@media(max-width:600px){.action-mascot::after{bottom:-3px;height:9px;filter:blur(2px)}}
/* Align the copy independently from the illustration and corner number. */
.action-card>.badge{position:absolute;top:16px;left:16px;z-index:2;padding:6px 10px;border-radius:7px;background:rgba(247,244,228,.88);color:#284633;border:1px solid rgba(255,255,255,.32);font-size:10px;line-height:1.2;font-weight:750;letter-spacing:.13em;backdrop-filter:blur(5px);max-width:calc(100% - 32px)}
.action-copy h2{min-height:2.4em;line-height:1.2;display:flex;align-items:flex-end;margin:0 0 12px}.action-description{height:3.3em;line-height:1.65;margin:0 0 12px}.action-description span{display:block;white-space:nowrap}.action-copy a{margin:0;line-height:1.5}.action-copy{padding:20px}
@media(max-width:600px){.action-grid{grid-template-columns:1fr}.action-card{min-height:370px}.action-description{font-size:13px}.action-card>.badge{top:14px;left:14px}.action-copy{padding:20px}}
/* The Journey opening palette returns to full colour only after approval. */
.action-card .action-art{filter:saturate(.2) brightness(.8);transition:filter 1.2s ease}.action-card.is-lit .action-art{filter:saturate(1) brightness(1)}@media(prefers-reduced-motion:reduce){.action-card .action-art{transition:none}}
/* Preview colour without changing approval or collection state. */
@media(hover:hover) and (pointer:fine){.action-card:hover .action-art{filter:saturate(1) brightness(1)}}
.action-card:focus-within .action-art{filter:saturate(1) brightness(1)}