/* =====================================================================
   ABOUT (/about) page styles. Verbatim port of the inline <style> in
   concepts/keyholder-tv/about.html. Built only from site.css tokens.
   Only change: the press-wall fonts come from next/font (--ab-font-*).
   Prefix: .ab-*   (nothing here overrides shared components globally)
   ===================================================================== */
@property --abx{syntax:"<percentage>"; inherits:true; initial-value:50%}
@property --aby{syntax:"<percentage>"; inherits:true; initial-value:50%}
@property --abang{syntax:"<angle>"; inherits:false; initial-value:0deg}

/* ---------- hero ---------- */
.ab-hero{padding:clamp(40px, 5vw, 76px) 0 clamp(64px, 7vw, 104px)}
.ab-hero::after{content:"JUICE"; position:absolute; z-index:-1; right:-2vw; bottom:-.16em; font-family:var(--font-display); font-size:clamp(200px, 34vw, 520px); line-height:1; color:transparent; -webkit-text-stroke:3px rgba(11,11,11,.13); pointer-events:none; letter-spacing:-.01em}
.ab-hero__grid{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(32px, 5vw, 80px); align-items:center}
.ab-crumb{display:block; margin-bottom:22px; line-height:1.6}
.ab-crumb a{text-decoration:underline; text-underline-offset:3px}
.ab-h1{margin:0}
.ab-h1 .juice-type{display:block}
.ab-h1__b{font-size:clamp(48px, 6.2vw, 100px); margin-top:.06em}
.ab-hero .hero-band__sub{max-width:40ch; font-size:clamp(17px, 1.6vw, 21px)}
.ab-hero__acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.ab-hero__meta{margin-top:26px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-orange-muted)}

