/* =====================================================================
   ADVERTISE PAGE ONLY. Built from site.css tokens; nothing here
   redefines a shared component, it only adds page modules.
   ===================================================================== */

/* ---------- hero ---------- */
.adv-hero__grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px, 4vw, 64px); align-items:center; padding-bottom:clamp(36px, 4.4vw, 64px)}
.adv-hero h1{font-size:clamp(58px, 7.4vw, 120px); line-height:.86}
.adv-hero__sub{margin-top:24px; max-width:46ch; font-size:clamp(16px, 1.5vw, 19px); font-weight:500; color:var(--on-orange-muted)}
.adv-hero__sub b{color:var(--ink)}
.adv-hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* collage: TV frame + phone + spinning sticker */
.collage{position:relative; width:100%; max-width:600px; margin-left:auto; aspect-ratio:1/.9}
.collage__tv{position:absolute; left:0; top:7%; width:86%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--frame); transform:rotate(-2.5deg); animation:advFloat 7s ease-in-out infinite}
.collage__tv img{width:100%; height:100%; object-fit:cover}
.collage__tv::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 55%, rgba(0,0,0,.6)), repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px)}
.collage__phone{position:absolute; right:1%; bottom:0; width:40%; transform:rotate(5deg); animation:advFloat 6s ease-in-out -2s infinite}
.collage .sticker{position:absolute; left:6%; bottom:0; width:clamp(112px, 10vw, 150px); margin:0; z-index:3}
.collage .sticker__ring text{font-size:15px; letter-spacing:2.2px}
@keyframes advFloat{50%{translate:0 -8px}}

