/**
 * Subscribe page — animated hero platform mockup (.ch-pm).
 *
 * Loaded only on the Subscribe page, under its own handle, because the shared
 * design-system stylesheet (handle "foodeshow-core") is provided by the
 * FoodEshow Widgets plugin, not the theme — so theme-side additions to that
 * file never reach the front end. Colour tokens (--forest, --line, …) come
 * from that plugin stylesheet, which loads first.
 *
 * Motion: one sequential "build" timeline that loops. Each part enters in
 * order — window → search → document (bars fill) → chips → live panel
 * (dot + avatars) — holds, then clears and replays. Driven by one shared
 * cycle length so the whole choreography stays in step.
 */

.ch-pm{position:relative;width:100%;aspect-ratio:5/4.2;font-size:clamp(11px,1.25vw,14px);color:var(--ink);--pm-cycle:6s}

/* --- static layout --- */
.ch-win{position:absolute;inset:0;border-radius:var(--r-lg);background:linear-gradient(155deg,#fff,var(--paper-2));border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(28,40,22,.55),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
.ch-win::before{content:"";position:absolute;top:0;left:0;right:0;height:2.7em;background:rgba(238,241,230,.7);border-bottom:1px solid var(--line)}
.ch-win::after{content:"";position:absolute;top:1em;left:1.2em;width:.62em;height:.62em;border-radius:50%;background:#e07b6a;box-shadow:1em 0 0 #e2b23c,2em 0 0 #5bbd63}
.ch-pane{position:absolute;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid var(--line);border-radius:1em;padding:.95em 1.05em;box-shadow:0 20px 44px -24px rgba(28,40,22,.5);display:flex;flex-direction:column;gap:.6em}
.ch-pane--search{left:7%;top:12%;width:72%;flex-direction:row;align-items:center;gap:.7em;border-radius:100px;padding:.78em 1.1em;color:var(--ink-soft);font-weight:600}
.ch-pane--doc{left:5%;top:34%;width:53%}
.ch-pane--front{left:45%;top:56%;width:48%}
.ch-glyph{width:1.35em;height:1.35em;flex:none;color:var(--forest)}
.ch-pm__placeholder{font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-pm__row{display:flex;align-items:center;gap:.6em}
.ch-pm__accent{color:var(--grass)}
.ch-pm__lines{display:flex;flex-direction:column;gap:.42em;flex:1}
.ch-bar{display:block;height:.62em;border-radius:100px;background:var(--line)}
.ch-bar--ink{background:var(--forest);opacity:.85}
.ch-bar--soft{background:var(--line)}
.ch-pm__chip{display:inline-flex;align-items:center;gap:.4em;font-size:.82em;font-weight:600;color:var(--forest);background:rgba(57,181,74,.12);border-radius:100px;padding:.35em .7em;transform-origin:left}
.ch-pm__chip iconify-icon{font-size:1.1em}
.ch-pm__dot{width:.7em;height:.7em;border-radius:50%;background:var(--line);flex:none}
.ch-pm__dot--on{background:var(--grass)}
.ch-pm__label{font-size:.9em;font-weight:700;color:var(--charcoal)}
.ch-pm__faces{display:inline-flex}
.ch-pm__faces i{width:1.7em;height:1.7em;border-radius:50%;border:2px solid #fff;margin-left:-.55em;background:linear-gradient(135deg,var(--fresh),var(--grass))}
.ch-pm__faces i:first-child{margin-left:0}
.ch-pm__faces i:nth-child(2){background:linear-gradient(135deg,var(--peach),var(--orange))}
.ch-pm__faces i:nth-child(3){background:linear-gradient(135deg,var(--mint),var(--teal))}

/* --- sequential build timeline (loops) --- */
.ch-win{opacity:0;animation:pm-win var(--pm-cycle) ease-in-out infinite}
.ch-pane{opacity:0}
.ch-pane--search{animation:pm-search var(--pm-cycle) ease-in-out infinite}
.ch-pane--doc{animation:pm-doc var(--pm-cycle) ease-in-out infinite}
.ch-pane--front{animation:pm-front var(--pm-cycle) ease-in-out infinite}
.ch-bar{transform:scaleX(0);transform-origin:left}
.ch-pm__lines .ch-bar{animation:pm-bar var(--pm-cycle) ease-out infinite}
.ch-pane--doc>.ch-bar{animation:pm-bar2 var(--pm-cycle) ease-out infinite}
.ch-pane--front .ch-bar{animation:pm-bar3 var(--pm-cycle) ease-out infinite}
.ch-pm__chip{opacity:0;transform:scale(.6);animation:pm-chip var(--pm-cycle) ease-out infinite}
.ch-pm__faces i{opacity:0;transform:scale(0);animation:pm-face var(--pm-cycle) ease-out infinite}
.ch-pm__dot--on{animation:pm-front var(--pm-cycle) ease-in-out infinite,ch-pulse 2.2s ease-out infinite}

@keyframes pm-win{0%{opacity:0;transform:scale(.96)}4%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}}
@keyframes pm-search{0%,7%{opacity:0;transform:translateY(-1.2em)}13%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-1.2em)}}
@keyframes pm-doc{0%,15%{opacity:0;transform:translateY(1.4em)}21%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(1.4em)}}
@keyframes pm-front{0%,49%{opacity:0;transform:translateY(1.4em)}56%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(1.4em)}}
@keyframes pm-bar{0%,24%{transform:scaleX(0)}31%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pm-bar2{0%,31%{transform:scaleX(0)}40%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pm-bar3{0%,60%{transform:scaleX(0)}68%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pm-chip{0%,40%{opacity:0;transform:scale(.6)}47%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
@keyframes pm-face{0%,58%{opacity:0;transform:scale(0)}68%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
@keyframes ch-pulse{0%{box-shadow:0 0 0 0 rgba(57,181,74,.5)}70%{box-shadow:0 0 0 .8em rgba(57,181,74,0)}100%{box-shadow:0 0 0 0 rgba(57,181,74,0)}}

@media(max-width:600px){.ch-pm{aspect-ratio:5/4.6;font-size:13px}}
@media(prefers-reduced-motion:reduce){
	.ch-win,.ch-pane{opacity:1 !important;transform:none !important;animation:none !important}
	.ch-bar{transform:scaleX(1) !important;animation:none !important}
	.ch-pm__chip,.ch-pm__faces i{opacity:1 !important;transform:none !important;animation:none !important}
	.ch-pm__dot--on{animation:none !important}
}

/* "What you get, whichever plan you pick." benefit cards.
 * These card rules live only in the theme's foodeshow.css, which the plugin's
 * same-handle stylesheet overrides — so they never load. Ship them here. */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.benefits.cols-4{grid-template-columns:repeat(4,1fr)}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.benefit .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:25px;margin-bottom:18px;background:var(--paper-2);color:var(--forest)}
.benefit h3{font-size:21px}
.benefit p{color:var(--ink-soft);font-size:15px;margin-top:10px;font-weight:500}
@media(max-width:900px){.benefits,.benefits.cols-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.benefits,.benefits.cols-4{grid-template-columns:1fr}}