/* ---------- the Juice card (holo trading card that flips) ---------- */
.ab-card-zone{position:relative; display:flex; flex-direction:column; align-items:center; gap:34px}
.ab-card{--w:clamp(290px, 29vw, 410px); --rx:0deg; --ry:0deg; --flip:0deg; position:relative; width:var(--w); perspective:1500px; container-type:inline-size; animation:abFloat 7s ease-in-out infinite}
.ab-card[data-flipped="true"]{--flip:180deg}
@keyframes abFloat{50%{transform:translateY(-10px) rotate(.6deg)}}
.ab-card__inner{position:relative; aspect-ratio:5/7; transform-style:preserve-3d; transform:rotate(-3deg) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition:transform .75s cubic-bezier(.2,.8,.2,1); cursor:pointer}
.ab-card.is-tracking .ab-card__inner{transition:transform .25s ease-out}
.ab-face{position:absolute; inset:0; border-radius:6.2cqw; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 0 0 3px var(--ink), 3cqw 3cqw 0 3px var(--ink), 0 40px 80px -30px rgba(0,0,0,.7); padding:2.6cqw; isolation:isolate}
/* holo foil border */
.ab-face::before{content:""; position:absolute; inset:0; z-index:-1;
  background:conic-gradient(from var(--abang), var(--juice), var(--cream), var(--yellow), #8be15c, #c48bff, var(--juice-bright), var(--cream), var(--juice));
  filter:saturate(1.2); animation:abSpinFoil 9s linear infinite}
@keyframes abSpinFoil{to{--abang:360deg}}
.ab-face--back{transform:rotateY(180deg)}
.ab-face__in{position:relative; height:100%; border-radius:4cqw; overflow:hidden; background:var(--ink)}

/* front */
.ab-face--front .ab-face__in img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.ab-face--front .ab-face__in::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,11,.96) 6%, rgba(11,11,11,.55) 28%, transparent 48%), linear-gradient(180deg, rgba(11,11,11,.55), transparent 22%)}
.ab-holo,.ab-glare,.ab-sparkle{position:absolute; inset:0; z-index:2; pointer-events:none}
.ab-holo{background:linear-gradient(115deg, transparent 18%, rgba(255,241,116,.55) 32%, rgba(255,93,0,.5) 41%, rgba(139,225,92,.38) 50%, rgba(196,139,255,.42) 58%, rgba(255,241,116,.45) 66%, transparent 80%); background-size:260% 260%; background-position:var(--abx) var(--aby); mix-blend-mode:color-dodge; opacity:.62; animation:abHolo 7s ease-in-out infinite alternate}
@keyframes abHolo{from{--abx:0%; --aby:10%} to{--abx:100%; --aby:90%}}
.ab-card.is-tracking .ab-holo,.ab-card.is-tracking .ab-glare{animation:none}
.ab-glare{background:radial-gradient(circle at var(--abx) var(--aby), rgba(255,255,255,.55), rgba(255,255,255,.08) 28%, transparent 52%); mix-blend-mode:overlay; animation:abHolo 7s ease-in-out infinite alternate}
.ab-sparkle{opacity:.35; mix-blend-mode:color-dodge; background-image:radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,241,116,.9) 0 1px, transparent 1.4px); background-size:23px 29px, 37px 31px; background-position:0 0, 11px 7px; -webkit-mask-image:linear-gradient(115deg, transparent 25%, #000 45%, transparent 70%); mask-image:linear-gradient(115deg, transparent 25%, #000 45%, transparent 70%); -webkit-mask-size:260% 260%; mask-size:260% 260%; -webkit-mask-position:var(--abx) var(--aby); mask-position:var(--abx) var(--aby)}
.ab-face__top{position:absolute; z-index:3; top:4cqw; left:4cqw; right:4cqw; display:flex; justify-content:space-between; align-items:center}
.ab-face__top img{position:static!important; width:14cqw!important; height:14cqw!important; border-radius:50%; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--juice)}
.ab-face__top .chip{font-size:max(10px, 2.9cqw)}
.ab-plate{position:absolute; z-index:3; left:5cqw; right:5cqw; bottom:5cqw; display:flex; align-items:flex-end; justify-content:space-between; gap:3cqw}
.ab-plate .juice-type{font-size:12.5cqw; line-height:.86}
.ab-plate__role{display:block; margin-top:2.4cqw; font-family:var(--font-mono); font-size:max(9.5px, 2.8cqw); font-weight:700; letter-spacing:.12em; color:var(--cream); text-transform:uppercase}
.ab-plate__no{flex:none; text-align:center; font-family:var(--font-mono); font-size:max(8px, 2.3cqw); font-weight:700; letter-spacing:.14em; color:var(--text)}
.ab-plate__no b{display:block; font-family:var(--font-display); font-weight:400; font-size:11cqw; line-height:.9; letter-spacing:0; background:linear-gradient(110deg, var(--juice), var(--cream) 40%, var(--yellow) 60%, var(--juice-bright)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* back */
.ab-face--back .ab-face__in{display:flex; flex-direction:column; padding:6cqw 6cqw 5cqw; color:var(--text);
  background:radial-gradient(120% 70% at 100% 0%, rgba(255,93,0,.3), transparent 60%), radial-gradient(circle at 1px 1px, rgba(255,247,238,.07) 1px, transparent 1.6px) 0 0/12px 12px, var(--ink-2)}
.ab-back__head{display:flex; align-items:center; gap:3.4cqw; padding-bottom:4cqw; border-bottom:1px dashed var(--line-2)}
.ab-back__head img{width:13cqw; height:13cqw; border-radius:50%; box-shadow:0 0 0 2px var(--juice)}
.ab-back__head .juice-type{font-size:10cqw}
.ab-back__head small{display:block; font-family:var(--font-mono); font-size:max(9px, 2.5cqw); font-weight:700; letter-spacing:.14em; color:var(--dim); margin-top:1cqw}
.ab-stats{margin:3cqw 0 0; display:grid; gap:0}
.ab-stats div{display:grid; grid-template-columns:31cqw 1fr; gap:3cqw; padding:2.3cqw 0; border-bottom:1px solid var(--line)}
.ab-stats dt{font-family:var(--font-mono); font-size:max(9px, 2.5cqw); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice); padding-top:.5cqw}
.ab-stats dd{margin:0; font-size:max(11px, 3.4cqw); line-height:1.3; font-weight:600}
.ab-back__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:3cqw; padding-top:3.5cqw}
.ab-back__foot .juice-type{font-size:7.4cqw; line-height:.95}
.ab-seal{flex:none; width:17cqw; height:17cqw; border-radius:50%; position:relative; overflow:hidden; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px rgba(255,241,116,.6); animation:abSpin 14s linear infinite}
.ab-seal svg{width:100%; height:100%; display:block}
.ab-seal::after{content:""; position:absolute; inset:0; background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.55), transparent 30%, rgba(196,139,255,.4), transparent 60%, rgba(139,225,92,.45), transparent); mix-blend-mode:color-dodge}
@keyframes abSpin{to{transform:rotate(360deg)}}

