/* The order page, GET /ads (features/dfy/pages.mjs adsPage). Tokens from mobile-tokens.css, recipes from journey.css;
   the form and its pieces keep their orders.css look. It opens on three ads playing, then their ad beside ours, one ad
   with its beats lit in time, the folder that gets delivered, and the order. Motion: public/order-page.js plays a video
   only while it is on screen; reduced motion plays nothing until tapped. Phone first; two columns from 64rem. */
.ads-page.op{display:flex;flex-direction:column;max-width:none;width:min(100% - 32px,1180px);margin:0 auto;padding:12px 0 calc(112px + env(safe-area-inset-bottom));gap:76px}
.ads-page.op>*{animation:none}
.op h2{font-size:var(--text-title);letter-spacing:var(--track-title);line-height:1.1;text-wrap:balance}
.op p{text-wrap:pretty}
.op .journey-primary>svg{width:32px;height:32px;stroke-width:2.4;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.op-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.op-head p{color:var(--muted);font-size:1rem;line-height:1.5;max-width:40em}
.op-eyebrow{font-size:var(--text-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}

/* ---------- hero: the headline, the three ads, the price ---------- */
.op-hero{display:flex;flex-direction:column;gap:18px}
.op-hero-top{display:flex;flex-direction:column;gap:10px;animation:rise var(--dur-enter) var(--ease-out) both}
.op-hero h1{font-size:2.25rem;letter-spacing:var(--track-display);line-height:1.02;text-wrap:balance}
.op-hero-copy{display:flex;flex-direction:column;gap:14px;animation:rise var(--dur-enter) var(--ease-out) 100ms both}
.op-hero-copy .ads-price{margin-top:0}
.op-cta{margin-top:2px}

/* The three ads: a row that scrolls sideways on a phone, the lead ad first; side by side from 64rem, the lead raised. */
.op-trio{margin:0 -16px;display:flex;flex-direction:column;gap:10px;animation:rise var(--dur-enter) var(--ease-out) 50ms both}
.op-trio-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:8px 16px 6px;scrollbar-width:none}
.op-trio-row::-webkit-scrollbar{display:none}
.op-ad{flex:none;width:min(60vw,250px);display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}
.op-ad.is-lead{order:-1}
.op-ad-label{position:relative;z-index:1;font-size:.8125rem;line-height:1.3;color:var(--muted);text-align:center}.op-ad-label b{color:var(--ink);font-weight:800}
.op-demo{padding:0 16px;font-size:.8125rem;line-height:1.45;color:var(--faint)}

/* One ad, framed like a post: 9:16, a progress line, the brand's handle, a sound switch. */
.op-phone{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:22px;background:var(--media-bg,#0d0f11);box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-2);cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate}
.op-phone::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);pointer-events:none}
.is-lead .op-phone{box-shadow:0 0 0 1.5px var(--accent-ring),var(--elev-3),var(--glow-accent)}
.op-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-bar{position:absolute;left:10px;right:10px;top:9px;z-index:2;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.op-bar i{display:block;height:100%;background:#fff;transform-origin:left center;transform:scaleX(0)}
.op-handle{position:absolute;left:10px;bottom:13px;z-index:2;display:flex;align-items:center;gap:7px;max-width:calc(100% - 64px);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);line-height:1.1}
.op-handle i{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#c9c4be;color:#2a2a2a;font-style:normal;font-size:.6875rem;font-weight:800;text-shadow:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.op-handle b{display:block;font-size:.75rem;font-weight:800}.op-handle small{display:block;font-size:.625rem;opacity:.85}
.op-sound{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-release) var(--ease-press),background var(--dur-hover)}
.op-sound::before{content:'';position:absolute;inset:-6px}
.op-sound:active{transform:scale(.92);transition-duration:var(--dur-micro)}
.op-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.op-sound .i-on,.op-sound[aria-pressed=true] .i-off{display:none}.op-sound[aria-pressed=true] .i-on{display:block}
.op-sound[aria-pressed=true]{background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--btn-primary)}
.op-phone.is-paused::before{content:'';position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--glass-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4f1ee' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1)}

/* ---------- their ad, ours, and what changed ---------- */
.op-ba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"before after" "diff diff";gap:22px 14px;align-items:center}
.op-ba-card{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.op-ba-card.is-before{grid-area:before}.op-ba-card.is-after{grid-area:after}
.op-ba-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-2);filter:saturate(.85) brightness(.92)}
.op-ba-card figcaption{position:relative;z-index:1;font-size:.8125rem;font-weight:700;color:var(--muted)}
.is-after figcaption{color:var(--ink)}
.is-after .op-phone{box-shadow:0 0 0 1.5px var(--accent-ring),var(--elev-3),var(--glow-accent)}
.op-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1);font-size:.6875rem;font-weight:800;line-height:1.4;white-space:nowrap}
.op-tag i{width:7px;height:7px;border-radius:50%;background:#ffc24b;box-shadow:0 0 0 3px rgba(255,194,75,.2)}
.op-tag.is-new{background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--btn-primary)}.op-tag.is-new i{background:var(--on-accent);box-shadow:none}
.op-diff{grid-area:diff;list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.op-diff li{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1.2fr);align-items:center;gap:10px;padding:13px 16px;font-size:.9375rem;line-height:1.3}
.op-diff li+li{box-shadow:inset 0 1px 0 var(--line)}
.op-diff .op-was{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.op-diff b{font-weight:800}
.op-diff svg{width:18px;height:18px;fill:none;stroke:var(--link);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- one ad, beat by beat ---------- */
.op-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 20px;padding:2px 16px;scrollbar-width:none}
.op-tabs::-webkit-scrollbar{display:none}
.op-tabs button{flex:none;min-height:40px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:var(--grad-raised);box-shadow:var(--btn-secondary);color:var(--muted);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:color var(--dur-hover),box-shadow var(--dur-hover)}
.op-tabs button[aria-pressed=true]{color:var(--ink);background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent-ring)}
.op-why-grid{display:flex;flex-direction:column;gap:20px}
.op-why-player{width:min(64vw,260px);align-self:center}
.op-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.op-beats button{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;width:100%;padding:12px 14px;border:0;border-radius:16px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background var(--dur-hover)}
.op-beats time{font-size:.8125rem;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:2px}
.op-beats b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.op-beats span span{display:block;margin-top:4px;color:var(--muted);font-size:.9375rem;line-height:1.45}
.op-beats small{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:.75rem;font-weight:700;color:var(--muted)}
.op-beats button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,0));opacity:0}
.op-beats .is-on button{background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.op-beats .is-on time{color:var(--link)}.op-beats .is-on button::after{opacity:1}
.op-beats .is-on small{background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(255,121,74,.3);color:var(--ink)}
/* With the script running, only the lit beat says why: the list stays short enough to read beside the ad. */
.op-js .op-beats li:not(.is-on) span span,.op-js .op-beats li:not(.is-on) small{display:none}
.op-js .op-beats li:not(.is-on) b{color:var(--muted);font-weight:700}

/* ---------- what you send, what you get ---------- */
.op-deal-grid{display:grid;gap:14px;align-items:start}
.op-send,.op-get{display:flex;flex-direction:column;gap:12px;padding:22px 18px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.op-send>p:last-child,.op-get>p:last-child{color:var(--muted);font-size:.9375rem;line-height:1.5}
.op-mock{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--radius-control);background:var(--bg-deep);box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px var(--line-strong)}
.op-mock span{font-size:.75rem;font-weight:700;color:var(--muted)}.op-mock b{font-size:1rem;font-weight:700}
.op-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.op-files li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center;padding:9px 0}
.op-files li+li{box-shadow:inset 0 1px 0 var(--line)}
.op-files svg{grid-row:span 2;width:20px;height:20px;fill:none;stroke:var(--link);stroke-width:1.8;stroke-linejoin:round}
.op-files span{font-size:.875rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.op-files small{font-size:.75rem;color:var(--muted)}

/* ---------- the order ---------- */
.op-order{display:flex;flex-direction:column;gap:28px;scroll-margin-top:12px}
.op-order-form{display:flex;flex-direction:column;gap:14px}
.op-order-side{display:flex;flex-direction:column;gap:16px}
.op-promises{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.op-promises li{position:relative;padding-left:34px;color:var(--muted);line-height:1.5}
.op-promises b{color:var(--ink)}
.op-promises li::before{content:'';position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(255,121,74,.3)}
.op-promises li::after{content:'';position:absolute;left:7px;top:7px;width:8px;height:5px;border-left:2px solid var(--link);border-bottom:2px solid var(--link);transform:rotate(-45deg)}
#order{scroll-margin-top:12px}

/* ---------- questions ---------- */
.op-faq{display:flex;flex-direction:column}
.op-faq h2{margin-bottom:10px}
.op-faq details{box-shadow:inset 0 1px 0 var(--line)}
.op-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;line-height:1.35;cursor:pointer;list-style:none}
.op-faq summary::-webkit-details-marker{display:none}
.op-faq summary::after{content:'+';flex:none;font-size:1.375rem;font-weight:500;color:var(--muted);transition:transform var(--dur-hover) var(--ease-out)}
.op-faq details[open] summary::after{transform:rotate(45deg)}
.op-faq details p{padding:0 0 18px;color:var(--muted);line-height:1.6}

/* ---------- the phone's order bar, once the hero's button has scrolled away ---------- */
.op-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-nav,20);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:var(--radius-pill);background:rgba(17,19,21,.78);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08),0 -8px 30px rgba(0,0,0,.35);transition:transform var(--dur-sheet) var(--ease-sheet),opacity var(--dur-hover)}
.op-dock[hidden]{display:flex;transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
.op-dock p{font-size:.875rem;color:var(--muted);line-height:1.2}.op-dock b{color:var(--ink);font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}
.op-dock .journey-primary{width:auto;min-height:46px;padding:8px 18px;font-size:1rem}
.op-dock .journey-primary>svg{width:28px;height:28px;padding:7px}

@media (prefers-reduced-motion:reduce){.op-hero-top,.op-hero-copy,.op-trio{animation:none}.op-dock{transition:opacity var(--dur-hover)}.op-dock[hidden]{transform:none}}

@media (min-width:40rem){
 .op-deal-grid{grid-template-columns:1fr 1fr}
 .op-ba-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:640px}
}
@media (min-width:64rem){
 .ads-page.op{gap:112px;padding-top:28px}
 .op h2{font-size:var(--text-heading)}
 .op-head{margin-bottom:34px}
 .op-head p{font-size:1.0625rem}
 .op-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"top trio" "copy trio";column-gap:64px;row-gap:22px;align-items:start}
 .op-hero-top{grid-area:top;align-self:end}
 .op-hero h1{font-size:var(--text-desktop)}
 .op-hero-copy{grid-area:copy;max-width:480px}
 .op-hero-copy .ads-lead{font-size:1.125rem}
 .op-cta{width:auto;align-self:flex-start;padding:12px 16px 12px 28px}
 .op-trio{grid-area:trio;margin:0;align-self:center}
 .op-trio-row{overflow:visible;justify-content:center;align-items:center;gap:16px;padding:0}
 .op-ad{width:176px}.op-ad.is-lead{order:0;width:214px}
 .op-demo{padding:0;text-align:center}
 .op-ba-grid{max-width:none;grid-template-columns:230px minmax(0,1fr) 230px;grid-template-areas:"before diff after";gap:40px}
 .op-diff li{padding:18px 24px;font-size:1.0625rem}
 .op-why-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:center}
 .op-why-player{width:auto}
 .op-tabs{margin:0 0 30px;padding:2px 0}
 .op-beats button{padding:16px 20px;grid-template-columns:52px minmax(0,1fr)}
 .op-beats b{font-size:1.125rem}
 .op-send,.op-get{padding:30px 28px}
 .op-order{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:72px;align-items:start}
 .op-order-form{grid-column:2;grid-row:1}
 .op-order-side{grid-column:1;grid-row:1;padding-top:24px}
 .op-faq{max-width:760px}
 .op-dock{display:none!important}
}