/*
 * Homepage opening section, Phase 146.
 *
 * The stage is sized in cqw, so the whole scene scales as one drawing from a phone to a
 * desktop. Every rule states an element's END state, and keyframes only say how it arrives.
 * That keeps the reduced-motion and paused views correct: remove the animation and each
 * scene is still complete.
 */

.hx { background: #fff; padding: 36px 40px 8px; }
.hx-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    gap: 56px;
    align-items: start;
}

/* Left column */
.hx-kicker {
    color: var(--accent-dark);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}
.hx-copy h1 {
    color: var(--hero-text);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
    max-width: 15em;
    margin-bottom: 28px;
    text-wrap: balance;
}
.hx-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(36, 47, 103, .14);
    margin-bottom: 30px;
}
.hx-facts h2 {
    color: var(--accent-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}
.hx-facts p { color: #555; font-size: 16px; line-height: 1.55; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hx-actions .btn { margin: 0; }

/* The desk */
.hx-demo { min-width: 0; }
.hx-stage {
    position: relative;
    aspect-ratio: 10 / 8;
    overflow: hidden;
    border-radius: 12px;
    background: var(--footer-bg, #00552a);
    container-type: inline-size;
    color: #1a1a2e;
    line-height: 1.25;
}
.hx-stage small {
    display: block;
    font-size: 2.2cqw;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b7280;
}

/* Tick: draws itself */
.hx-tick { display: block; width: 3.8cqw; height: 3.8cqw; flex: none; }
.hx-tick path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

/* Clipboard, the one object that stays through all five scenes */
.hx-board {
    position: absolute;
    left: 4cqw;
    top: 5cqw;
    width: 56cqw;
    height: 70cqw;
    padding: 3.4cqw 1.7cqw 1.7cqw;
    border-radius: 1.6cqw;
    background: #003b1d;
    box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .18);
    transform: rotate(-1.5deg);
}
.hx-clip {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: -1.2cqw;
    width: 17cqw;
    height: 5cqw;
    margin-left: -8.5cqw;
    border-radius: 1cqw 1cqw .5cqw .5cqw;
    background: var(--cta-btn-bg);
    box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .25);
}
.hx-paper {
    position: relative;
    height: 100%;
    padding: 5cqw 3.2cqw 2cqw;
    overflow: hidden;
    border-radius: .8cqw;
    background: #fff;
}
.hx-paper > strong { display: block; font-size: 4.4cqw; font-weight: 700; margin-bottom: 1.6cqw; }
.hx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1cqw;
    min-height: 7.2cqw;
    padding: 0 1cqw;
    margin: 0 -1cqw;
    border-bottom: .25cqw solid #e5e7eb;
    font-size: 3cqw;
    font-weight: 500;
    transition: background-color .4s;
}
.hx-r3 { font-weight: 700; }