/* broadcast lower third */
.lower-third{position:absolute; z-index:2; left:14px; right:14px; bottom:14px; display:flex; align-items:stretch; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.lower-third__tag{display:flex; align-items:center; padding:7px 10px 6px; background:var(--yellow); color:var(--ink); font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; white-space:nowrap}
.lower-third__name{flex:1; display:block; align-self:stretch; padding:8px 12px 5px; background:rgba(11,11,11,.9); color:var(--text); font-family:var(--font-display); font-size:clamp(18px, 1.6vw, 24px); line-height:1; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lower-third__name em{font-style:normal; color:var(--juice)}

/* phone mock (code drawn) */
.phone{position:relative; color:var(--text); aspect-ratio:9/18.6; border-radius:34px; background:#000; padding:7px; box-shadow:0 0 0 3px var(--ink), 7px 7px 0 3px var(--ink), 0 30px 60px -24px rgba(0,0,0,.7)}
.phone__screen{position:relative; height:100%; border-radius:28px; overflow:hidden; background:var(--ink-2); display:flex; flex-direction:column}
.phone__screen::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 47%, rgba(255,241,116,.10) 52%, transparent 64%); background-size:260% 100%; animation:advSheen 6s ease-in-out infinite}
@keyframes advSheen{0%,20%{background-position:120% 0}70%,100%{background-position:-60% 0}}
.phone__notch{position:absolute; z-index:3; top:8px; left:50%; width:34%; height:14px; margin-left:-17%; border-radius:99px; background:#000}
.ig-head{display:flex; align-items:center; gap:8px; padding:30px 10px 8px}
.ig-head img{width:26px; height:26px; border-radius:50%; flex:none; box-shadow:0 0 0 2px var(--juice)}
.ig-head b{display:flex; align-items:center; gap:4px; font-size:11px; line-height:1.1}
.ig-head b svg{width:11px; height:11px; color:#4aa3ff}
.ig-head span{display:block; font-size:9.5px; color:var(--muted); line-height:1.2; margin-top:2px}
.ig-media{position:relative; flex:1; min-height:0; overflow:hidden}
.ig-media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.ig-foot{padding:8px 10px 14px; display:flex; flex-direction:column; gap:6px}
.ig-acts{display:flex; gap:10px; align-items:center; font-size:10.5px; font-weight:700}
.ig-acts svg{width:16px; height:16px}
.ig-acts span{display:inline-flex; align-items:center; gap:4px}
.ig-line{height:6px; border-radius:6px; background:rgba(255,247,238,.16)}
.ig-line--s{width:62%}

/* proof bar: sits across the bottom of the orange band, dark ground underneath */
.adv-proof-wrap{position:relative; padding-bottom:8px}
.adv-proof-wrap::before{content:""; position:absolute; z-index:-1; left:calc(50% - 50vw); width:100vw; top:46%; bottom:0; background:var(--ink)}
.proof.adv-proof{grid-template-columns:repeat(6, minmax(0,1fr)); margin:0; background:var(--ink-2); box-shadow:var(--frame); color:var(--text)}
.proof.adv-proof div{border-right:1px solid var(--line); border-bottom:0; padding:22px 20px}
.proof.adv-proof div:last-child{border-right:0}
.proof.adv-proof b{font-size:clamp(40px, 3.6vw, 56px); font-variant-numeric:tabular-nums}
.proof.adv-proof span{display:block; margin-top:6px; line-height:1.35}
.proof.adv-proof .is-live b{color:var(--juice)}
.adv-proof-note{margin-top:14px; color:var(--dim); font-size:12px}

/* ---------- offers: surfaces bento ---------- */
.bento{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
.bento__cell{position:relative; display:flex; flex-direction:column; min-width:0; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .25s, transform .25s var(--ease)}
.bento__cell:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,93,0,.6), 0 24px 50px -26px rgba(255,93,0,.7)}
.bento__stage{position:relative; flex:1; min-height:0; overflow:hidden}
.bento__cap{display:flex; flex-direction:column; gap:7px; padding:18px 20px 20px; border-top:1px solid var(--line)}
.bento__cap .kicker{font-size:11px}
.bento__cap h3{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.95; text-transform:uppercase}
.bento__cap p{font-size:14px; color:var(--muted)}
.bento--reel{grid-column:1; grid-row:1 / span 2}
.bento--yt{grid-column:2 / span 2; grid-row:1}
.bento--article{grid-column:4; grid-row:1 / span 2}
.bento--push{grid-column:2; grid-row:2}
.bento--mail{grid-column:3; grid-row:2}
.bento--push .bento__stage,.bento--mail .bento__stage{min-height:250px}
.bento--reel .bento__stage{display:grid; place-items:center; padding:26px 22px; background:radial-gradient(120% 80% at 50% 0%, rgba(255,93,0,.55), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,247,238,.08) 1px, transparent 1.6px) 0 0/16px 16px}
.bento--reel .phone{width:min(100%, 230px)}
.bento--yt .bento__stage{aspect-ratio:16/9; flex:none; background:#000}
.bento--yt .bento__stage > img{width:100%; height:100%; object-fit:cover}
.bento--yt .bento__stage::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.4), transparent 26%, transparent 55%, rgba(0,0,0,.75))}
.yt-osd{position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; gap:8px}
.yt-bar{position:absolute; z-index:2; left:14px; right:14px; bottom:62px; height:5px; border-radius:5px; background:rgba(255,255,255,.25)}
.yt-bar i{position:absolute; left:0; top:0; bottom:0; width:34%; border-radius:5px; background:var(--juice)}
.yt-bar b{position:absolute; top:-2px; bottom:-2px; left:2%; width:3%; border-radius:3px; background:var(--yellow)}
.bento--yt .lower-third{bottom:12px}
.bento--article .bento__stage{padding:0 18px 22px; display:flex; flex-direction:column; justify-content:center; gap:16px; background:linear-gradient(180deg, var(--ink-4), var(--ink-3))}
.urlbar{display:flex; align-items:center; gap:8px; margin:0 -18px; padding:12px 14px; background:rgba(0,0,0,.35); border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden}
.urlbar i{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none}
.urlbar span{flex:1; overflow:hidden; text-overflow:ellipsis; padding:5px 10px; border-radius:999px; background:rgba(255,247,238,.06)}
.urlbar span b{color:var(--text); font-weight:500}
.bento--article .story-card{margin:auto 0}
.bento--article .story-card{--edge:rgba(255,217,2,.45); width:100%; box-shadow:0 22px 44px -26px rgba(0,0,0,.9)}
.bento--article .story-card__media{aspect-ratio:4/3}
/* push: lock screen */
.lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; overflow:hidden}
.lock > img{position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); max-width:none; object-fit:cover; filter:blur(10px) brightness(.5) saturate(1.3)}
.lock__time{position:relative; font-family:var(--font-display); font-size:58px; line-height:.9; color:var(--text); text-shadow:0 2px 14px rgba(0,0,0,.4)}
.lock__date{position:relative; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--muted); margin-top:-4px}
.notif{position:relative; width:100%; display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; padding:10px 12px; border-radius:16px; background:rgba(40,34,30,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,247,238,.12); animation:notifIn .7s var(--ease) both}
.notif + .notif{animation-delay:.25s}
.notif img{width:30px; height:30px; border-radius:8px}
.notif small{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--dim)}
.notif b{display:block; font-size:12.5px; line-height:1.25; margin-top:2px}
.notif span{display:block; font-size:11.5px; color:var(--muted); line-height:1.3}
.notif span em{font-style:normal; color:var(--cream); font-weight:700}
@keyframes notifIn{from{opacity:0; transform:translateY(-14px) scale(.96)}}
/* newsletter mock */
.mail{position:absolute; inset:18px 18px 0; border-radius:14px 14px 0 0; background:var(--paper); color:var(--ink); overflow:hidden; box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.mail__bar{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px 8px; background:var(--juice)}
.mail__bar b{font-family:var(--font-display); font-weight:400; font-size:21px; line-height:1}
.mail__bar span{font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em}
.mail__slot{margin:10px 12px; padding:8px 10px; border:2px dashed rgba(11,11,11,.35); border-radius:9px; background:var(--cream); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-align:center}
.mail__story{display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:center; margin:0 12px; padding-top:10px; border-top:1px solid rgba(11,11,11,.12)}
.mail__story img{width:58px; height:58px; border-radius:8px; object-fit:cover; object-position:50% 20%}
.mail__story small{display:block; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--juice-deep)}
.mail__story b{display:block; font-size:12.5px; line-height:1.25}