.ab-card-sticker{position:absolute; z-index:4; left:calc(50% - var(--w, 360px) / 2 - 70px); top:-46px; pointer-events:none}
.ab-card-sticker .sticker{width:clamp(120px, 11vw, 160px); margin:0}
.ab-card-sticker{transition:opacity .35s, transform .5s var(--ease)}
.ab-card-zone:has(.ab-card[data-flipped="true"]) .ab-card-sticker{opacity:0; transform:scale(.8) rotate(-20deg)}
.ab-card-sticker .sticker__ring text{font-size:15px; letter-spacing:2.3px}
.ab-flip{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; position:relative; z-index:2}
.ab-flip .btn svg{transition:transform .5s var(--ease)}
.ab-flip .btn[aria-pressed="true"] svg{transform:rotate(180deg)}
.ab-flip__hint{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-orange-muted)}

/* stats band under the hero */
.ab-band{background:#000; border-top:3px solid var(--ink); padding:clamp(22px, 3vw, 34px) 0}
.ab-band .proof{margin:0}

/* ---------- story ---------- */
.ab-story{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px, 5.6vw, 88px); align-items:start}
.ab-chapters{list-style:none; margin:0; padding:0}
.ab-chapter{display:grid; grid-template-columns:clamp(64px, 6vw, 88px) minmax(0,1fr); gap:clamp(16px, 2vw, 26px); padding:28px 0; border-top:1px solid var(--line)}
.ab-chapter:first-child{border-top:0; padding-top:0}
.ab-chapter__n{font-family:var(--font-display); font-size:clamp(58px, 5.6vw, 84px); line-height:.78; color:transparent; -webkit-text-stroke:2px var(--juice)}
.ab-chapter h3{font-family:var(--font-display); font-weight:400; font-size:clamp(30px, 2.8vw, 40px); line-height:.95; text-transform:uppercase; margin-bottom:12px}
.ab-chapter h3 span{color:var(--juice)}
.ab-chapter p{color:var(--muted); font-size:16.5px; max-width:56ch}
.ab-chapter p + p{margin-top:12px}
.ab-chapter p b{color:var(--text)}
.ab-media{position:sticky; top:calc(var(--hdr-t) + 28px); display:flex; flex-direction:column; gap:var(--gap)}
.ab-media .video-card__thumb img{object-position:50% 40%}
.ab-liner{border-radius:var(--r); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); padding:20px 22px}
.ab-liner h3{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.ab-liner ol{list-style:none; margin:0; padding:0}
.ab-liner li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.ab-liner li:last-child{border-bottom:0; padding-bottom:0}
.ab-liner li b{font-family:var(--font-display); font-weight:400; font-size:24px; line-height:1; color:var(--cream)}
.ab-liner li span i{color:var(--dim); font-style:normal}
.ab-liner li span em{color:var(--text)}

/* ---------- timeline ---------- */
.ab-run{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--gap)}
.ab-run::before{content:""; position:absolute; left:0; right:0; top:9px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--juice-deep), var(--juice) 50%, var(--cream)); transform-origin:left}
.ab-run li{position:relative; padding-top:42px; display:flex; flex-direction:column; gap:8px}
.ab-run li::before{content:""; position:absolute; top:0; left:0; width:21px; height:21px; border-radius:50%; background:var(--ink-2); box-shadow:inset 0 0 0 4px var(--juice), 0 0 0 5px var(--ink-2), 0 0 18px rgba(255,93,0,.7)}
.ab-run__era{font-family:var(--font-display); font-size:clamp(34px, 3vw, 46px); line-height:.9; color:var(--cream)}
.ab-run__era small{font-size:.55em; color:var(--juice); margin-left:2px}
.ab-run h3{font-size:16px; line-height:1.3; font-weight:700}
.ab-run p{font-size:14px; color:var(--muted)}
.ab-run__now{border-radius:var(--r); background:var(--juice); color:var(--ink); padding:42px 18px 20px!important; box-shadow:var(--frame-sm); --jt-depth:var(--ink)}
.ab-run__now::before{left:18px!important; top:-10px!important; background:var(--cream)!important; box-shadow:inset 0 0 0 4px var(--ink), 0 0 0 5px var(--ink-2), 0 0 24px rgba(255,241,116,.9)!important; animation:abPing 2.2s ease-out infinite}
@keyframes abPing{0%{box-shadow:inset 0 0 0 4px var(--ink), 0 0 0 5px var(--ink-2), 0 0 0 5px rgba(255,241,116,.6)}100%{box-shadow:inset 0 0 0 4px var(--ink), 0 0 0 5px var(--ink-2), 0 0 0 22px rgba(255,241,116,0)}}
.ab-run__now .ab-run__era{font-size:clamp(46px, 4vw, 62px); color:var(--ink)}
.ab-run__now h3{color:var(--ink)}
.ab-run__now p{color:var(--on-orange-muted)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ab-run::before{animation:abDraw linear both; animation-timeline:view(); animation-range:entry 20% cover 45%}
  }
}
@keyframes abDraw{from{transform:scaleX(0)}}