.hx-pills { display: grid; justify-items: end; }
.hx-p {
    grid-area: 1 / 1;
    padding: .55cqw 1.5cqw;
    border-radius: 5cqw;
    font-size: 2.4cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.3);
}
.p-wait { background: #fff4cc; color: #7a5b00; }
.p-miss { background: #c8281e; color: #fff; }
.p-prog { background: var(--cta-btn-bg); color: #1a1a2e; }
.p-ok   { background: var(--accent-dark); color: #fff; }

[data-scene="1"] .p-wait,
[data-scene="2"] .p-miss,
[data-scene="3"] .p-prog,
[data-scene="4"] .p-prog,
[data-scene="5"] .p-ok { opacity: 1; transform: none; }
[data-scene="2"] .p-miss { transition-delay: 2.0s; }
[data-scene="3"] .p-prog { transition-delay: .4s; }
[data-scene="5"] .p-ok   { transition-delay: 1.5s; }
[data-scene="2"] .hx-r3  { background: #fdecea; transition-delay: 2.0s; }
[data-scene="5"] .hx-r3  { background: #e6f5ea; transition-delay: 1.5s; }

.hx-lines { margin-top: 4cqw; }
.hx-lines i { display: block; height: 5.4cqw; border-bottom: .25cqw solid #e5e7eb; }

/* Scene 1: the inspector reads down the file */
.hx-lens {
    position: absolute;
    right: 1.5cqw;
    top: 12cqw;
    width: 11cqw;
    height: 11cqw;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 0, .22));
}
.hx-lens circle { fill: rgba(255, 192, 0, .14); stroke: #1a1a2e; stroke-width: 4; }
.hx-lens path { stroke: #1a1a2e; stroke-width: 6.5; stroke-linecap: round; }
[data-scene="1"] .hx-lens { animation: hx-read 4.6s cubic-bezier(.65, 0, .3, 1) both; }
@keyframes hx-read {
    0%   { opacity: 0; transform: translate(4cqw, -5cqw); }
    8%   { opacity: 1; transform: translate(0, -3.4cqw); }
    20%  { opacity: 1; transform: translate(0, -3.4cqw); }
    34%  { opacity: 1; transform: translate(0, 3.8cqw); }
    46%  { opacity: 1; transform: translate(0, 3.8cqw); }
    60%  { opacity: 1; transform: translate(0, 11cqw); }
    90%  { opacity: 1; transform: translate(0, 11cqw); }
    100% { opacity: 0; transform: translate(4cqw, 15cqw); }
}
[data-scene="1"] .hx-r1 .hx-tick path { animation: hx-draw .35s ease-out .95s both; }
[data-scene="1"] .hx-r2 .hx-tick path { animation: hx-draw .35s ease-out 2.0s both; }
@keyframes hx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Scene 2: the stamp comes down hard and the board takes the hit */
.hx-stamp {
    position: absolute;
    left: 50%;
    top: 39.5cqw;
    width: 42cqw;
    margin-left: -21cqw;
    padding: .7cqw;
    border: .55cqw solid #c8281e;
    border-radius: 1cqw;
    color: #c8281e;
    text-align: center;
    opacity: 0;
    transform: rotate(-9deg);
    mix-blend-mode: multiply;
    transition: opacity .35s;
}
.hx-stamp span {
    display: block;
    padding: 1.2cqw .6cqw;
    border: .25cqw solid #c8281e;
    border-radius: .5cqw;
    font-size: 3.3cqw;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
[data-scene="2"] .hx-stamp { opacity: .92; animation: hx-stamp .42s cubic-bezier(.5, 0, .9, .5) .55s both; }
@keyframes hx-stamp {
    0%   { opacity: 0; transform: rotate(-3deg) scale(2.3); }
    72%  { opacity: 1; transform: rotate(-9deg) scale(.96); }
    100% { opacity: .92; transform: rotate(-9deg) scale(1); }
}
[data-scene="2"] .hx-board { animation: hx-jolt .3s ease-out .85s both; }
@keyframes hx-jolt {
    0%, 100% { transform: rotate(-1.5deg) translateY(0); }
    30% { transform: rotate(-.9deg) translateY(.7cqw); }
    65% { transform: rotate(-1.7deg) translateY(-.15cqw); }
}

/* Right side of the desk: law note, fine notice and phone take turns */
.hx-law, .hx-fine, .hx-phone {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
}
.hx-law, .hx-fine { left: 62.5cqw; width: 33.5cqw; }

.hx-law {
    top: 22cqw;
    padding: 3cqw;
    background: #fff;
    border-radius: .8cqw;
    box-shadow: 0 1cqw 0 rgba(0, 0, 0, .18);
    transform: translateX(10cqw) rotate(5deg);
}
.hx-law strong { display: block; font-size: 5.4cqw; font-weight: 700; margin: .5cqw 0 1.4cqw; color: var(--accent-dark); }
.hx-law p { font-size: 2.9cqw; font-weight: 500; line-height: 1.35; color: #1a1a2e; }

.hx-fine {
    top: 11cqw;
    padding: 2.8cqw;
    background: var(--cta-btn-bg);
    border-radius: .8cqw;
    box-shadow: 0 1cqw 0 rgba(0, 0, 0, .22);
    transform: translateX(10cqw) rotate(6deg);
}
.hx-fine small { color: #1a1a2e; font-size: 2.4cqw; font-weight: 800; text-transform: uppercase; }
.hx-fine p { font-size: 3cqw; font-weight: 500; line-height: 1.3; margin: 1.8cqw 0 .4cqw; color: #1a1a2e; text-wrap: balance; }
.hx-fine strong { display: block; font-size: 5.3cqw; font-weight: 800; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-fine strong u { font-size: 3.2cqw; font-weight: 700; text-decoration: none; }
.hx-fine em { display: block; margin-top: 1.8cqw; padding-top: 1.4cqw; border-top: .25cqw solid rgba(26, 26, 46, .35); font-size: 2.8cqw; font-style: normal; font-weight: 600; line-height: 1.3; }

.hx-phone {
    left: 64cqw;
    top: 5.5cqw;
    width: 31cqw;
    height: 64cqw;
    padding: 1.3cqw;
    background: #111418;
    border-radius: 4.4cqw;
    box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .25);
    transform: translateY(70cqw) rotate(3deg);
}
.hx-screen { height: 100%; overflow: hidden; background: #fff; border-radius: 3.2cqw; }
.hx-screen header { padding: 3.2cqw 2.4cqw 1.6cqw; background: var(--accent-dark); color: #fff; font-size: 2.7cqw; font-weight: 800; }
.hx-screen small { padding: 2cqw 2.4cqw 1cqw; color: #1a1a2e; font-size: 2.7cqw; font-weight: 700; }
.hx-bar { height: 1.1cqw; margin: 0 2.4cqw 1.2cqw; overflow: hidden; background: #e5e7eb; border-radius: 1cqw; }
.hx-bar i { display: block; height: 100%; background: var(--accent); border-radius: 1cqw; }
.hx-mod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 6.2cqw;
    margin: 0 2.4cqw;
    border-bottom: .2cqw solid #eef0f3;
    font-size: 2.6cqw;
    font-weight: 500;
}
.hx-mod .hx-tick { width: 3cqw; height: 3cqw; }
.hx-screens { display: grid; }
.hx-sc {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility 0s .25s;
}
[data-scene="3"] .hx-sc-course,
[data-scene="4"] .hx-sc-quiz,
[data-scene="5"] .hx-sc-quiz { opacity: 1; visibility: visible; transition: opacity .25s .1s, visibility 0s; }
.hx-exam {
    display: grid;
    margin: 3cqw 2.4cqw 0;
    text-align: center;
    font-size: 2.8cqw;
    font-weight: 700;
}
.hx-exam span { padding: 1.5cqw 0; border-radius: 1cqw; background: var(--cta-btn-bg); color: #1a1a2e; }

/* Exam screen. Options are blank lines, never real questions. */
.hx-sc-quiz small { padding-bottom: .6cqw; }
.hx-q { margin: 0 2.4cqw .9cqw; }
.hx-q > span { display: block; font-size: 2.3cqw; font-weight: 700; color: #1a1a2e; }
.hx-opt {
    display: flex;
    align-items: center;
    gap: .9cqw;
    height: 2.5cqw;
    padding: 0 .5cqw;
    border-radius: .5cqw;
}
.hx-opt i { flex: none; width: 1.6cqw; height: 1.6cqw; border: .25cqw solid #b6bcc4; border-radius: 50%; }
.hx-opt u { display: block; height: .7cqw; width: 82%; border-radius: 1cqw; background: #e3e5e8; }
.hx-opt:nth-of-type(2) u { width: 64%; }
.hx-opt:nth-of-type(3) u { width: 74%; }
.hx-opt.is-on { background: #e6f5ea; }
.hx-opt.is-on i { border-color: var(--accent-dark); background: var(--accent-dark); }
.hx-opt.is-on u { background: #9fc9ae; }
.hx-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1cqw 2.4cqw .9cqw;
    font-size: 2.5cqw;
    font-weight: 600;
}
.hx-score b { font-size: 3.2cqw; font-weight: 800; color: var(--accent-dark); }
.hx-pass {
    margin: 0 2.4cqw;
    padding: 1.2cqw 0;
    border-radius: 1cqw;
    background: var(--accent-dark);
    color: #fff;
    font-size: 2.8cqw;
    font-weight: 700;
    text-align: center;
}

[data-scene="1"] .hx-law,
[data-scene="2"] .hx-fine,
[data-scene="3"] .hx-phone,
[data-scene="4"] .hx-phone,
[data-scene="5"] .hx-phone {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
[data-scene="1"] .hx-law { transform: rotate(2deg); transition-delay: .15s; }
[data-scene="2"] .hx-fine { transform: rotate(2.5deg); transition-delay: 1.1s; }
[data-scene="3"] .hx-phone { transform: rotate(1.5deg); }
[data-scene="4"] .hx-phone,
[data-scene="5"] .hx-phone { transform: rotate(1.5deg); }

/* Scene 3: the course fills up and stops there. The exam button wakes up, nothing is passed. */
[data-scene="3"] .hx-bar i { animation: hx-bar 2.6s cubic-bezier(.4, 0, .4, 1) .7s both; }
@keyframes hx-bar { from { width: 0; } to { width: 100%; } }
[data-scene="3"] .hx-m1 path { animation: hx-draw .3s ease-out 1.1s both; }
[data-scene="3"] .hx-m2 path { animation: hx-draw .3s ease-out 1.75s both; }
[data-scene="3"] .hx-m3 path { animation: hx-draw .3s ease-out 2.4s both; }
[data-scene="3"] .hx-m4 path { animation: hx-draw .3s ease-out 3.05s both; }
[data-scene="3"] .hx-exam span { animation: hx-ready .35s ease-out 3.5s both; }
@keyframes hx-ready { from { background: #e5e7eb; color: #9ca3af; } }

/* Scene 4: answers get picked one by one, then the score, then the pass */
.hx-q1 { --t: .8s; }
.hx-q2 { --t: 1.7s; }
.hx-q3 { --t: 2.6s; }
[data-scene="4"] .hx-opt.is-on { animation: hx-pick .25s ease-out var(--t) both; }
[data-scene="4"] .hx-opt.is-on i { animation: hx-dot .3s cubic-bezier(.2, .9, .3, 1.3) var(--t) both; }
[data-scene="4"] .hx-opt.is-on u { animation: hx-line .25s ease-out var(--t) both; }
@keyframes hx-pick { from { background: transparent; } }
@keyframes hx-dot { from { background: #fff; border-color: #b6bcc4; transform: scale(.7); } }
@keyframes hx-line { from { background: #e3e5e8; } }
[data-scene="4"] .hx-score { animation: hx-pass .35s cubic-bezier(.2, .9, .3, 1.3) 3.45s both; }
[data-scene="4"] .hx-pass { animation: hx-pass .35s cubic-bezier(.2, .9, .3, 1.3) 4.15s both; }
@keyframes hx-pass { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Scene 5: only now does the certificate land on the file */
.hx-cert {
    position: absolute;
    z-index: 3;
    left: 13cqw;
    top: 44.5cqw;
    width: 54cqw;
    padding: 1cqw;
    background: #fffdf6;
    border-radius: .8cqw;
    box-shadow: 0 1.4cqw 2.4cqw rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: rotate(-1deg);
    transition: opacity .2s, visibility 0s .2s;
}
[data-scene="5"] .hx-cert { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; animation: hx-land .7s cubic-bezier(.2, .8, .2, 1) .25s both; }
@keyframes hx-land {
    from { opacity: 0; transform: translate(26cqw, -12cqw) rotate(9deg) scale(.5); }
    to   { opacity: 1; transform: rotate(-1deg); }
}
.hx-cert-in {
    position: relative;
    min-height: 26cqw;
    padding: 2.6cqw 3cqw;
    border: .35cqw solid var(--accent-dark);
    border-radius: .5cqw;
}
.hx-cert strong { display: block; color: var(--accent-dark); font-size: 4.4cqw; font-weight: 800; margin-bottom: 2.2cqw; }
.hx-cert i { display: block; width: 28cqw; height: 1.2cqw; margin-bottom: 1.5cqw; background: #e3e5e8; border-radius: 1cqw; }
.hx-cert i + i { width: 22cqw; }
.hx-cert small { max-width: 30cqw; margin-top: 3cqw; color: #333; font-size: 2.5cqw; }
.hx-seal {
    position: absolute;
    right: 2.6cqw;
    bottom: 2.4cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11cqw;
    height: 11cqw;
    border-radius: 50%;
    background: var(--accent-dark);
    outline: .3cqw dashed var(--accent-dark);
    outline-offset: .6cqw;
}
.hx-seal .hx-tick { width: 6cqw; height: 6cqw; }
.hx-seal .hx-tick path { stroke: #fff; }
[data-scene="5"] .hx-seal { animation: hx-seal .36s cubic-bezier(.5, 0, .9, .5) 1.05s both; }
@keyframes hx-seal {
    0%   { opacity: 0; transform: scale(2) rotate(-16deg); }
    75%  { opacity: 1; transform: scale(.94) rotate(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Controls */
.hx-rail { display: none; align-items: flex-end; gap: 8px; margin-top: 12px; }
.hx-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: #666;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.hx-tab span { display: block; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; }
.hx-tab .t-short { display: none; }
.hx-tab i { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: #e3e6ea; position: relative; }
.hx-tab i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hx-tab[aria-current="step"] { color: var(--accent-dark); }
.hx-tab[aria-current="step"] i::after { transform: none; animation: hx-prog var(--d) linear both; }
@keyframes hx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hx-tab:focus-visible, .hx-pause:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; border-radius: 3px; }
.hx-pause {
    flex: none;
    position: relative;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid #cfd4da;
    border-radius: 50%;
    cursor: pointer;
}
.hx-pause::before, .hx-pause::after { content: ""; position: absolute; top: 10px; width: 3px; height: 10px; background: #444; }
.hx-pause::before { left: 10px; }
.hx-pause::after { left: 16px; }
.hx-demo.is-held .hx-pause::after { display: none; }
.hx-demo.is-held .hx-pause::before {
    left: 11px;
    width: 0;
    height: 0;
    background: none;
    border-left: 10px solid #444;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.hx-caps { display: grid; gap: 14px; margin-top: 12px; }
.hx-cap h3 { color: var(--accent-dark); font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.hx-cap p { color: #555; font-size: 15.5px; line-height: 1.5; }

/* With the script running: rail on, one caption at a time. The captions share a grid cell, so
   the tallest one reserves the height and changing scene never moves the page. Without the
   script all five stay readable as plain text. */
.hx-demo.is-live .hx-rail { display: flex; }
.hx-demo.is-live .hx-caps { gap: 0; }
.hx-demo.is-live .hx-cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.hx-demo[data-scene="1"].is-live [data-cap="1"],
.hx-demo[data-scene="2"].is-live [data-cap="2"],
.hx-demo[data-scene="3"].is-live [data-cap="3"],
.hx-demo[data-scene="4"].is-live [data-cap="4"],
.hx-demo[data-scene="5"].is-live [data-cap="5"] { opacity: 1; visibility: visible; transition: opacity .3s; }

/* Off screen, tab hidden, or paused by the visitor */
.hx-demo.is-frozen *, .hx-demo.is-frozen *::after { animation-play-state: paused !important; }
/* A scene chosen while paused shows complete, not its first frame */
.hx-demo.is-still .hx-stage *, .hx-demo.is-still .hx-tab i::after { animation: none !important; }
.hx-demo.is-still .hx-stage * { transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
    .hx-demo *, .hx-demo *::after { animation: none !important; transition: none !important; }
    .hx-pause { display: none; }
}

@media (max-width: 1100px) {
    .hx-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .hx-demo { width: 100%; max-width: 640px; margin: 0 auto; }
    .hx-copy h1 { max-width: none; }
}
@media (max-width: 768px) {
    .hx { padding: 22px 16px 0; }
    .hx-copy h1 { font-size: 30px; letter-spacing: -.5px; margin-bottom: 20px; }
    .hx-facts { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; margin-bottom: 22px; }
    .hx-actions .btn { flex: 1 1 auto; padding: 13px 16px; text-align: center; }
    .hx-tab { flex: 1 1 auto; font-size: 13px; }
}
/* Five tabs do not fit a phone with "The" in front: one word each, as wide as it needs. */
@media (max-width: 480px) {
    .hx-tab .t-long { display: none; }
    .hx-tab .t-short { display: block; }
}
@media (max-width: 360px) {
    .hx-rail { gap: 6px; }
    .hx-tab { font-size: 12px; }
}