/* A shared visual language for the three ways into Margins. */
.meadow-nav .brand{font-size:38px;letter-spacing:-1.7px}
.meadow-nav #site-wallet{font-size:16px;min-height:52px;padding:14px 25px;gap:11px;box-shadow:0 4px 18px #203a5020}
.meadow-nav #site-wallet img{width:25px;height:25px}
.meadow-tiles{gap:20px}
.meadow-tiles .meadow-tile{background:#fffffff5;border:1px solid #fff;border-radius:20px;padding:14px 14px 23px;gap:0;min-height:300px;box-shadow:0 12px 35px #12324a18}
.meadow-tiles .meadow-tile:hover{transform:translateY(-5px)}
.meadow-tiles .meadow-tile h3{font-size:19px;letter-spacing:-.035em;line-height:1.3;margin:19px 9px 0;color:#203b59}
.meadow-tiles .meadow-tile p{font-size:14px;padding:10px 28px 0 9px;margin-top:auto;color:#52677d}
.meadow-tiles .tile-arrow{right:22px;bottom:24px;color:#315c90}
.feature-art{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;height:170px;flex-shrink:0;background:#eaf0f8}
.feature-art::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,#adc8e788,transparent 68%);z-index:-1}
.meadow-tiles .tile-art{height:170px;margin:0;gap:0;padding:21px 30px 15px}
.meadow-tiles .tile-art img{height:128px;width:33%;object-fit:contain;filter:drop-shadow(0 10px 6px #18365735);transition:transform .3s ease}
.meadow-tiles .tile-art img:first-child{transform:translate(8px,5px) rotate(-13deg)}
.meadow-tiles .tile-art img:nth-child(2){transform:translateY(-5px);z-index:2}
.meadow-tiles .tile-art img:last-child{transform:translate(-8px,5px) rotate(13deg)}
.meadow-tile:hover .tile-art img:first-child{transform:translate(0,3px) rotate(-17deg)}
.meadow-tile:hover .tile-art img:last-child{transform:translate(0,3px) rotate(17deg)}
.feature-scan{background:#162b46;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}
.feature-scan::before{background:radial-gradient(ellipse at center,#5c98d563,transparent 70%)}
.meadow-tiles .scanner-visual{width:100%;height:170px;margin:0;position:relative}
.meadow-tiles .scanner-slab{position:absolute;left:50%;top:19px;width:81px;height:133px;transform:translateX(-50%) rotate(-5deg);background:transparent;border:0;border-radius:3px;overflow:visible;box-shadow:none}
.meadow-tiles .scanner-slab img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 8px 8px #0007)}
.meadow-tiles .scanner-visual>svg{position:absolute;inset:0;width:100%;height:100%;stroke:#a5cef8;stroke-width:1.5;fill:none;pointer-events:none}
.meadow-tiles .scanner-sweep{position:absolute;left:-14px;right:-14px;top:8%;height:2px;background:#c1e4ff;box-shadow:0 0 12px #b1dbff,0 -8px 22px #72b2ef77;animation:none!important;opacity:0}
.scan-signal{position:absolute;right:24px;top:69px;display:grid;gap:7px;width:38px}
.scan-signal i{height:4px;background:#afd4f2;border-radius:4px;width:100%;opacity:.75}.scan-signal i:nth-child(2){width:72%}.scan-signal i:nth-child(3){width:88%}
.feature-collection{display:flex;align-items:center;justify-content:center;background:#e6edf6}
.card-binder{position:relative;width:144px;height:132px;background:#345c8b;border:1px solid #24486f;border-radius:7px 12px 12px 7px;transform:rotate(7deg);box-shadow:5px 7px 0 #bccada,8px 14px 18px #18365730;padding:15px 15px 15px 26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card-binder::before{content:"";position:absolute;left:12px;top:0;bottom:0;border-left:1px solid #9cbbdc70}
.binder-pocket{background:#edf4fa;border:2px solid #f9fcff80;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.binder-pocket img{width:100%;height:100%;object-fit:contain}.binder-pocket:empty::after{content:"";width:14px;height:18px;border:1px solid #9ab1cb;border-radius:2px}
.card-binder{grid-template-rows:1fr 1fr}.meadow-tiles .scanner-sweep{border:0}
.binder-check{position:absolute;right:calc(50% - 88px);bottom:17px;border:4px solid #e6edf6;width:39px;height:39px;border-radius:50%;background:#315c90;color:white;display:grid;place-items:center;box-shadow:0 4px 9px #193e6320}
.binder-check svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@keyframes feature-scan{from{top:8%}to{top:94%}}
@media(max-width:820px){.meadow-nav .brand{font-size:34px}.meadow-nav #site-wallet{font-size:15px;padding:12px 19px;min-height:48px}.meadow-tiles .meadow-tile{padding:10px 10px 22px}.meadow-tiles .meadow-tile h3{font-size:17px}.meadow-tiles .tile-art{padding-inline:12px}.scan-signal{right:12px;width:25px}}
@media(max-width:580px){.meadow-tiles .meadow-tile{flex-basis:280px}.meadow-nav .brand{font-size:32px}.meadow-nav #site-wallet{font-size:14px;padding:12px 16px}.meadow-nav #site-wallet img{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.meadow-tiles .tile-art img{transition:none}}

.meadow-nav nav .header-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:7px;margin:-5px -5px -5px 1px;border-left:1px solid #315c9025;border-radius:0 18px 18px 0;color:#1b304c;transition:background .2s}
.meadow-nav .header-x svg{width:17px;height:17px;fill:currentColor}.meadow-nav .header-x:hover{background:#dce8f5}.meadow-nav .header-x:focus-visible{outline:2px solid #315c90;outline-offset:3px}

/* Reuse the card scanner's luminous sweep only on intentional interaction. */
.meadow-tiles .scanner-sweep{top:6%;height:3px;background:linear-gradient(90deg,#338bee,#e3f6ff,#338bee);box-shadow:0 0 14px #3198ff,0 0 28px #3198ff80;pointer-events:none}
.meadow-tiles .scanner-sweep::before{content:'';position:absolute;bottom:3px;left:0;width:100%;height:35px;background:linear-gradient(transparent,#73b6f566)}
.meadow-tiles .scanner-tile:is(:hover,:focus-visible) .scanner-sweep{opacity:1;animation:feature-scan 1.2s ease-in-out infinite alternate!important}
/* Opaque surfaces avoid re-blurring the playing scenery on every frame. */
.meadow-tiles .meadow-tile{backdrop-filter:none;background:#f9fbfd}
.meadow-nav nav{backdrop-filter:none;background:#eff5fa}
.meadow-actions .translucent{backdrop-filter:none}