/* Section 2 only. Cream, ink and faded team colors frame real Grail demos. */
.grail-focus{--focus-paper:#f7f4e9;--focus-ink:#14241d;--focus-ivy:#2f6b45;--focus-border:#ddd6c1;background:var(--focus-paper);color:var(--focus-ink);padding:48px max(20px,calc((100% - 1136px)/2));font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}
.grail-focus *{box-sizing:border-box}
.grail-focus__intro{max-width:760px;margin-bottom:28px}
.grail-focus h2{font-family:"Bricolage Grotesque",Inter,sans-serif;font-size:clamp(30px,3.6vw,50px);font-weight:800;line-height:1.06;letter-spacing:-1.6px;margin:0}
.grail-focus h2 span{color:var(--focus-ivy)}
.grail-focus__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grail-focus__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--focus-border);border-radius:20px;overflow:hidden;min-width:0;box-shadow:0 8px 20px #14241d06}
.grail-focus__image{position:relative;display:flex;justify-content:center;align-items:center;padding:16px 14px;overflow:hidden;background:#e1e8dd;border-top:1px dashed #14241d22;flex:none}
.grail-focus__image--scan{background:radial-gradient(ellipse at 50% 35%,#edf1e8,#dfe7da)}
.grail-focus__image--search{background:radial-gradient(ellipse at 50% 35%,#f6edce,#e9dbab)}
.grail-focus__image--sold{background:radial-gradient(ellipse at 50% 35%,#edf0f5,#d9e1eb)}
.grail-focus__image video{display:block;width:90%;max-width:none;height:auto;aspect-ratio:660/1434;object-fit:contain;background:var(--focus-paper);border:5px solid var(--focus-ink);border-radius:32px;box-shadow:0 10px 20px #14241d24}
.grail-focus__copy{flex:1;padding:20px 20px 24px}
.grail-focus h3{font-family:"Bricolage Grotesque",Inter,sans-serif;font-weight:700;font-size:25px;line-height:1.12;letter-spacing:-.65px;margin:0 0 10px}
.grail-focus__copy>p{font-size:15px;line-height:1.5;margin:0;color:#2c3d35}
.grail-focus__dots{display:none}
.grail-focus__track:focus-visible,.grail-focus__dots button:focus-visible{outline:3px solid var(--focus-ivy);outline-offset:4px}
@media(max-width:767px){
 .grail-focus{padding:32px 0}
 .grail-focus__intro{max-width:none;padding:0 20px;margin-bottom:18px}
 .grail-focus h2{font-size:32px;letter-spacing:-1.1px;line-height:1.08}
 .grail-focus__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:0 20px 12px;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch}
 .grail-focus__track::-webkit-scrollbar{display:none}
 .grail-focus__card{flex:0 0 calc(100% - 20px);scroll-snap-align:start}
 .grail-focus__image{padding:12px}
 .grail-focus__image video{max-width:none;border-radius:30px}
 .grail-focus__copy{padding:18px 18px 22px}
 .grail-focus h3{font-size:24px}
 .grail-focus__dots{display:flex;justify-content:center;gap:2px}
 .grail-focus__dots button{width:44px;height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;border-radius:50%;cursor:pointer}
 .grail-focus__dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#a0aa9e}
 .grail-focus__dots button[aria-pressed=true]::before{background:var(--focus-ivy);width:20px;border-radius:6px}
}
@media(prefers-reduced-motion:reduce){.grail-focus__track{scroll-behavior:auto}}

/* A centered invitation at rest; a quiet pause control while the demo runs. */
.grail-focus__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 18px;border:1px solid #1f4d31;border-radius:28px;background:var(--focus-ivy);color:var(--focus-paper);font:700 14px Inter,-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 4px 0 #1f4d31,0 8px 24px #14241d33;cursor:pointer;overflow:hidden;animation:grail-demo-nudge 7s infinite}
.grail-focus__play[hidden]{display:none}
.grail-focus__play:focus-visible{outline:3px solid var(--focus-ink);outline-offset:4px}
.grail-focus__play-icon{display:block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--focus-paper)}
.grail-focus__image.is-playing .grail-focus__play{top:auto;left:auto;right:12px;bottom:12px;transform:none;min-height:44px;padding:10px 14px;font-size:12px;animation:none}
.grail-focus__image.is-playing .grail-focus__play-icon{width:10px;height:12px;border:0;border-left:3px solid var(--focus-paper);border-right:3px solid var(--focus-paper)}

/* Selected option 3: a small nudge, then a soft light sweep. */
.grail-focus__play::before{content:"";position:absolute;pointer-events:none;inset:-50% auto -50% -80%;width:45%;background:linear-gradient(90deg,transparent,#ffffff4d,transparent);transform:skewX(-20deg);animation:grail-demo-shine 7s infinite;animation-delay:.9s}
.grail-focus__image.is-playing .grail-focus__play::before{display:none;animation:none}
@keyframes grail-demo-shine{0%,12%{left:-80%}28%,100%{left:150%}}
@keyframes grail-demo-nudge{0%,5%,17%,100%{transform:translate(-50%,-50%) rotate(0)}8%{transform:translate(calc(-50% - 2px),-50%) rotate(-2deg)}11%{transform:translate(calc(-50% + 2px),-50%) rotate(2deg)}14%{transform:translate(-50%,-50%) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.grail-focus__play,.grail-focus__play::before{animation:none}.grail-focus__play::before{display:none}}