/* ---------- community bento ---------- */
.ab-bento{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(2, clamp(230px, 21vw, 300px)); gap:var(--gap)}
.ab-tile{position:relative; margin:0; overflow:hidden; border-radius:var(--r); background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); isolation:isolate}
.ab-tile--tall{grid-row:span 2}
.ab-tile--wide{grid-column:span 2}
.ab-tile img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.ab-tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(0,0,0,.9) 4%, rgba(0,0,0,.35) 34%, transparent 58%)}
.ab-tile::before{content:""; position:absolute; inset:-10%; z-index:1; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,241,116,.35) 45%, rgba(255,93,0,.3) 50%, rgba(196,139,255,.25) 55%, transparent 65%); mix-blend-mode:color-dodge; transform:translateX(-110%); transition:transform 1s var(--ease)}
.ab-tile:hover::before{transform:translateX(110%)}
.ab-tile:hover img{transform:scale(1.05)}
.ab-tile figcaption{position:absolute; z-index:2; left:12px; right:12px; bottom:12px; display:flex; flex-direction:column; gap:5px; padding:12px 14px 13px; border-radius:12px; background:rgba(11,11,11,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px var(--line)}
.ab-tile figcaption span{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice)}
.ab-tile figcaption b{font-size:15.5px; line-height:1.3; font-weight:700; max-width:34ch}
.ab-tile--tall figcaption b{font-size:16.5px}
.ab-tile figcaption small{font-size:13.5px; line-height:1.4; color:var(--muted)}
.ab-fair{margin-top:var(--gap); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; padding:20px 24px; border-radius:var(--r); background:linear-gradient(90deg, rgba(255,93,0,.18), rgba(255,93,0,.04)); box-shadow:inset 0 0 0 1px rgba(255,93,0,.35)}
.ab-fair svg{width:52px; height:52px}
.ab-fair p{color:var(--muted)}
.ab-fair p b{color:var(--text)}