/* offer list (8 inventory items as one ruled grid) */
.offers{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:var(--gap); border-radius:var(--r-lg); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); background:var(--ink-2)}
.offer{display:flex; flex-direction:column; gap:10px; padding:24px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s}
.offer:nth-child(4n){border-right:0}
.offer:nth-child(n+5){border-bottom:0}
.offer:hover{background:rgba(255,93,0,.07)}
.offer__ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,93,0,.14); color:var(--juice); box-shadow:inset 0 0 0 1px rgba(255,93,0,.35)}
.offer__ico svg{width:22px; height:22px}
.offer h3{font-size:17px; font-weight:700; letter-spacing:-.01em}
.offer p{font-size:14px; color:var(--muted)}
.offer small{margin-top:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}

/* ---------- packages ---------- */
@property --holo-a{syntax:"<angle>"; inherits:false; initial-value:0deg}
.pkgs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); align-items:stretch; padding-top:14px}
.pkg{position:relative; display:flex; flex-direction:column; gap:14px; padding:28px 24px 24px; border-radius:var(--r-lg); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:transform .3s var(--ease), box-shadow .3s; transform-style:preserve-3d; --gx:50%; --gy:0%}
.pkg::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(360px 260px at var(--gx) var(--gy), rgba(255,241,116,.16), transparent 60%)}
.pkg:hover::before{opacity:1}
.pkg:hover{box-shadow:inset 0 0 0 1px rgba(255,93,0,.6), 0 30px 60px -30px rgba(255,93,0,.65)}
.pkg__n{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--dim)}
.pkg h3{font-family:var(--font-display); font-weight:400; font-size:clamp(44px, 3.8vw, 56px); line-height:.86; text-transform:uppercase}
.pkg__price{font-family:var(--font-display); font-size:clamp(34px, 2.9vw, 44px); line-height:.95; color:var(--juice); letter-spacing:.01em}
.pkg__price small{font-size:.55em; color:var(--muted)}
.pkg__term{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:-6px}
.pkg__list{list-style:none; margin:0; padding:16px 0 0; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); font-size:14px; line-height:1.4}
.pkg__list li{display:grid; grid-template-columns:18px 1fr; gap:10px}
.pkg__list svg{width:18px; height:18px; color:var(--juice); margin-top:1px}
.pkg__best{font-size:13px; color:var(--dim); padding-top:14px; border-top:1px solid var(--line)}
.pkg__best b{color:var(--text); font-weight:600}
.pkg .btn{margin-top:auto}
.pkg--feat{background:var(--juice); color:var(--ink); box-shadow:var(--frame-sm); --jt-depth:var(--ink)}
.pkg--feat:hover{box-shadow:var(--frame-sm), 0 34px 70px -28px rgba(255,93,0,.9)}
.pkg--feat .pkg__n,.pkg--feat .pkg__term,.pkg--feat .pkg__best{color:var(--on-orange-muted)}
.pkg--feat .pkg__price{color:var(--ink)}
.pkg--feat .pkg__price small{color:var(--on-orange-muted)}
.pkg--feat .pkg__best b{color:var(--ink)}
.pkg--feat .pkg__list,.pkg--feat .pkg__best{border-color:rgba(11,11,11,.2)}
.pkg--feat .pkg__list svg{color:var(--ink)}
.pkg--feat::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:soft-light; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(255,241,116,.45) 50%, rgba(200,150,255,.3) 55%, transparent 68%); background-size:260% 100%; animation:advSheen 5.5s ease-in-out infinite}
/* holographic "Most popular" ribbon */
.holo-tag{position:absolute; top:-15px; left:22px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:8px 12px 7px; border-radius:8px; color:var(--ink); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 0 0 2.5px var(--ink), 4px 4px 0 2.5px var(--ink);
  background:linear-gradient(105deg, #FFF174, #FFD902 18%, #ffffff 32%, #FFB27A 46%, #d9b8ff 58%, #9BE38A 72%, #FFF174 86%, #FFD902); background-size:300% 100%; animation:holoShift 5s linear infinite}
.holo-tag svg{width:13px; height:13px}
@keyframes holoShift{to{background-position:-300% 0}}
.pkg__flag{position:absolute; top:24px; right:20px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:5px 8px; border-radius:6px; background:var(--cream); color:var(--ink)}
.price-note{display:flex; gap:14px; align-items:flex-start; margin-top:var(--gap); padding:18px 22px; border-radius:var(--r); background:rgba(255,217,2,.06); box-shadow:inset 0 0 0 1px rgba(255,217,2,.28)}
.price-note svg{width:22px; height:22px; flex:none; color:var(--yellow); margin-top:1px}
.price-note p{font-size:14px; color:var(--muted)}
.price-note b{color:var(--text)}
/* add-ons */
.addons-head{display:flex; align-items:baseline; gap:16px; margin:clamp(48px, 5vw, 68px) 0 18px}
.addons{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.addon{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--r); background:rgba(255,247,238,.035); box-shadow:inset 0 0 0 1px var(--line); transition:background .2s}
.addon:hover{background:rgba(255,247,238,.07)}
.addon b{display:block; font-size:15px}
.addon span{display:block; font-size:13px; color:var(--dim); margin-top:2px}
.addon .addon__price{font-family:var(--font-display); font-size:26px; line-height:1; color:var(--cream); white-space:nowrap; text-align:right}
.addon .addon__price.is-mono{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--muted)}

/* ---------- partner wall ---------- */
.wall{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
.mark{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:176px; padding:22px; border-radius:var(--r-lg); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; transition:box-shadow .25s, transform .25s var(--ease)}
.mark::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:linear-gradient(120deg, transparent 30%, rgba(255,93,0,.14) 50%, transparent 70%)}
.mark:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,93,0,.6)}
.mark:hover::after{opacity:1}
.mark__word{flex:1; display:flex; flex-direction:column; justify-content:center; color:var(--text); transition:color .2s}
.mark:hover .mark__word{color:var(--cream)}
.mark__cap{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); line-height:1.5}
.wm-injury b{font-family:Georgia, "Times New Roman", serif; font-weight:700; font-size:27px; letter-spacing:.05em; line-height:1; text-transform:uppercase}
.wm-injury b i{font-style:normal; font-size:.7em; vertical-align:.15em; margin-right:.2em}
.wm-injury small{display:block; margin-top:6px; font-family:Georgia, serif; font-size:10px; letter-spacing:.42em; color:var(--muted)}
.wm-catalyst b{font-weight:800; font-size:36px; letter-spacing:-.04em; line-height:1}
.wm-catalyst b i{font-style:normal; color:var(--leaf-glow)}
.wm-catalyst small{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.5em; color:var(--muted); margin-top:4px}
.wm-waxx b{font-family:var(--font-display); font-weight:400; font-size:58px; line-height:.8; letter-spacing:.04em}
.wm-waxx small{display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.62em; color:var(--muted); margin-top:6px}
.wm-ets{padding-left:12px; border-left:4px solid currentColor}
.wm-ets b{display:block; font-weight:700; font-size:15px; line-height:1.15; letter-spacing:.2em; text-transform:uppercase}
.wm-777 b{font-family:var(--font-display); font-weight:400; font-size:50px; line-height:.85}
.wm-777 b i{font-style:normal; color:var(--juice)}
.wm-777 small{display:block; font-weight:800; font-size:12px; letter-spacing:.5em; margin-top:6px; color:var(--muted)}
.wm-foo b{font-family:var(--font-display); font-weight:400; font-size:56px; line-height:.8; letter-spacing:.06em; font-style:italic; transform:skewX(-6deg)}
.wm-foo small{display:block; font-weight:800; font-size:11.5px; letter-spacing:.38em; color:var(--muted); margin-top:6px}
.wm-outda b{font-weight:900; font-style:italic; font-size:29px; letter-spacing:-.045em; line-height:1}
.wm-outda b i{font-style:inherit; color:var(--juice)}
.mark--you{background:transparent; box-shadow:none; border:2px dashed var(--line-2)}
.mark--you:hover{border-color:var(--juice); box-shadow:none}
.mark--you .mark__word b{font-family:var(--font-display); font-weight:400; font-size:44px; line-height:.9; color:var(--cream)}
.mark--you .mark__cap{color:var(--juice)}
.wall-note{margin-top:16px}

