/* Home hero (19/10/2026): the property animation (Canvas 2D, property-anim.js) beside its deal card; cost cubes land on the card's cost rows. Everything sits under .ak-hero. */
/* patch 950: html.akjs (set in the head of index.html) keeps the stage space from the first paint, so nothing moves when the animation mounts */
.ak-hero{--ak-h:520px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px 40px;align-items:center;overflow-x:clip}
.ak-hero .ak-copy p:last-child{margin-bottom:0}
.ak-hero .ak-side{position:relative;display:flex;align-items:center;gap:clamp(20px,4vw,48px);min-width:0;align-self:start}
.ak-hero .ak-stage{position:relative;flex:1 1 auto;min-width:0;height:var(--ak-h)}
html:not(.akjs) .ak-hero:not(.ak-js) .ak-stage{display:none}
/* the film (and its poster) melts into the white page: every edge fades out, so no rectangle shows (Ari 20/10) */
.ak-hero.ak-js .ak-stage{background-color:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
@media (min-width:821px){.ak-hero .ak-stage .ak-film{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}}
/* the film never shows a play button or controls (iPhone Low Power Mode): property-anim.js keeps it hidden until it moves, and swaps to still frames if it will not */
.ak-hero .ak-film{transition:opacity .25s}
.ak-hero video::-webkit-media-controls,.ak-hero video::-webkit-media-controls-start-playback-button,.ak-hero video::-webkit-media-controls-overlay-play-button,.ak-hero video::-webkit-media-controls-play-button,.ak-hero video::-webkit-media-controls-panel,.ak-hero video::-webkit-media-controls-enclosure{display:none!important;-webkit-appearance:none;opacity:0!important}
/* the deal card: the reference's tablet panel, flat on the page, as real text */
.ak-hero .ak-card{flex:0 0 252px;min-width:0;background:#fff;border:1px solid #e6e9ef;border-radius:12px;padding:14px;color:#0b1b33;box-shadow:0 10px 30px rgba(11,27,51,.06);text-align:left;line-height:1.3}
.ak-hero .ak-info,.ak-hero .ak-kf,.ak-hero .ak-chip{transition:opacity .45s ease}
.ak-hero .ak-card.ak-dim .ak-info,.ak-hero .ak-card.ak-dim .ak-kf,.ak-hero .ak-card.ak-dim .ak-chip{opacity:.25}
.ak-hero .ak-tag{font-size:12px;font-weight:700;letter-spacing:.18em;color:#2f6bff;text-transform:uppercase}
.ak-hero .ak-area{font-size:14px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-hero .ak-price{font-size:18px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.ak-hero .ak-pt{font-size:12px;font-weight:700;color:#3b4456;margin:10px 0 4px}
.ak-hero .ak-row{margin:0 -7px;padding:4px 7px;border-radius:7px;font-size:12px;color:#3b4456}
.ak-hero .ak-row.ak-flash{animation:ak-flash .9s ease both}
.ak-hero .ak-track{height:6px;margin-top:4px;border-radius:4px;background:#edf0f4;overflow:hidden}
.ak-hero .ak-track i{display:block;height:100%;width:calc(var(--w)*100%);background:var(--c);border-radius:4px;transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.ak-hero.ak-js .ak-row:not(.ak-full) .ak-track i{transform:scaleX(0)}
.ak-hero .ak-sm{font-size:12px;color:#3b4456;font-weight:600;margin:10px 0 5px}
.ak-hero .ak-stack{display:flex;height:10px;border-radius:5px;background:#edf0f4;overflow:hidden}
.ak-hero .ak-stack i{flex:none;height:100%;width:var(--w);background:var(--c);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.ak-hero.ak-js .ak-stack i:not(.ak-full){transform:scaleX(0)}
.ak-hero .ak-kf{margin-top:12px}
.ak-hero .ak-kf small{display:block;font-size:12px;color:#5b6577}
.ak-hero .ak-kf b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.ak-hero .ak-chip{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:999px;background:#eef2fb;color:#1d2b4a;font-size:12px;font-weight:700}
@keyframes ak-flash{0%{background:transparent}30%{background:color-mix(in srgb,var(--c) 16%,transparent)}100%{background:transparent}}
@media (max-width:1000px){.ak-hero .ak-card{flex:0 0 230px}}
@media (max-width:820px){.ak-hero{--ak-h:360px;grid-template-columns:minmax(0,1fr)}.ak-hero .ak-side{gap:14px;align-items:stretch}.ak-hero.ak-js .ak-stage{height:auto;min-height:var(--ak-h);background:url(media/film-poster.jpg) 50% 55%/cover no-repeat}.ak-hero .ak-stage .ak-film{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 55%}.ak-hero .ak-card{flex:0 0 50%;max-width:240px;zoom:.88}}
@media (max-width:420px){.ak-hero{--ak-h:300px}.ak-hero .ak-card{flex:0 0 52%;zoom:.8;padding:12px}}
@media (prefers-reduced-motion:reduce){.ak-hero *{transition:none!important;animation:none!important}}
/* patch 962: the card is zoomed to .88 under 820px and .8 under 420px; these sizes keep its small text at 12px as drawn */
@media (max-width:820px){.ak-hero .ak-tag,.ak-hero .ak-pt,.ak-hero .ak-row,.ak-hero .ak-sm,.ak-hero .ak-kf small,.ak-hero .ak-chip{font-size:13.7px}}
@media (max-width:420px){.ak-hero .ak-tag,.ak-hero .ak-pt,.ak-hero .ak-row,.ak-hero .ak-sm,.ak-hero .ak-kf small,.ak-hero .ak-chip{font-size:15px}}
/* desktop (1024px+): the headline area fills the screen under the photo */
@media (min-width:1024px){.ak-hero{--ak-h:clamp(520px,36vw,700px);padding:64px 0;gap:24px 64px}.ak-hero h1{font-size:clamp(56px,4.6vw,84px);max-width:14ch}.ak-hero .lead{font-size:clamp(20px,1.3vw,24px);max-width:36ch}.ak-hero .ak-side{align-self:center}.ak-hero .ak-card{zoom:1.15}}
@media (min-width:1800px){.ak-hero .ak-card{zoom:1.3}}
.ak-hero .ak-eg{margin-top:10px;padding-top:8px;border-top:1px dashed #e6e9ef;color:#5b6676;font-size:11px;line-height:1.3;letter-spacing:.02em}