/* Home story. Still on phones and with reduced motion; from 761px a pinned stage on a
   scroll timeline, or scrubbed through --p by hp-story.js where there is none. */
body.hp-ui .hp-story { --hps-ink: #0f4536; --hps-dim: #57635b; --hps-red: #a8322a; position: relative; padding: 18px 0 72px; }
body.hp-ui .hp-story-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.hp-ui .hp-story-frame {
    position: relative; isolation: isolate; overflow: hidden; width: min(1160px, calc(100% - 40px)); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border-radius: 34px;
    background: radial-gradient(520px 420px at 24% 40%, rgba(54, 140, 106, .3), transparent 65%), linear-gradient(165deg, #155a45, #0d3e31 55%, #062419) #0d3e31;
    border: 1px solid var(--hx-line);
}
/* The paper desk, cut by the brass seam of the hero and sign-in card */
body.hp-ui .hp-story-desk {
    position: absolute; z-index: -1; inset-block: -4%; inset-inline: 49% -14%;
    background: radial-gradient(640px 420px at 50% 40%, rgba(255, 255, 255, .5), transparent 70%), var(--hx-paper-2);
    border-inline-start: 1.5px solid rgba(240, 214, 170, .85); box-shadow: -30px 0 70px -40px rgba(0, 0, 0, .7);
    transform: skewX(-8deg); transform-origin: 0 100%;
}
[dir="rtl"] body.hp-ui .hp-story-desk { transform: skewX(8deg); transform-origin: 100% 100%; box-shadow: 30px 0 70px -40px rgba(0, 0, 0, .7); }
html[data-hp-theme="dark"] body.hp-ui .hp-story-desk { background: radial-gradient(640px 420px at 50% 40%, rgba(217, 178, 119, .07), transparent 70%), #0b1913; }

/* Halos in the colour behind the text keep it legible (and measurable) while pinned */
body.hp-ui .hp-story-copy { text-shadow: 0 0 1px #0d3e31, 0 0 1px #0d3e31; }
body.hp-ui .hp-story-paper { text-shadow: 0 0 1px #fcf8f0, 0 0 1px #fcf8f0; }
body.hp-ui :is(.hp-story-tune span, .hp-story-cta) { text-shadow: 0 0 1px #0f4536, 0 0 1px #0f4536; }
body.hp-ui .hp-story-tune span + span { text-shadow: 0 0 1px #f3e8d4, 0 0 1px #f3e8d4; }
body.hp-ui .hp-story-copy { position: relative; padding: 56px 40px 48px 52px; color: var(--hx-on-stage); display: flex; flex-direction: column; gap: 28px; }
body.hp-ui .hp-story-title { margin: 0; font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important; color: var(--hx-on-stage) !important; text-wrap: balance; }
body.hp-ui .hp-story-title em { display: block; color: var(--hx-cream) !important; }
body.hp-ui .hp-story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
body.hp-ui .hp-story-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; max-width: 36ch; }
body.hp-ui .hp-story-n { grid-row: span 2; font: italic 400 2.6rem/1 var(--hx-f-display); color: var(--hx-cream); }
body.hp-ui .hp-story-step strong { margin: 0; font: 400 1.7rem/1.1 var(--hx-f-display) !important; color: var(--hx-on-stage) !important; letter-spacing: 0 !important; }
body.hp-ui .hp-story-step p { margin: 6px 0 0; color: var(--hx-on-stage-2); font-size: .98rem; line-height: 1.6; }
body.hp-ui .hp-story-rail { display: none; }

/* The sheet */
body.hp-ui .hp-story-sheet { position: relative; margin: 0; padding: 48px 44px 48px 24px; display: grid; align-items: center; }
body.hp-ui .hp-story-paper {
    position: relative; padding: 34px 40px 26px; border-radius: 6px; color: #14231c; text-align: left;
    background: linear-gradient(transparent 0 calc(100% - 1px), rgba(20, 69, 54, .07) 0) 0 54px / 100% 2.05rem, linear-gradient(90deg, transparent 26px, rgba(184, 137, 74, .4) 0 27px, transparent 0), #fcf8f0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 60px -28px rgba(8, 26, 19, .45), 0 4px 12px -6px rgba(8, 26, 19, .2);
}
body.hp-ui .hp-story-paper::before { content: ""; position: absolute; inset: 8px -6px -8px 6px; z-index: -1; border-radius: 6px; background: #efe6d6; transform: rotate(2.2deg); box-shadow: 0 20px 40px -24px rgba(8, 26, 19, .4); }
html[data-hp-theme="dark"] body.hp-ui .hp-story-paper { background-color: #ece3d1; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .8); }
html[data-hp-theme="dark"] body.hp-ui .hp-story-paper::before { background: #cfc4ae; }
body.hp-ui .hp-story-tune { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: -12px -20px 14px 0; min-height: 26px; }
body.hp-ui .hp-story-tune span { padding: 4px 11px; border-radius: 999px; background: #0f4536; color: #f6efe2; font-size: .74rem; font-weight: 700; line-height: 1.3; }
body.hp-ui .hp-story-tune span + span { background: #f3e8d4; color: #6e4b1c; }
body.hp-ui .hp-story-stiff { margin: 0; font-size: 1.04rem; line-height: 2.05rem; color: var(--hps-dim); }
body.hp-ui .hp-story-strike {
    text-decoration: none; color: inherit;
    background: linear-gradient(var(--hps-red), var(--hps-red)) no-repeat 0 49% / 100% 2px;
}
body.hp-ui .hp-story-strike b {
    font-weight: inherit; text-decoration: underline rgba(184, 137, 74, .38); text-decoration-thickness: .38em; text-underline-offset: -.12em; text-decoration-skip-ink: none;
}
body.hp-ui .hp-story-new { margin: 2.05rem 0 0; font: italic 400 clamp(1.55rem, 2.3vw, 1.95rem)/2.05rem var(--hx-f-display); color: var(--hps-ink); }
body.hp-ui .hp-story-ln { display: block; width: fit-content; padding-block: 1px; }
body.hp-ui .hp-story-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(20, 35, 28, .1); }
body.hp-ui .hp-story-count { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: #45554c; }
body.hp-ui .hp-story-count svg { width: 16px; height: 16px; color: #b8894a; fill: none; stroke: #b8894a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-story-count .hp-flip { font-size: 1.35rem; }
html body.hp-ui .hp-story-paper .hp-flip { --hpf-top: #f6efe2; --hpf-bot: #ece2cf; --hpf-ink: #14231c; --hpf-edge: rgba(184, 137, 74, .6); }
body.hp-ui .hp-story-cta { padding: 11px 18px; font-size: .86rem; }
body.hp-ui .hp-story-quill { position: absolute; inset: -150px -150px -40px -60px; pointer-events: none; z-index: 3; }
body.hp-ui .hp-story-pen { position: absolute; left: 0; top: 0; width: 110px; height: 110px; filter: drop-shadow(10px 14px 8px rgba(40, 28, 10, .22)); transform: translate(var(--hps-qx, 470px), var(--hps-qy, 300px)); will-change: transform; }
body.hp-ui .hp-story:not(.is-live) .hp-story-pen, body.hp-ui .hp-story.has-3d .hp-story-pen { display: none; }
body.hp-ui .hp-quill-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Phones: forest band above, the sheet below */
@media (max-width: 760px) {
    body.hp-ui .hp-story { padding-top: 6px; }
    body.hp-ui .hp-story-frame { grid-template-columns: 1fr; width: calc(100% - 24px); border-radius: 26px; }
    body.hp-ui .hp-story-desk { inset: 62% -20% -2% -20%; transform: skewY(-5deg); transform-origin: 0 0; border-inline-start: 0; border-top: 1.5px solid rgba(240, 214, 170, .8); }
    [dir="rtl"] body.hp-ui .hp-story-desk { transform: skewY(5deg); transform-origin: 100% 0; }
    body.hp-ui .hp-story-copy { padding: 34px 24px 20px; gap: 22px; }
    body.hp-ui .hp-story-sheet { padding: 26px 14px 26px; }
    body.hp-ui .hp-story-paper { padding: 28px 22px 22px 36px; }
    body.hp-ui .hp-story-tune { margin-right: -8px; }
    body.hp-ui .hp-story-quill { display: none; }
}
/* Phones with motion: strike and ink arrive as the sheet scrolls in */
@supports (animation-timeline: view()) {
    @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
        body.hp-ui .hp-story-strike { animation: hpsStrikeIn linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
        body.hp-ui .hp-story-ln { animation: hpsInk linear both; animation-timeline: view(); animation-range: entry 90% cover 55%; }
    }
}
@keyframes hpsStrikeIn { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes hpsInk { from { mask-position: 60% 0; } to { mask-position: 0 0; } }
body.hp-ui .hp-story-ln { mask: linear-gradient(90deg, #000 33.3%, transparent 40%) 0 0 / 300% 100% no-repeat; }

/* ---------- The pinned stage ---------- */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-story { height: 300vh; padding: 0; view-timeline: --hps block; }
    body.hp-ui .hp-story-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 100px 0 26px; }
    body.hp-ui .hp-story-frame { height: 100%; max-height: 700px; }
    body.hp-ui .hp-story-copy { justify-content: space-between; }
    body.hp-ui .hp-story-steps { display: grid; flex: 1; align-content: center; }
    body.hp-ui .hp-story-step { grid-area: 1 / 1; }
    body.hp-ui .hp-story-n { font-size: 4.4rem; }
    body.hp-ui .hp-story-step strong { font-size: 2.3rem !important; }
    body.hp-ui .hp-story-rail { display: flex; gap: 6px; max-width: 220px; }
    body.hp-ui .hp-story-rail i { flex: 1; height: 2px; background: rgba(244, 236, 221, .18); position: relative; overflow: hidden; }
    body.hp-ui .hp-story-rail i::after {
        content: ""; position: absolute; inset: 0; background: var(--hx-cream); transform-origin: 0 50%;
        animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --hps; animation-range: cover 0% cover 100%;
    }
    [dir="rtl"] body.hp-ui .hp-story-rail i::after { transform-origin: 100% 50%; }
    body.hp-ui .hp-story-rail i:nth-child(1)::after { animation-name: hpsRail1; }
    body.hp-ui .hp-story-rail i:nth-child(2)::after { animation-name: hpsRail2; }
    body.hp-ui .hp-story-rail i:nth-child(3)::after { animation-name: hpsRail3; }

    /* One timeline: the section crossing the viewport, pinned from 25% to 75% */
    body.hp-ui .hp-story :is(.hp-story-title, .hp-story-step, .hp-story-sheet, .hp-story-tune span, .hp-story-strike, .hp-story-strike b, .hp-story-ln, .hp-story-count, .hp-story-cta) {
        animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
        animation-timeline: --hps; animation-range: cover 0% cover 100%;
    }
    body.hp-ui .hp-story-title { animation-name: hpsTitle; }
    body.hp-ui .hp-story-step[data-step="1"] { animation-name: hpsCap1; }
    body.hp-ui .hp-story-step[data-step="2"] { animation-name: hpsCap2; }
    body.hp-ui .hp-story-step[data-step="3"] { animation-name: hpsCap3; }
    [dir="rtl"] body.hp-ui .hp-story-step { --hps-from: -64px; --hps-clip: inset(0 100% 0 0); }
    body.hp-ui .hp-story-sheet { animation-name: hpsSheet; }
    body.hp-ui .hp-story-tune span:nth-child(1) { animation-name: hpsChip1; }
    body.hp-ui .hp-story-tune span:nth-child(2) { animation-name: hpsChip2; }
    body.hp-ui .hp-story-tune span:nth-child(3) { animation-name: hpsChip3; }
    body.hp-ui .hp-story-strike { animation-name: hpsStrike; }
    body.hp-ui .hp-story-strike b { animation-name: hpsMark; }
    body.hp-ui .hp-story-ln:nth-child(1) { animation-name: hpsLine1; }
    body.hp-ui .hp-story-ln:nth-child(2) { animation-name: hpsLine2; }
    body.hp-ui .hp-story-ln:nth-child(3) { animation-name: hpsLine3; }
    body.hp-ui .hp-story-count { animation-name: hpsCount; }
    body.hp-ui .hp-story-cta { animation-name: hpsCta; }
}
/* Without scroll timelines the script scrubs a one-second animation */
@supports not (animation-timeline: view()) {
    @media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
        body.hp-ui .hp-story :is(.hp-story-title, .hp-story-step, .hp-story-sheet, .hp-story-tune span, .hp-story-strike, .hp-story-strike b, .hp-story-ln, .hp-story-count, .hp-story-cta),
        body.hp-ui .hp-story-rail i::after {
            animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s);
        }
    }
}
@keyframes hpsTitle { 0% { transform: translateY(36px); } 17%, 100% { transform: none; } }
@keyframes hpsSheet { 0% { transform: translateY(120px); } 24%, 100% { transform: none; } }
@keyframes hpsCap1 {
    0%, 13% { opacity: 0; transform: translateX(var(--hps-from, 64px)); clip-path: var(--hps-clip, inset(0 0 0 100%)); visibility: hidden; }
    22%, 36% { opacity: 1; transform: none; clip-path: inset(0); visibility: visible; }
    40.5%, 100% { opacity: 0; transform: translateX(var(--hps-from, 64px)); clip-path: var(--hps-clip, inset(0 0 0 100%)); visibility: hidden; }
}
@keyframes hpsCap2 {
    0%, 38.5% { opacity: 0; transform: translateX(var(--hps-from, 64px)); clip-path: var(--hps-clip, inset(0 0 0 100%)); visibility: hidden; }
    42.5%, 54% { opacity: 1; transform: none; clip-path: inset(0); visibility: visible; }
    58%, 100% { opacity: 0; transform: translateX(var(--hps-from, 64px)); clip-path: var(--hps-clip, inset(0 0 0 100%)); visibility: hidden; }
}
@keyframes hpsCap3 {
    0%, 56% { opacity: 0; transform: translateX(var(--hps-from, 64px)); clip-path: var(--hps-clip, inset(0 0 0 100%)); visibility: hidden; }
    60%, 100% { opacity: 1; transform: none; clip-path: inset(0); visibility: visible; }
}
@keyframes hpsRail1 { 0%, 22% { transform: scaleX(0); } 40%, 100% { transform: none; } }
@keyframes hpsRail2 { 0%, 41% { transform: scaleX(0); } 57%, 100% { transform: none; } }
@keyframes hpsRail3 { 0%, 58% { transform: scaleX(0); } 74%, 100% { transform: none; } }
@keyframes hpsChip1 { 0%, 40% { opacity: 0; transform: translateY(-14px); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes hpsChip2 { 0%, 41.5% { opacity: 0; transform: translateY(-14px); } 44.5%, 100% { opacity: 1; transform: none; } }
@keyframes hpsChip3 { 0%, 43% { opacity: 0; transform: translateY(-14px); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes hpsMark {
    0%, 27% { text-decoration-color: rgba(184, 137, 74, 0); }
    32%, 46% { text-decoration-color: rgba(184, 137, 74, .42); }
    54%, 100% { text-decoration-color: rgba(184, 137, 74, .14); }
}
@keyframes hpsStrike {
    0%, 46% { background-size: 0 2px; color: #3f4c45; }
    55%, 100% { background-size: 100% 2px; color: #8b948d; }
}
@keyframes hpsLine1 { 0%, 58.5% { mask-position: 60% 0; } 63%, 100% { mask-position: 0 0; } }
@keyframes hpsLine2 { 0%, 63.5% { mask-position: 60% 0; } 67.5%, 100% { mask-position: 0 0; } }
@keyframes hpsLine3 { 0%, 68% { mask-position: 60% 0; } 71.5%, 100% { mask-position: 0 0; } }
@keyframes hpsCount { 0%, 69% { opacity: 0; } 71%, 100% { opacity: 1; } }
@keyframes hpsCta { 0%, 71% { opacity: 0; transform: translateY(8px); visibility: hidden; } 74%, 100% { opacity: 1; transform: none; visibility: visible; } }

/* Tablets in portrait: copy above the sheet */
@media (min-width: 761px) and (max-width: 1023px) {
    body.hp-ui .hp-story-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    body.hp-ui .hp-story-desk { inset: 48% -20% -4% -20%; transform: skewY(-4deg); transform-origin: 0 0; border-inline-start: 0; border-top: 1.5px solid rgba(240, 214, 170, .8); }
    [dir="rtl"] body.hp-ui .hp-story-desk { transform: skewY(4deg); transform-origin: 100% 0; }
    body.hp-ui .hp-story-copy { padding: 34px 40px 10px; gap: 14px; }
    body.hp-ui .hp-story-sheet { padding: 20px 48px 40px; }
}
@media (min-width: 761px) and (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-story-pin { padding-top: 90px; }
    body.hp-ui .hp-story-frame { max-height: none; }
    body.hp-ui .hp-story-n { font-size: 3rem; }
    body.hp-ui .hp-story-step strong { font-size: 1.8rem !important; }
}
@media (prefers-reduced-motion: reduce) { body.hp-ui .hp-story-quill { display: none; } }