/* ---------- case study ---------- */
.case{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin-top:clamp(56px, 6vw, 88px); border-radius:28px; overflow:hidden; background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line)}
.case__media{position:relative; min-height:520px; background:#000; overflow:hidden}
.case__media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:16% 55%}
.case__media::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 60%, var(--ink-2)), linear-gradient(0deg, rgba(0,0,0,.65), transparent 40%)}
.case__media .chip{position:absolute; z-index:2; top:18px; left:18px}
.case__media .lower-third{left:18px; right:64px; bottom:20px; z-index:3}
.case__body{display:flex; flex-direction:column; gap:18px; padding:clamp(26px, 4vw, 52px)}
.case__body > p{color:var(--muted)}
.case__body > p b{color:var(--text)}
.case__list{list-style:none; margin:0; padding:0; counter-reset:c; display:flex; flex-direction:column; gap:12px}
.case__list li{counter-increment:c; display:grid; grid-template-columns:30px 1fr; gap:12px; font-size:14.5px; color:var(--muted); line-height:1.45}
.case__list li::before{content:counter(c); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; padding-top:2px; background:rgba(255,93,0,.16); color:var(--juice); font-family:var(--font-display); font-size:19px; box-shadow:inset 0 0 0 1px rgba(255,93,0,.4)}
.case__list b{color:var(--text)}
.case__eps{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.case__eps .guide__replay{grid-template-columns:104px 1fr; padding:10px; border-radius:14px; background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line)}
.case__eps .guide__replay b{font-size:13px}
.case__adds{display:flex; flex-wrap:wrap; gap:8px}
.case__adds span{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:7px 10px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.faq-side{position:sticky; top:calc(var(--hdr-t) + 32px)}
.faq-side .lede{margin:18px 0 26px}
.faq{display:flex; flex-direction:column; gap:12px}
.faq details{border-radius:var(--r); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s}
.faq details[open]{box-shadow:inset 0 0 0 1px rgba(255,93,0,.55)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:19px 22px; font-weight:700; font-size:16.5px; line-height:1.35; border-radius:var(--r)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; padding-top:3px; background:rgba(255,93,0,.14); color:var(--juice); font-family:var(--font-display); font-size:28px; line-height:1; transition:transform .25s var(--ease), background .2s}
.faq details[open] summary::after{transform:rotate(45deg); background:var(--juice); color:var(--ink)}
.faq summary:hover{color:var(--cream)}
.faq__a{padding:0 22px 22px; color:var(--muted); font-size:15px; max-width:64ch}
.faq__a b{color:var(--text)}
.faq__a code{font-family:var(--font-mono); font-size:13px; color:var(--cream)}

/* ---------- inquiry ---------- */
.inq{overflow:hidden}
.inq::before{content:"LET'S SQUEEZE · LET'S SQUEEZE · LET'S SQUEEZE"; position:absolute; left:-2%; bottom:-.12em; white-space:nowrap; font-family:var(--font-display); font-size:clamp(120px, 15vw, 230px); line-height:1; color:rgba(0,0,0,.07); pointer-events:none}
.inq-grid{position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.inq-side .lede{margin:18px 0 28px; color:var(--on-orange-muted)}
.inq-side .lede b{color:var(--ink)}
.inq-steps{list-style:none; margin:0 0 28px; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:14px}
.inq-steps li{counter-increment:s; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; font-size:15px; color:var(--on-orange-muted)}
.inq-steps li::before{content:counter(s); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding-top:3px; background:var(--ink); color:var(--juice); font-family:var(--font-display); font-size:24px}
.inq-steps b{display:block; color:var(--ink); font-size:16px}
.inq-dm{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r); background:rgba(11,11,11,.1); box-shadow:inset 0 0 0 2px rgba(11,11,11,.18); font-weight:600}
.inq-dm img{width:40px; height:40px; border-radius:50%; flex:none; box-shadow:0 0 0 2px var(--ink)}
.inq-dm a{text-decoration:underline; text-underline-offset:3px; font-weight:800}
.inq-card{position:relative; border-radius:26px; padding:clamp(22px, 3vw, 34px); background:var(--ink-2); color:var(--text); box-shadow:var(--frame); --jt-depth:var(--juice-deep)}
.inq-card .kicker{color:var(--juice)}
.inq-card h3.juice-type{margin:10px 0 22px}
.inq-card textarea.input{height:auto; min-height:120px; padding:14px 16px; line-height:1.5; resize:vertical}
.inq-card form .btn--primary{grid-column:1/-1; height:58px; font-size:16px}
.inq-card .fine{grid-column:1/-1}
.inq-done{text-align:left}
.inq-done h3{margin:14px 0 14px}
.inq-done h3:focus{outline:none}
.inq-done p{color:var(--muted)}
.inq-done dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:22px 0; padding:18px 20px; border-radius:var(--r); background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line); font-size:14px}
.inq-done dt{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding-top:2px}
.inq-done dd{margin:0; font-weight:600}
.inq-done dd.ref{font-family:var(--font-mono); color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .proof.adv-proof{grid-template-columns:repeat(3, minmax(0,1fr))}
  .proof.adv-proof div:nth-child(3n){border-right:0}
  .proof.adv-proof div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .pkgs{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:calc(var(--gap) + 14px)}
  .addons{grid-template-columns:repeat(2, minmax(0,1fr))}
  .offers{grid-template-columns:repeat(2, minmax(0,1fr))}
  .offer:nth-child(4n){border-right:1px solid var(--line)}
  .offer:nth-child(2n){border-right:0}
  .offer:nth-child(n+5){border-bottom:1px solid var(--line)}
  .offer:nth-child(n+7){border-bottom:0}
}
@media (max-width:980px){
  .adv-hero__grid{grid-template-columns:1fr}
  .collage{margin:0 auto; max-width:560px}
  .bento{grid-template-columns:1fr 1fr}
  .bento--yt{grid-column:1 / -1; grid-row:auto}
  .bento--reel{grid-column:1; grid-row:span 2}
  .bento--push,.bento--mail{grid-column:2; grid-row:auto}
  .bento--article{grid-column:1 / -1; grid-row:auto}
  .bento--push .bento__stage,.bento--mail .bento__stage{min-height:240px}
  .wall{grid-template-columns:repeat(2, minmax(0,1fr))}
  .case{grid-template-columns:1fr}
  .case__media{min-height:0; aspect-ratio:16/10}
  .case__media::after{background:linear-gradient(0deg, var(--ink-2), transparent 35%)}
  .faq-grid,.inq-grid{grid-template-columns:1fr}
  .faq-side{position:static}
}
@media (max-width:760px){
  .adv-hero h1{font-size:clamp(50px, 15.5vw, 76px)}
  .adv-hero__cta .btn{flex:1}
  .collage{aspect-ratio:1/.86; margin-top:8px}
  .collage__tv{width:90%}
  .collage__phone{width:42%}
  .lower-third__tag{font-size:9px; padding:6px 7px 5px}
  .lower-third__name{font-size:16px; padding:5px 8px 3px}
  .lower-third{left:10px; right:10px; bottom:10px}
  .ig-head{padding-top:24px}
  .ig-head b{font-size:9px}
  .ig-head span{font-size:8px}
  .ig-head img{width:20px; height:20px}
  .proof.adv-proof{grid-template-columns:repeat(2, minmax(0,1fr))}
  .proof.adv-proof div{padding:16px}
  .proof.adv-proof div:nth-child(3n){border-right:1px solid var(--line)}
  .proof.adv-proof div:nth-child(2n){border-right:0}
  .proof.adv-proof div:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .proof.adv-proof div:nth-child(n+5){border-bottom:0}
  .proof.adv-proof b{font-size:42px}
  .proof.adv-proof span{font-size:12.5px}
  /* bento becomes a swipe rail, like the other mobile rails */
  .bento{display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:84%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:4px var(--gutter) 14px; scroll-padding:0 var(--gutter); scrollbar-width:none}
  .bento::-webkit-scrollbar{display:none}
  .bento__cell{grid-column:auto !important; grid-row:auto !important; scroll-snap-align:start}
  .bento__stage{flex:none; height:340px}
  .bento--yt .bento__stage{height:auto; aspect-ratio:auto; flex:1; min-height:340px}
  .bento--reel .phone{width:150px}
  .bento--article .bento__stage{padding:16px}
  .bento--article .story-card__media{aspect-ratio:16/10}
  .bento__cap h3{font-size:26px}
  .offers{grid-template-columns:1fr}
  .offer{display:grid; grid-template-columns:44px 1fr; gap:4px 14px; padding:18px; border-right:0 !important; border-bottom:1px solid var(--line) !important}
  .offer:last-child{border-bottom:0 !important}
  .offer__ico{grid-row:span 3}
  .offer small{margin-top:4px}
  .pkgs{grid-template-columns:1fr; row-gap:calc(var(--gap) + 14px)}
  .pkg{padding:26px 20px 20px}
  .addons-head{flex-direction:column; gap:6px}
  .addons{grid-template-columns:1fr}
  .wall{gap:12px}
  .mark{min-height:140px; padding:16px}
  .wm-injury b{font-size:19px}
  .wm-injury small{font-size:8px; letter-spacing:.3em}
  .wm-catalyst b{font-size:27px}
  .wm-waxx b{font-size:44px}
  .wm-ets b{font-size:11.5px; letter-spacing:.14em}
  .wm-777 b{font-size:38px}
  .wm-foo b{font-size:42px}
  .wm-outda b{font-size:20px}
  .mark--you .mark__word b{font-size:34px}
  .mark__cap{font-size:9.5px; letter-spacing:.08em}
  .case__media .lower-third{right:18px}
  .case__eps{grid-template-columns:1fr}
  .inq-card .form-grid{grid-template-columns:1fr}
  .inq-done dl{grid-template-columns:1fr; gap:2px}
  .inq-done dd{margin-bottom:8px}
}
@media (prefers-reduced-motion: reduce){
  .pkg{transform:none!important}
}

/* Partner names from the admin (Advertisers) without a custom wordmark */
.mark__word:not([class*="wm-"]) b{font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 3vw, 38px); line-height:.95; letter-spacing:.01em; text-transform:uppercase; color:var(--paper)}
.mark__word:not([class*="wm-"]) small{font-family:var(--font-mono); letter-spacing:.14em; color:var(--juice)}

/* /promote: three proof stats instead of six */
.proof.adv-proof.adv-proof--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.proof.adv-proof.adv-proof--3 div{border-bottom:0}
.proof.adv-proof.adv-proof--3 div:not(:last-child){border-right:1px solid var(--line)}
.proof.adv-proof.adv-proof--3 div:last-child{border-right:0}
@media (max-width:760px){ .proof.adv-proof.adv-proof--3 b{font-size:34px} }