/* =====================================================================================
   The home page story (frontend/partials/home-story.blade.php, public/js/home-story.js).
   Bone tokens only (public/css/bone.css section 0), so day and night follow html[data-theme]
   like the rest of the site. Two layouts from the same markup:
     .hs             the plain way: an intro, six cards, a closing band
     .hs.hs--live    the 3D way: a sticky stage the height of the screen with the cards over it
   Every edge is rounded (handbook rule 11).
   ===================================================================================== */

html.bone .hs { position: relative; --hs-gut: max(28px, calc((100% - 1240px) / 2 + 28px)); color: var(--bn-text2); }
html.bone .hs-end { display: block; height: 1px; }

/* ---------- shared pieces ---------- */
html.bone .hs-kicker { display: inline-block; margin-bottom: 14px; color: var(--bn-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html.bone .hs-h2 { margin: 0 0 14px; color: var(--bn-text); font-size: clamp(32px, 4.2vw, 60px); font-weight: 900; font-stretch: 108%; letter-spacing: -1.4px; line-height: 1.02; text-wrap: balance; }
html.bone .hs-lead { margin: 0; max-width: 34em; color: var(--bn-text2); font-size: 18px; line-height: 1.5; }
html.bone .hs-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
html.bone .hs-ic { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; background: var(--bn-hot); color: #FFFFFF; box-shadow: 0 12px 22px -12px rgba(217, 45, 72, .9); }
html.bone .hs-ic svg { width: 22px; height: 22px; }
html.bone .hs-step { color: var(--bn-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html.bone .hs-n { margin-left: auto; color: transparent; -webkit-text-stroke: 1.5px var(--bn-hot); font-size: 46px; font-weight: 900; font-stretch: 125%; line-height: .8; letter-spacing: -1px; }
html.bone .hs-h3 { margin: 0 0 10px; color: var(--bn-text); font-size: clamp(22px, 2vw, 28px); font-weight: 900; letter-spacing: -.6px; line-height: 1.1; text-wrap: balance; }
html.bone .hs-chapter p { margin: 0 0 8px; color: var(--bn-text2); font-size: 16px; line-height: 1.55; }
html.bone .hs-chapter p:last-of-type { margin-bottom: 0; }
html.bone .hs-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* The ocean card's meter: USA, the dotted crossing with the ship on it, Poti. */
html.bone .hs-meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--bn-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
html.bone .hs-meter i { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--bn-track); overflow: visible; }
html.bone .hs-meter b { position: absolute; inset: 0 auto 0 0; width: calc(var(--hs-m, 0) * 100%); border-radius: 999px; background: var(--bn-primary); }
html.bone .hs-meter em { position: absolute; top: 50%; left: calc(var(--hs-m, 0) * 100%); display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--bn-card); color: var(--bn-text); box-shadow: var(--bn-float); }
html.bone .hs-meter em svg { width: 17px; height: 17px; }

/* ---------- the plain way ---------- */
html.bone .hs-canvas, html.bone .hs-wait, html.bone .hs-flash, html.bone .hs-rail, html.bone .hs-skip, html.bone .hs-cue { display: none; }
html.bone .hs:not(.hs--live) .hs-intro { max-width: 1240px; margin: 0 auto; padding: 110px 28px 0; }
html.bone .hs:not(.hs--live) .hs-cards { list-style: none; max-width: 1240px; margin: 34px auto 0; padding: 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html.bone .hs:not(.hs--live) .hs-chapter { padding: 28px; border-radius: var(--bn-r-l); background: var(--bn-card); }
html.bone .hs:not(.hs--live) .hs-fin { position: relative; overflow: hidden; isolation: isolate; max-width: calc(1240px - 56px); margin: 18px auto 0; padding: 54px 56px; border-radius: 40px; background: var(--bn-strong); color: var(--bn-on-strong); }
html.bone .hs:not(.hs--live) .hs-fin .hs-h2 { color: var(--bn-on-strong); }
html.bone .hs:not(.hs--live) .hs-fin .hs-lead { color: var(--bn-on-strong-muted); }
@media (max-width: 1020px) { html.bone .hs:not(.hs--live) .hs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    html.bone .hs:not(.hs--live) .hs-intro { padding: 76px 16px 0; }
    html.bone .hs:not(.hs--live) .hs-cards { grid-template-columns: 1fr; padding: 0 16px; gap: 12px; }
    html.bone .hs:not(.hs--live) .hs-chapter { padding: 22px; }
    html.bone .hs:not(.hs--live) .hs-fin { margin: 12px 16px 0; padding: 34px 24px; border-radius: 30px; }
    html.bone .hs-ctas .bh-btn { flex: 1 1 auto; }
}

/* ---------- the 3D way ---------- */
/* The site clips sideways overflow on body with overflow-x: hidden, which makes body a scroll box and stops
   the stage from pinning. clip does the same clipping without that (set inline by the partial's script too). */
html.bone body:has(.hs--live) { overflow-x: clip !important; }
html.bone .hs--live { margin-top: 18px; }
/* The stage is the large viewport tall (lvh), so a phone's address bar sliding away never resizes the 3D;
   what sits at the bottom is lifted by the bar's height (lvh - svh) so it is never under the bar. */
html.bone .hs--live .hs-track { position: relative; height: calc(var(--hs-len, 960) * 1vh + 100vh); height: calc(var(--hs-len, 960) * 1svh + 100lvh); }
html.bone .hs--live .hs-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; isolation: isolate; }
/* The world melts into the page: its top is see-through until the story starts and its foot goes see-through
   at the very end (--hs-ma, --hs-mb from home-story.js), so the page and its blobs carry on behind it and the
   stage never meets the search card or the closing band with an edge. The sky colour is the wait state. */
html.bone .hs--live .hs-canvas {
    display: block; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, #8FAFD1 0%, #C9D3DC 46%, #F1E6D6 100%);
    --hs-mask: linear-gradient(180deg, rgba(0, 0, 0, var(--hs-ma, 0)) 0%, rgba(0, 0, 0, calc(var(--hs-ma, 0) * .6 + .4)) 30%, #000 55%,
        #000 60%, rgba(0, 0, 0, calc(var(--hs-mb, 1) * .5 + .5)) 82%, rgba(0, 0, 0, var(--hs-mb, 1)) 100%);
    -webkit-mask-image: var(--hs-mask); mask-image: var(--hs-mask);
}
html.bone[data-theme="dark"] .hs--live .hs-canvas { background: linear-gradient(180deg, #03060C 0%, #0B1220 50%, #152033 100%); }
html.bone .hs--live .hs-rail, html.bone .hs--live .hs-skip { opacity: var(--hs-ma, 0); }
html.bone .hs--live .hs-canvas canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--bn-ease); }
html.bone .hs--ready .hs-canvas canvas { opacity: 1; }
html.bone .hs--live .hs-flash { display: block; position: absolute; inset: 0; z-index: 2; background: #FFFFFF; opacity: 0; pointer-events: none; }

/* A wait is a designed state: the sky, and a sentence with a moving bar. */
html.bone .hs--wait .hs-wait {
    display: inline-flex; align-items: center; gap: 12px; position: absolute; z-index: 3; left: 50%; bottom: 9vh; transform: translateX(-50%);
    padding: 12px 18px 12px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bn-card) 86%, transparent);
    color: var(--bn-text2); font-size: 14px; font-weight: 800; box-shadow: var(--bn-float); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.bone .hs-wait-bar { position: relative; width: 44px; height: 8px; border-radius: 999px; background: var(--bn-skel); overflow: hidden; }
html.bone .hs-wait-bar::after { content: ""; position: absolute; inset: 0; width: 45%; border-radius: 999px; background: var(--bn-skel-hi); animation: hs-wait 1.2s var(--bn-ease) infinite; }
@keyframes hs-wait { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

/* The cards over the world. Each is off until its chapter comes on. */
html.bone .hs--live .hs-card { position: absolute; z-index: 4; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .55s var(--bn-ease), transform .7s var(--bn-decel), visibility 0s linear .7s; }
html.bone .hs--live .hs-card.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s var(--bn-ease) .08s, transform .8s var(--bn-decel) .04s, visibility 0s; }
html.bone .hs--live .hs-cards { list-style: none; margin: 0; padding: 0; }
html.bone .hs--live .hs-chapter {
    left: var(--hs-gut); top: 50%; width: min(430px, 38vw); padding: 26px 28px 28px; border-radius: var(--bn-r-l);
    transform: translate(-26px, -42%) scale(.98);
    background: color-mix(in srgb, var(--bn-card) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--bn-line) 55%, transparent);
    box-shadow: 0 30px 60px -30px rgba(21, 20, 18, .45), 0 2px 10px rgba(21, 20, 18, .06);
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
}
html.bone .hs--live .hs-chapter.is-on { transform: translate(0, -42%); }
html.bone .hs--live .hs-intro { left: 50%; top: 50%; width: min(920px, calc(100% - 40px)); text-align: center; transform: translate(-50%, -44%) scale(.98); }
html.bone .hs--live .hs-intro.is-on { transform: translate(-50%, -50%); }
html.bone .hs--live .hs-intro::before { content: ""; position: absolute; inset: -18% -8%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bn-bg) 70%, transparent), transparent); }
html.bone .hs--live .hs-intro .hs-h2 { font-size: clamp(40px, 6.6vw, 104px); letter-spacing: -2.6px; font-stretch: 115%; }
html.bone .hs--live .hs-intro .hs-lead { margin: 0 auto; font-size: clamp(16px, 1.4vw, 20px); }
html.bone .hs--live .hs-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; color: var(--bn-muted); font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
html.bone .hs--live .hs-cue i { position: relative; width: 26px; height: 40px; border-radius: 999px; border: 2px solid currentColor; }
html.bone .hs--live .hs-cue i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 999px; background: currentColor; animation: hs-cue 1.8s var(--bn-ease) infinite; }
@keyframes hs-cue { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }
/* The ending: a glass card over the whole trip, with the logo, the line and one big way in. */
html.bone .hs--live .hs-fin {
    left: 50%; top: calc(var(--bn-bar-h) + 3vh); width: min(700px, calc(100% - 40px)); padding: 26px 36px 24px; text-align: center; border-radius: 34px;
    transform: translate(-50%, 22px) scale(.97);
    background: color-mix(in srgb, var(--bn-card) 82%, transparent); border: 1px solid color-mix(in srgb, var(--bn-line) 55%, transparent);
    box-shadow: 0 40px 80px -40px rgba(21, 20, 18, .55), 0 2px 10px rgba(21, 20, 18, .06);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
html.bone .hs--live .hs-fin.is-on { transform: translate(-50%, 0); }
html.bone .hs-fin-logo { display: inline-flex; justify-content: center; margin-bottom: 12px; }
html.bone .hs--live .hs-fin-logo { opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .6s var(--bn-ease) .05s, transform .9s var(--bn-release) .05s; }
html.bone .hs--live .hs-fin.is-on .hs-fin-logo { opacity: 1; transform: none; }
html.bone .hs--live .hs-fin .hs-h2 { font-size: clamp(30px, 4vw, 56px); letter-spacing: -1.8px; font-stretch: 112%; margin-bottom: 10px; }
html.bone .hs--live .hs-fin .hs-lead { margin: 0 auto; }
html.bone .hs--live .hs-fin .hs-ctas { justify-content: center; margin-top: 20px; }
html.bone .hs-go { height: 64px; padding: 0 34px; font-size: 18px; }
html.bone .hs--live .hs-fin .hs-go { box-shadow: 0 22px 40px -18px rgba(217, 45, 72, .9); }
html.bone .hs-fin-route { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--bn-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html.bone .hs-fin-route i { display: inline-grid; place-items: center; height: 22px; min-width: 22px; padding: 0 6px; border-radius: 7px; background: var(--bn-copart); color: #FFFFFF; font-size: 11px; font-style: normal; font-weight: 900; }
html.bone .hs-fin-route i + i { background: var(--bn-iaai); margin-right: 4px; }
html.bone .hs:not(.hs--live) .hs-fin-logo .cbp-v-light { display: none !important; }
html.bone .hs:not(.hs--live) .hs-fin-logo .cbp-v-dark { display: block !important; }
html.bone .hs:not(.hs--live) .hs-fin-route { color: var(--bn-on-strong-muted); }

/* While the stage is pinned (home-story.js sets html.hs-pinned) the site's go-to-top button steps aside. */
html.bone.hs-pinned .scrollup { opacity: 0 !important; pointer-events: none !important; }

/* Headings come up a word at a time. */
html.bone .hs--live .hs-w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transform-origin: 0 100%;
    transition: transform .8s var(--bn-decel) calc(var(--i) * 45ms + 60ms), opacity .45s var(--bn-ease) calc(var(--i) * 45ms + 60ms); }
html.bone .hs--live .is-on .hs-w { opacity: 1; transform: none; }

/* The rail: where you are in the story, and a way to jump. */
html.bone .hs--live .hs-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; position: absolute; z-index: 5; right: 26px; top: 50%; transform: translateY(-50%);
    padding: 14px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bn-card) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.bone .hs-rail-line { position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; margin-left: -1px; border-radius: 999px; background: var(--bn-line); }
html.bone .hs-rail-line b { position: absolute; inset: 0 0 auto 0; height: calc(var(--hs-p, 0) * 100%); border-radius: 999px; background: var(--bn-hot); }
html.bone .hs-rail button { position: relative; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
html.bone .hs-rail button span { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 999px; background: var(--bn-muted); color: transparent; font-size: 11px; font-weight: 900; line-height: 1; transition: width .3s var(--bn-release), height .3s var(--bn-release), background .2s; }
html.bone .hs-rail button:hover span { background: var(--bn-text); }
html.bone .hs-rail button.is-on span { width: 26px; height: 26px; background: var(--bn-hot); color: #FFFFFF; }
html.bone .hs--live .hs-skip { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 5; right: 26px; bottom: 26px; padding: 10px 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--bn-card) 78%, transparent); color: var(--bn-text2) !important; font-size: 13px; font-weight: 800; text-decoration: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.bone .hs--live .hs-skip svg { width: 15px; height: 15px; }
html.bone .hs--live .hs-skip:hover { color: var(--bn-text) !important; }

/* Phones: the card is a sheet at the bottom, the rail runs across the top. */
@media (max-width: 760px) {
    html.bone .hs--live { margin-top: 50px; }
    /* A compact sheet: three lines of story at most, lifted clear of the browser's bottom bar. */
    html.bone .hs--live .hs-chapter { left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh); width: auto; padding: 14px 16px 16px; border-radius: 22px; transform: translateY(22px) scale(.98); }
    html.bone .hs--live .hs-chapter.is-on { transform: none; }
    html.bone .hs--live .hs-top { gap: 10px; margin-bottom: 8px; }
    html.bone .hs--live .hs-ic { width: 32px; height: 32px; border-radius: 11px; }
    html.bone .hs--live .hs-ic svg { width: 17px; height: 17px; }
    html.bone .hs--live .hs-n { font-size: 28px; }
    html.bone .hs--live .hs-h3 { font-size: 19px; margin-bottom: 4px; }
    html.bone .hs--live .hs-chapter p { font-size: 14px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    html.bone .hs--live .hs-chapter p + p { display: none; }
    html.bone .hs--live .hs-meter { margin-top: 10px; }
    html.bone .hs--live .hs-intro .hs-h2 { letter-spacing: -1.4px; }
    html.bone .hs--live .hs-fin { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh); width: calc(100% - 20px); padding: 22px 18px 18px; border-radius: 28px; transform: translate(-50%, 24px) scale(.97); }
    html.bone .hs--live .hs-fin.is-on { transform: translate(-50%, 0); }
    html.bone .hs--live .hs-fin .hs-ctas { margin-top: 16px; }
    html.bone .hs-fin-route { margin-top: 14px; }
    html.bone .hs--live .hs-fin .hs-lead { font-size: 15px; }
    html.bone .hs-go { height: 58px; font-size: 17px; }
    html.bone .hs--live .hs-fin .hs-ctas .bh-btn { flex: 1 1 100%; }
    html.bone .hs--live .hs-skip { display: none; }
    html.bone .hs--wait .hs-wait { bottom: calc(18px + 100lvh - 100svh); }
    html.bone .hs--live .hs-rail { flex-direction: row; gap: 6px; right: auto; left: 50%; top: calc(var(--bn-bar-h) + 6px); transform: translateX(-50%); padding: 5px 8px; }
    html.bone .hs--live .hs-rail-line { left: 22px; right: 22px; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
    html.bone .hs--live .hs-rail-line b { inset: 0 auto 0 0; height: 100%; width: calc(var(--hs-p, 0) * 100%); }
    html.bone .hs--live .hs-rail button { width: 22px; height: 22px; }
    html.bone .hs--live .hs-rail button.is-on span { width: 22px; height: 22px; }
}
@media (max-width: 760px) and (max-height: 640px) {
    html.bone .hs--live .hs-chapter p + p { display: none; }
}
/* At the ending there is nothing left to skip, and the pill sat under the site's go-to-top button. */
html.bone .hs--live[data-ch="7"] .hs-skip { opacity: 0; pointer-events: none; transition: opacity .3s var(--bn-ease); }

/* ---------- Georgian (owner, 2026-10-23: "looks weird and misplaced when translated to georgian") ----------
   Georgian runs about one and a half times the English length, with wider letters and tall ascenders and
   descenders. At the English sizes the intro heading filled the screen in four lines and ran into its own
   lead, and on a phone the three-line limit cut every chapter off mid-sentence. Here: smaller headings,
   roomier lines, no squeezed tracking or stretch (the Georgian face has neither), and room on a phone for
   the whole chapter. */
html.bone:lang(ka) .hs-h2, html.bone:lang(ka) .hs-h3 { letter-spacing: -.2px; font-stretch: 100%; }
html.bone:lang(ka) .hs-h2 { font-size: clamp(26px, 3vw, 44px); line-height: 1.2; }
html.bone:lang(ka) .hs-h3 { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.28; }
html.bone:lang(ka) .hs-chapter p { font-size: 15px; line-height: 1.62; }
html.bone:lang(ka) .hs-lead { font-size: 17px; line-height: 1.6; }
html.bone:lang(ka) .hs-kicker, html.bone:lang(ka) .hs-step, html.bone:lang(ka) .hs-meter, html.bone:lang(ka) .hs-fin-route, html.bone:lang(ka) .hs-cue { letter-spacing: 0; }
html.bone:lang(ka) .hs--live .hs-intro .hs-h2 { font-size: clamp(30px, 4.3vw, 66px); letter-spacing: -.5px; font-stretch: 100%; line-height: 1.16; }
html.bone:lang(ka) .hs--live .hs-intro .hs-lead { font-size: clamp(15px, 1.25vw, 18px); }
html.bone:lang(ka) .hs--live .hs-fin .hs-h2 { font-size: clamp(26px, 3vw, 42px); letter-spacing: -.4px; font-stretch: 100%; line-height: 1.2; }
html.bone:lang(ka) .hs--live .hs-chapter { width: min(460px, 40vw); }
@media (max-width: 760px) {
    html.bone:lang(ka) .hs--live .hs-chapter { width: auto; }
    html.bone:lang(ka) .hs--live .hs-h3 { font-size: 17px; }
    html.bone:lang(ka) .hs--live .hs-chapter p { font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 6; }
    html.bone:lang(ka) .hs--live .hs-intro .hs-h2 { font-size: clamp(25px, 7.2vw, 34px); letter-spacing: -.3px; }
    html.bone:lang(ka) .hs--live .hs-fin .hs-h2 { font-size: clamp(22px, 6.2vw, 28px); }
    html.bone:lang(ka) .hs--live .hs-fin .hs-lead { font-size: 14px; }
}

/* ---------- the hero's apps (frontend/pages/home-bone): the apps card, folded into the hero ---------- */
html.bone .bh-play { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; max-width: 600px; margin-top: 28px; padding: 12px 14px 12px 12px;
    border-radius: var(--bn-r-m); background: rgba(241, 239, 234, .08); border: 1px solid rgba(241, 239, 234, .12); }
html.bone .bh-play-mark { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; background: var(--bn-on-strong); color: var(--bn-strong); }
html.bone .bh-play-mark svg { width: 20px; height: 20px; margin-left: 2px; }
html.bone .bh-play-txt { flex: 1 1 260px; min-width: 0; color: var(--bn-on-strong); font-size: 15px; font-weight: 800; line-height: 1.3; }
html.bone .bh-play-txt small { display: block; margin-top: 3px; color: var(--bn-on-strong-muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
html.bone .bh-play-go { height: 46px; padding: 0 18px; font-size: 14.5px; }
html.bone .bh-play-link { color: var(--bn-on-strong) !important; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
html.bone .bh-hero-apps { display: flex; justify-content: center; justify-self: end; width: 100%; max-width: 640px; }
html.bone .bh-hero-apps .bh-apps-art { width: 100%; }
html.bone .bh-hero-apps .dvl { --dvl-base: 1.22 !important; }
@media (max-width: 1280px) { html.bone .bh-hero-apps .dvl { --dvl-base: 1.05 !important; } }
@media (max-width: 991px) { html.bone .bh-hero-apps { justify-self: center; } html.bone .bh-hero-apps .dvl { --dvl-base: .8 !important; } }
@media (max-width: 620px) { html.bone .bh-hero-apps .dvl { --dvl-base: .7 !important; } html.bone .bh-play-go { flex: 1 1 100%; } }