/* ---------- his own words ---------- */
.ab-words{overflow:hidden; padding-top:0}
.ab-marquee{background:var(--ink); color:var(--cream); overflow:hidden; border-bottom:3px solid var(--ink); margin-bottom:var(--section-y)}
.ab-marquee__track{display:flex; width:max-content; animation:tickerMove 38s linear infinite}
.ab-marquee__track span{font-family:var(--font-display); font-size:clamp(26px, 2.6vw, 36px); line-height:1; letter-spacing:.03em; padding:14px 0 10px; white-space:nowrap}
.ab-marquee__track i{font-style:normal; color:var(--juice); margin:0 .6em}
.ab-words__grid{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px, 5vw, 72px); align-items:end}
.ab-words blockquote{margin:0}
.ab-words__big{font-size:clamp(70px, 11.5vw, 184px); line-height:.82}
.ab-words__cite{display:block; font-style:normal; margin-top:20px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.ab-words__second{position:relative; padding:26px 26px 24px; border-radius:var(--r-lg); background:var(--ink); color:var(--text); box-shadow:var(--frame)}
.ab-words__second > p:first-child{font-size:clamp(21px, 2vw, 27px); line-height:1.25; font-weight:700; letter-spacing:-.01em}
.ab-words__second > p:first-child::before{content:"\201C"; display:block; font-family:var(--font-display); font-size:90px; line-height:.6; color:var(--juice); margin-bottom:6px}
.ab-words__second .ab-words__cite{color:var(--dim)}
.ab-words__second .fine{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.ab-slice{position:absolute; right:-6%; top:-34%; width:clamp(220px, 28vw, 420px); opacity:.18; animation:abSpin 60s linear infinite; pointer-events:none; z-index:0}
.ab-words__grid > :not(.ab-slice){position:relative; z-index:1}

/* ---------- receipts (press wall) ---------- */
.ab-receipts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); align-items:start}
.rcpt-wrap{filter:drop-shadow(0 22px 30px rgba(0,0,0,.55)); transition:transform .3s var(--ease)}
.rcpt-wrap:nth-child(odd){transform:rotate(-1.3deg)}
.rcpt-wrap:nth-child(even){transform:rotate(1deg) translateY(18px)}
.rcpt-wrap:hover{transform:rotate(0) translateY(-6px)}
.rcpt{position:relative; background:#FFF7EE; color:var(--ink); padding:26px 22px 34px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x}
.rcpt::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--juice)}
.rcpt__top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-height:58px; padding-bottom:16px; border-bottom:2px dashed rgba(11,11,11,.3)}
.rcpt__yr{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; padding:5px 8px; border-radius:6px; background:var(--ink); color:var(--cream); white-space:nowrap}
.logo-ocw{font-family:var(--ab-font-archivo, "Archivo Black"), var(--font-body); font-size:27px; line-height:.9; letter-spacing:-.02em; text-transform:uppercase}
.logo-ocw span{display:block; font-size:.62em; letter-spacing:.24em; color:var(--juice-deep)}
.logo-eldon{font-family:var(--ab-font-playfair, "Playfair Display"), Georgia, serif; font-style:italic; font-weight:800; font-size:36px; line-height:.9; letter-spacing:-.02em}
.logo-eldon span{display:block; font-family:var(--font-mono); font-style:normal; font-size:10px; font-weight:700; letter-spacing:.3em; margin-top:6px}
.logo-dub{font-family:var(--ab-font-archivo, "Archivo Black"), var(--font-body); font-size:31px; line-height:1; letter-spacing:-.04em}
.logo-dub span{color:var(--juice-deep)}
.logo-nsa{font-family:var(--font-body); font-weight:800; font-size:23px; line-height:.95; letter-spacing:-.03em}
.logo-nsa span{display:inline-block; font-size:12px; letter-spacing:.12em; padding:3px 6px 2px; margin-bottom:5px; background:var(--ink); color:#FFF7EE}
.rcpt__big{display:block; font-family:var(--font-display); font-size:74px; line-height:.8; color:var(--juice-deep); margin:18px 0 6px}
.rcpt__body{padding-top:16px; display:flex; flex-direction:column; gap:10px}
.rcpt__body p{font-size:15px; line-height:1.45; color:rgba(11,11,11,.82)}
.rcpt__body q{display:block; font-size:18px; line-height:1.3; font-weight:700; color:var(--ink); quotes:"\201C" "\201D"}
.rcpt__src{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; color:rgba(11,11,11,.55); text-transform:uppercase}
.rcpt__bar{margin-top:18px; height:30px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); opacity:.85}
.rcpt__no{margin-top:6px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.14em; color:rgba(11,11,11,.5)}

/* ---------- crew ---------- */
.ab-crew .story-card__dek{font-size:14.5px}

/* ---------- CTA row ---------- */
.ab-cta{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 26px}
.ab-cta__tile{position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:var(--r-lg); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:transform .25s var(--ease), box-shadow .25s}
.ab-cta__tile:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,93,0,.65), 0 24px 50px -26px rgba(255,93,0,.7)}
.ab-cta__tile svg.ico{width:30px; height:30px; color:var(--juice)}
.ab-cta__tile h3{font-size:clamp(28px, 2.4vw, 34px)}
.ab-cta__tile p{font-size:14px; color:var(--muted)}
.ab-cta__tile .link-more{margin-top:auto}
.ab-cta__tile--orange{background:var(--juice); color:var(--ink); box-shadow:var(--frame-sm); --jt-depth:var(--ink)}
.ab-cta__tile--orange p{color:var(--on-orange-muted)}
.ab-cta__tile--orange svg.ico,.ab-cta__tile--orange .link-more{color:var(--ink)}
.ab-cta__tile--orange:hover{box-shadow:var(--frame-sm)}
.ab-keys-form{grid-template-columns:1fr 1fr 1fr}
.ab-keys-form .field--email{grid-column:span 1}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .ab-run{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:40px}
  .ab-run::before{display:none}
  .ab-receipts{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px}
  .ab-keys-form{grid-template-columns:1fr 1fr}
  .ab-keys-form .field--email{grid-column:1/-1}
}
@media (max-width:980px){
  .ab-hero__grid{grid-template-columns:1fr}
  .ab-card-zone{padding-top:20px}
  .ab-story{grid-template-columns:1fr}
  .ab-media{position:static}
  .ab-bento{grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:none}
  .ab-tile{aspect-ratio:4/5}
  .ab-tile--tall{grid-row:auto}
  .ab-tile--wide{aspect-ratio:16/10}
  .ab-words__grid{grid-template-columns:1fr}
  .grid--4.ab-crew{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:760px){
  .ab-hero::after{font-size:62vw; bottom:auto; top:38%; right:-8vw}
  .ab-h1 .jt-hero{font-size:clamp(76px, 25vw, 110px)}
  .ab-h1__b{font-size:clamp(46px, 14.5vw, 64px)}
  .ab-hero__acts .btn{flex:1}
  .ab-card{--w:min(318px, 84vw)}
  .ab-card-sticker{display:none}
  .ab-run{grid-template-columns:1fr; gap:0; padding-left:34px}
  .ab-run::after{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--juice-deep), var(--juice), var(--cream))}
  .ab-run li{padding:0 0 28px}
  .ab-run li::before{left:-34px; top:4px; z-index:1}
  .ab-run__now{padding:20px 18px!important}
  .ab-run__now::before{left:-34px!important; top:22px!important}
  .ab-bento{gap:10px}
  .ab-tile figcaption{left:12px; right:12px; bottom:11px; gap:4px}
  .ab-tile figcaption{padding:9px 11px 10px; left:8px; right:8px; bottom:8px; border-radius:10px}
  .ab-tile figcaption span,.ab-tile figcaption small{display:none}
  .ab-tile figcaption b{font-size:13px!important; line-height:1.25}
  .ab-fair{grid-template-columns:auto 1fr; padding:18px}
  .ab-fair .btn{grid-column:1/-1}
  .ab-fair svg{width:42px; height:42px}
  .ab-words__big{font-size:clamp(64px, 21vw, 96px)}
  .ab-slice{top:-12%; right:-30%}
  .ab-receipts{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:80%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:10px var(--gutter) 34px; scrollbar-width:none; row-gap:0}
  .rcpt-wrap{scroll-snap-align:center}
  .rcpt-wrap:nth-child(even){transform:rotate(1deg)}
  .grid--4.ab-crew{grid-template-columns:1fr; gap:14px}
  .ab-crew .story-card__dek{font-size:13.5px}
  .ab-cta{grid-template-columns:1fr}
  .ab-keys-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .ab-card__inner{transform:rotate(-3deg)!important}
  .ab-face--back{transform:none; opacity:0}
  .ab-card[data-flipped="true"] .ab-face--back{opacity:1}
  .ab-card[data-flipped="true"] .ab-face--front{opacity:0}
}