/*
 * The homepage: the "Press GO" Session hero and "Load the Bar" (owner decision
 * HOME-PRESS-GO-BAR). The CSP forbids scripts and inline styles, so everything
 * that moves here is CSS: checkbox and radio state, counters and scroll timelines.
 * Without scroll timelines or @property the page stays complete, just stiller.
 */
/* Self-hosted under the SIL Open Font License (fonts/big-shoulders-display-OFL.txt). */
@font-face {
    font-family: "Big Shoulders Display";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/big-shoulders-display-latin-wght.woff2") format("woff2");
}

.home-main {
    --go: #9be04a;
    --go-ink: #0a1703;
    --display: "Big Shoulders Display", Impact, Haettenschweiler, "Arial Narrow Bold",
        "Roboto Condensed", "sans-serif-condensed", sans-serif;
    --screen-edge: rgb(255 255 255 / 0.14);
    --steel: linear-gradient(180deg, #e5ecee, #8b9a9f 55%, #b7c3c7);
    --steel-side: linear-gradient(90deg, #e5ecee, #8b9a9f 55%, #b7c3c7);
}

/* ---------- Plate colors: the bar, its sections and the page progress line ---------- */

.plate-sessions { --plate: #0b5f76; --plate-ink: #ffffff; }
.plate-history { --plate: #2470c4; --plate-ink: #ffffff; }
.plate-achievements { --plate: #9be04a; --plate-ink: #0a1703; }
.plate-schedule { --plate: #e8f1f3; --plate-ink: #06222b; }
.plate-exercises { --plate: #1b3a43; --plate-ink: #ffffff; }
.plate-notes { --plate: #0093b5; --plate-ink: #04161b; }
.plate-business { --plate: #0d4761; --plate-ink: #ffffff; }
.plate-watch { --plate: #7fc3d8; --plate-ink: #06222b; }

/* --mark is the plate's color as text on its section's background. */
.set-sessions { --mark: #3fb6d3; }
.set-achievements { --mark: #9be04a; }
.set-exercises { --mark: #8fd9e8; }
.set-watch { --mark: #7fc3d8; }
.set-history { --mark: #2470c4; }
.set-schedule { --mark: #0b5f76; }
.set-notes { --mark: #007d9b; }
.set-business { --mark: #0d4761; }

@media (prefers-color-scheme: dark) {
    .set-history { --mark: #6cb0f5; }
    .set-schedule { --mark: #e8f1f3; }
    .set-notes { --mark: #2fc0e0; }
    .set-business { --mark: #7fc3d8; }
}

.home-progress {
    display: none;
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-progress {
            position: fixed;
            z-index: 25;
            inset-block-start: 0;
            inset-inline: 0;
            display: block;
            height: 0.25rem;
            background: linear-gradient(90deg, #0b5f76, #2470c4, #9be04a, #e8f1f3, #1b3a43, #0093b5, #0d4761, #7fc3d8);
            transform-origin: 0 50%;
            animation: home-progress linear both;
            animation-timeline: scroll(root);
        }
    }
}

@keyframes home-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---------- Hero ---------- */

.go-hero {
    overflow: hidden;
    padding-block: clamp(2rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem);
    background:
        radial-gradient(50rem 26rem at 90% 0%, rgb(0 147 181 / 0.2), transparent 70%),
        linear-gradient(170deg, #004e61 0%, #0b2a33 45%, var(--ink) 100%);
}

.go-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.go-copy h1 {
    margin-block-end: 1rem;
    font: 900 clamp(4.1rem, 2rem + 11vw, 9rem) / 0.86 var(--display);
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

.go-copy h1 .highlight {
    display: block;
    margin-block-start: 0.35em;
    color: var(--go);
    font-size: 0.46em;
    line-height: 1;
}

.go-copy .eyebrow {
    margin-block-end: 0.75rem;
}

.go-copy .lede {
    max-width: 34rem;
    margin-block: 0 1.5rem;
    color: #d7e8ec;
}

.home-main .store-badge {
    --badge-height: 2.75rem;
}

/* ---------- Try it: the Session card ---------- */

.try {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #0e171b;
    box-shadow: 0 0 0 1px var(--screen-edge), 0 2.5rem 5rem -2rem #000000;
    counter-reset: try-sets try-reps try-volume;
}

.try .try-input {
    position: absolute;
    width: 1px;
    min-height: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
}

.try #try-go,
.try #try-go:checked ~ .try-input:not(#try-finish) {
    visibility: visible;
}

.try-band {
    padding: 0.9rem 1.1rem 0.8rem;
    background: linear-gradient(180deg, #006a80, #004e61);
}

.try-band-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
}

.try-workout {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.try-go-button,
.try-finish-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.4rem 1.5rem;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.try-go-button {
    color: var(--go-ink);
    background: var(--go);
    font-size: 1.1rem;
    animation: try-pulse 2.4s ease-out infinite;
}

.try-go-button svg {
    width: 0.75rem;
    fill: currentColor;
}

@keyframes try-pulse {
    0% { box-shadow: 0 0 0 0 rgb(155 224 74 / 0.55); }
    70%, 100% { box-shadow: 0 0 0 1rem rgb(155 224 74 / 0); }
}

.try-finish-button {
    display: none;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.try-status {
    margin: 0.2rem 0 0.55rem;
    font-size: 0.95rem;
    font-weight: 650;
}

.try-status-ready b {
    margin-inline-end: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    color: #06222b;
    background: #cfe9f0;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.try-status-live {
    display: none;
    align-items: center;
    gap: 0.35rem;
}

.try-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--go);
}

.try-clock {
    margin-inline-end: 0.5rem;
    font-weight: 800;
}

.try-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    height: 0.3rem;
}

.try-bar b {
    background: rgb(255 255 255 / 0.18);
    transition: background-color 0.25s;
}

.try-review {
    margin: 0.8rem 0.8rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.7rem;
    color: #dbe7ea;
    background: #1b262b;
    font-size: 0.88rem;
}

.try-card {
    margin: 0.8rem;
    padding: 0.9rem;
    border: 1px solid #36505a;
    border-radius: 1rem;
    background: #161f24;
}

.try-exercise {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.try-plan {
    margin: 0.15rem 0 0.7rem;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.try-row {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 3.5rem 2.75rem 2.75rem;
    gap: 0.35rem;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.6rem;
    transition: background-color 0.25s;
}

.try-row-head {
    color: var(--ink-muted);
    font-size: 0.68rem;
    font-weight: 750;
    text-align: center;
}

.try-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid #9fb3ba;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
}

.try-previous {
    color: var(--ink-muted);
    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.try-value {
    padding-block: 0.5rem;
    border-radius: 0.55rem;
    color: #cfdde1;
    background: #232f35;
    text-align: center;
}

label.try-tick {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #9fb3ba;
    border-radius: 0.6rem;
    color: transparent;
    font-size: 1.25rem;
    font-weight: 900;
    opacity: 0.4;
    pointer-events: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.try-tick::after {
    content: "✓";
}

.try-dock {
    display: none;
    gap: 0.05rem;
    padding: 0.7rem 1.1rem 0.85rem;
    border-block-start: 3px solid var(--go);
    background: #063744;
}

.try-rest-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.try-rest-next {
    color: #d7e8ec;
    font-size: 0.85rem;
}

.try-dock-done .try-rest-next {
    color: #ffffff;
    font-weight: 650;
}

.try-done {
    display: none;
    padding: 1.1rem;
    background: linear-gradient(180deg, #063744, #0e171b);
}

.try-done-tag {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.try-done-title {
    margin: 0.1rem 0 0.8rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.try-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.try-totals > div {
    padding: 0.55rem 0.7rem;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 0.08);
}

.try-totals dt {
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.try-totals dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.try-total-sets::before { content: counter(try-sets); }
.try-total-reps::before { content: counter(try-reps); }
/* Every set is 200 lbs for 5 reps, so a thousand per set keeps the digits simple. */
.try-total-volume::before { content: counter(try-volume) ",000"; }

.try-done-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-block-end: 1rem;
}

.try-done-row img {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
}

.try-done-row p {
    margin: 0;
    color: #d7e8ec;
    font-size: 0.92rem;
}

button.try-again {
    border-color: #ffffff;
    color: #ffffff;
    background: transparent;
}

button.try-again:hover {
    color: var(--go-ink);
    background: var(--go);
}

/* Press GO. */
#try-go:checked ~ .try-band .try-go-button,
#try-go:checked ~ .try-band .try-status-ready,
#try-go:checked ~ .try-review {
    display: none;
}

#try-go:checked ~ .try-band .try-status-live {
    display: flex;
}

#try-go:checked ~ .try-card label.try-tick {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

#try-go:checked ~ .try-card label.try-tick:hover {
    border-color: var(--go);
    color: rgb(255 255 255 / 0.35);
}

/* The row the app would highlight: the first set not yet logged. */
#try-go:checked ~ #try-set-1:not(:checked) ~ .try-card .try-row-1 .try-number,
#try-set-1:checked ~ #try-set-2:not(:checked) ~ .try-card .try-row-2 .try-number,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:not(:checked) ~ .try-card .try-row-3 .try-number,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:checked ~ #try-set-4:not(:checked) ~ .try-card .try-row-4 .try-number {
    border-color: #7fc3d8;
    color: #06222b;
    background: #7fc3d8;
}

#try-go:checked ~ #try-set-1:not(:checked) ~ .try-card .try-row-1 .try-value,
#try-set-1:checked ~ #try-set-2:not(:checked) ~ .try-card .try-row-2 .try-value,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:not(:checked) ~ .try-card .try-row-3 .try-value,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:checked ~ #try-set-4:not(:checked) ~ .try-card .try-row-4 .try-value {
    color: #ffffff;
    background: #10191d;
    box-shadow: inset 0 0 0 1.5px #7fc3d8;
}

/* Tap ✓: the set is logged. */
#try-set-1:checked { counter-increment: try-sets try-reps 5 try-volume; }
#try-set-2:checked { counter-increment: try-sets try-reps 5 try-volume; }
#try-set-3:checked { counter-increment: try-sets try-reps 5 try-volume; }
#try-set-4:checked { counter-increment: try-sets try-reps 5 try-volume; }

.try-count::before {
    content: counter(try-sets);
}

#try-set-1:checked ~ .try-card .try-row-1,
#try-set-2:checked ~ .try-card .try-row-2,
#try-set-3:checked ~ .try-card .try-row-3,
#try-set-4:checked ~ .try-card .try-row-4 {
    background: #123a44;
}

#try-set-1:checked ~ .try-card .try-row-1 .try-number,
#try-set-2:checked ~ .try-card .try-row-2 .try-number,
#try-set-3:checked ~ .try-card .try-row-3 .try-number,
#try-set-4:checked ~ .try-card .try-row-4 .try-number {
    border-color: transparent;
    color: #ffffff;
}

#try-set-1:checked ~ .try-card .try-row-1 .try-value,
#try-set-2:checked ~ .try-card .try-row-2 .try-value,
#try-set-3:checked ~ .try-card .try-row-3 .try-value,
#try-set-4:checked ~ .try-card .try-row-4 .try-value {
    color: #ffffff;
    background: none;
    font-weight: 800;
}

#try-go:checked ~ #try-set-1:checked ~ .try-card .try-row-1 label.try-tick,
#try-go:checked ~ #try-set-2:checked ~ .try-card .try-row-2 label.try-tick,
#try-go:checked ~ #try-set-3:checked ~ .try-card .try-row-3 label.try-tick,
#try-go:checked ~ #try-set-4:checked ~ .try-card .try-row-4 label.try-tick {
    border-color: #7fc3d8;
    color: #06222b;
    background: #7fc3d8;
}

#try-set-1:checked ~ .try-band .try-bar b:nth-child(1),
#try-set-2:checked ~ .try-band .try-bar b:nth-child(2),
#try-set-3:checked ~ .try-band .try-bar b:nth-child(3),
#try-set-4:checked ~ .try-band .try-bar b:nth-child(4) {
    background: var(--go);
}

/* FINISH appears once a set is logged, so a finished Session always has one. */
#try-set-1:checked ~ .try-band .try-finish-button,
#try-set-2:checked ~ .try-band .try-finish-button,
#try-set-3:checked ~ .try-band .try-finish-button,
#try-set-4:checked ~ .try-band .try-finish-button {
    display: inline-flex;
}

.try #try-set-1:checked ~ #try-finish,
.try #try-set-2:checked ~ #try-finish,
.try #try-set-3:checked ~ #try-finish,
.try #try-set-4:checked ~ #try-finish {
    visibility: visible;
}

#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:checked ~ #try-set-4:checked ~ .try-band .try-finish-button {
    border-color: var(--go);
    color: var(--go-ink);
    background: var(--go);
}

/* The dock names the first set still to do; appearing restarts its timer. */
#try-set-1:not(:checked) ~ #try-set-2:checked ~ #try-finish:not(:checked) ~ .try-dock-1,
#try-set-1:not(:checked) ~ #try-set-3:checked ~ #try-finish:not(:checked) ~ .try-dock-1,
#try-set-1:not(:checked) ~ #try-set-4:checked ~ #try-finish:not(:checked) ~ .try-dock-1,
#try-set-1:checked ~ #try-set-2:not(:checked) ~ #try-finish:not(:checked) ~ .try-dock-2,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:not(:checked) ~ #try-finish:not(:checked) ~ .try-dock-3,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:checked ~ #try-set-4:not(:checked) ~ #try-finish:not(:checked) ~ .try-dock-4,
#try-set-1:checked ~ #try-set-2:checked ~ #try-set-3:checked ~ #try-set-4:checked ~ #try-finish:not(:checked) ~ .try-dock-done {
    display: grid;
}

/* Finish. */
#try-finish:checked ~ .try-card,
#try-finish:checked ~ .try-band {
    display: none;
}

#try-finish:checked ~ .try-done {
    display: block;
}

/* Keyboard focus lands on the hidden inputs, so it shows on what they control. */
#try-go:focus-visible ~ .try-band .try-go-button,
#try-finish:focus-visible ~ .try-band .try-finish-button,
#try-set-1:focus-visible ~ .try-card .try-row-1 label.try-tick,
#try-set-2:focus-visible ~ .try-card .try-row-2 label.try-tick,
#try-set-3:focus-visible ~ .try-card .try-row-3 label.try-tick,
#try-set-4:focus-visible ~ .try-card .try-row-4 label.try-tick {
    outline: 0.2rem solid var(--ink-accent);
    outline-offset: 0.15rem;
}

/* The clock counts up from GO and the rest timer down from 1:45. Each digit is a strip
   of numbers that steps upward. Animating counters instead does not repaint in Safari. */
.try-clock,
.try-rest-time {
    display: inline-flex;
    line-height: 1.1;
}

.digit {
    height: 1.1em;
    overflow: hidden;
    font-style: normal;
}

.digit::before {
    display: block;
    text-align: center;
    white-space: pre;
}

.digit-up-m::before,
.digit-up-o::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
}

.digit-up-t::before {
    content: "0\A 1\A 2\A 3\A 4\A 5";
}

.digit-up-o::before { animation: digit-roll 10s steps(10, end) infinite; }
.digit-up-t::before { animation: digit-roll 60s steps(6, end) infinite; }
.digit-up-m::before { animation: digit-roll 600s steps(10, end) infinite; }

.digit-down-m::before {
    content: "1\A 0";
    animation: digit-roll 92s steps(2, end) forwards;
}

.digit-down-t::before {
    content: "5\A 4\A 3\A 2\A 1\A 0";
    animation: digit-roll 60s steps(6, end) -14s 1.9833 forwards;
}

.digit-down-o::before {
    content: "9\A 8\A 7\A 6\A 5\A 4\A 3\A 2\A 1\A 0";
    animation: digit-roll 10s steps(10, end) -4s 10.9 forwards;
}

@keyframes digit-roll {
    to { transform: translateY(-100%); }
}

.try-rest-time {
    font: 800 2.6rem / 1.1 var(--display);
}

/* ---------- Load the Bar ---------- */

.bar-section {
    overflow: hidden;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(60rem 30rem at 50% 62%, rgb(0 147 181 / 0.2), transparent 70%),
        #0a1a20;
}

.bar-head {
    text-align: center;
}

.bar-head h2 {
    margin-block-end: 0.5rem;
    font: 900 clamp(3.25rem, 1.5rem + 8.5vw, 7.5rem) / 0.95 var(--display);
    text-transform: uppercase;
}

.bar-head .lede {
    margin-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* Phones: the bar stands upright and the plates read as rows. */
.bar-rig {
    position: relative;
    width: min(100% - 2rem, 72rem);
    margin-inline: auto;
}

.bar-rig::before {
    position: absolute;
    inset-block: -1.5rem;
    inset-inline-start: 50%;
    width: 0.9rem;
    margin-inline-start: -0.45rem;
    border-radius: 0.2rem;
    background: var(--steel-side);
    content: "";
}

.bar-plates {
    position: relative;
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bar-plates > li {
    display: flex;
    justify-content: center;
    width: 100%;
}

.plate {
    --size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: var(--size);
    min-height: 3.4rem;
    padding: 0.35rem 1.1rem;
    border-radius: 0.9rem;
    color: var(--plate-ink);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.2), transparent 22%, transparent 78%, rgb(0 0 0 / 0.22)),
        var(--plate);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.16), 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.8);
    font-weight: 750;
    text-decoration: none;
    transition: filter 0.15s, translate 0.2s;
}

.band .plate:not(.cta-button, .store-badge) {
    color: var(--plate-ink);
}

.plate:hover,
.plate:focus-visible {
    filter: brightness(1.12);
}

.plate b {
    font: 900 1.65rem / 1 var(--display);
}

li:nth-child(2) > .plate { --size: 95%; }
li:nth-child(3) > .plate { --size: 89%; }
li:nth-child(4) > .plate { --size: 83%; }
li:nth-child(5) > .plate { --size: 77%; }
li:nth-child(6) > .plate { --size: 71%; }
li:nth-child(7) > .plate { --size: 65%; }
li:nth-child(8) > .plate { --size: 59%; }

@media (min-width: 48rem) {
    /* Wider screens: the bar lies flat and the plates stand on it, heaviest first. */
    .bar-rig {
        width: 100%;
        min-height: 25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bar-rig::before {
        inset-block: 50% auto;
        inset-inline: 0;
        width: auto;
        height: 1rem;
        margin: -0.5rem 0 0;
        border-radius: 0;
        background: var(--steel);
    }

    .bar-plates {
        display: flex;
        align-items: center;
        gap: 0.28rem;
    }

    /* The sleeve the plates sit against, and the collar that holds them on. */
    .bar-plates::before,
    .bar-plates::after {
        flex: none;
        background: var(--steel);
        content: "";
    }

    .bar-plates::before {
        width: 3.25rem;
        height: 1.8rem;
    }

    .bar-plates::after {
        width: 1.5rem;
        height: 3.25rem;
        border-radius: 0.3rem;
    }

    .bar-plates > li {
        width: auto;
    }

    .plate {
        flex-direction: column;
        justify-content: center;
        gap: 0.7rem;
        width: var(--plate-width);
        height: var(--plate-height);
        padding: 0.5rem 0;
        background:
            linear-gradient(90deg, rgb(255 255 255 / 0.2), transparent 22%, transparent 78%, rgb(0 0 0 / 0.25)),
            var(--plate);
    }

    .plate:hover,
    .plate:focus-visible {
        translate: 0 -0.7rem;
    }

    .plate span {
        writing-mode: vertical-rl;
        font-size: 1.05rem;
        letter-spacing: 0.02em;
    }

    li:nth-child(1) > .plate { --plate-width: 5.75rem; --plate-height: 24rem; }
    li:nth-child(2) > .plate { --plate-width: 5.25rem; --plate-height: 21.5rem; }
    li:nth-child(3) > .plate { --plate-width: 4.75rem; --plate-height: 19rem; }
    li:nth-child(4) > .plate { --plate-width: 4.25rem; --plate-height: 16.75rem; }
    li:nth-child(5) > .plate { --plate-width: 3.9rem; --plate-height: 14.75rem; }
    li:nth-child(6) > .plate { --plate-width: 3.5rem; --plate-height: 12.75rem; }
    li:nth-child(7) > .plate { --plate-width: 3.2rem; --plate-height: 11.25rem; }
    li:nth-child(8) > .plate { --plate-width: 3rem; --plate-height: 10rem; }

    li:nth-child(7) > .plate b,
    li:nth-child(8) > .plate b {
        font-size: 1.25rem;
    }
}

/* As the bar scrolls in, the plates slide on one after another. */
@supports (animation-timeline: view()) {
    @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
        .plate {
            animation: plate-load linear both;
            animation-timeline: view();
        }

        li:nth-child(1) > .plate { animation-range: entry 5% entry 45%; }
        li:nth-child(2) > .plate { animation-range: entry 10% entry 50%; }
        li:nth-child(3) > .plate { animation-range: entry 15% entry 55%; }
        li:nth-child(4) > .plate { animation-range: entry 20% entry 60%; }
        li:nth-child(5) > .plate { animation-range: entry 25% entry 65%; }
        li:nth-child(6) > .plate { animation-range: entry 30% entry 70%; }
        li:nth-child(7) > .plate { animation-range: entry 35% entry 75%; }
        li:nth-child(8) > .plate { animation-range: entry 40% entry 80%; }
    }
}

@keyframes plate-load {
    from { opacity: 0; transform: translateX(min(60vw, 40rem)); }
    to { opacity: 1; transform: none; }
}

/* ---------- The eight sections ---------- */

.set {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.set-muted {
    background: var(--surface-muted);
}

.set-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    max-width: 62rem;
}

.set-weight {
    margin: 0;
    color: var(--mark);
    font: 900 clamp(4rem, 2.4rem + 5vw, 7rem) / 0.85 var(--display);
}

.set-head .eyebrow,
.band .set-head .eyebrow {
    margin-block-end: 0.4rem;
    color: var(--mark);
}

.set-head h2 {
    margin: 0;
    font: 800 clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem) / 0.98 var(--display);
    text-transform: uppercase;
    text-wrap: balance;
}

.set-head .lede {
    grid-column: 1 / -1;
    max-width: 38rem;
    margin-block: 0;
    font-size: 1.05rem;
}

.set:not(.band) .set-head .lede {
    color: var(--muted);
}

.band.set .set-head .lede {
    color: #cfdde1;
}

.set-points {
    margin-block-start: 1.5rem;
}

.set-split {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
    box-shadow: 0 0 0 1px var(--screen-edge), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.75);
}

.set-screen {
    width: min(18rem, 72vw);
    margin-inline: auto;
}

.business-split .set-screen {
    width: min(15rem, 58vw);
}

/* Sessions: three screens in a row, swiped on phones. */
.screen-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 17rem);
    gap: 1rem;
    margin: clamp(2rem, 4vw, 3rem) -1rem 0;
    padding: 0.25rem 1rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
}

.screen-strip figure {
    margin: 0;
    scroll-snap-align: start;
}

.screen-strip figcaption {
    margin-block-start: 0.65rem;
    color: #cfdde1;
    font-size: 0.95rem;
}

.screen-strip figcaption b {
    display: block;
    color: var(--go);
}

.crop-screen {
    max-width: 27rem;
    margin-inline: auto;
}

/* History: the app's Stats tabs pick the screen. */
.stats-tabs {
    width: min(18rem, 72vw);
    margin-inline: auto;
}

.stats-tabs .tab-input {
    position: absolute;
    width: 1px;
    min-height: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.tab-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: -2rem;
    gap: 0.1rem 0.25rem;
    margin-block-end: 0.75rem;
}

.tab-labels label {
    display: block;
    flex: none;
    padding: 0.6rem 0.5rem;
    border-block-end: 3px solid transparent;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

#stats-complete:checked ~ .tab-labels label[for="stats-complete"],
#stats-months:checked ~ .tab-labels label[for="stats-months"],
#stats-weight:checked ~ .tab-labels label[for="stats-weight"],
#stats-focus:checked ~ .tab-labels label[for="stats-focus"] {
    border-color: var(--mark);
    color: var(--text);
}

#stats-complete:focus-visible ~ .tab-labels label[for="stats-complete"],
#stats-months:focus-visible ~ .tab-labels label[for="stats-months"],
#stats-weight:focus-visible ~ .tab-labels label[for="stats-weight"],
#stats-focus:focus-visible ~ .tab-labels label[for="stats-focus"] {
    outline: 0.2rem solid var(--focus);
    outline-offset: -0.2rem;
}

.tab-screen {
    display: none;
}

#stats-complete:checked ~ .tab-screens .tab-screen-complete,
#stats-months:checked ~ .tab-screens .tab-screen-months,
#stats-weight:checked ~ .tab-screens .tab-screen-weight,
#stats-focus:checked ~ .tab-screens .tab-screen-focus {
    display: block;
}

/* Achievements: the app's own badge art. */
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.badge-row li {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.badge-row img {
    width: clamp(3.5rem, 9vw, 4.75rem);
    height: auto;
    transition: transform 0.2s;
}

.badge-row li:hover img {
    transform: rotate(-8deg) scale(1.06);
}

.secret-note {
    margin-block-start: 1.25rem;
}

.secret-note summary {
    color: var(--go);
    font-weight: 700;
    cursor: pointer;
}

.secret-note p {
    margin-block: 0.5rem 0;
    color: #cfdde1;
}

/* Exercises: real names drift behind the section. */
.set-exercises {
    overflow: hidden;
}

.name-wall {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 1.25rem;
    color: rgb(255 255 255 / 0.055);
    font: 800 clamp(1.8rem, 1rem + 3vw, 3.2rem) / 1 var(--display);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.name-wall p {
    width: max-content;
    margin: 0;
    animation: name-drift 150s linear infinite;
}

.name-wall p:last-child {
    animation-direction: reverse;
}

@keyframes name-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.set-exercises .shell {
    position: relative;
}

.map-stack {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.map-stack-search {
    width: min(14rem, 62vw);
}

/* Notes: a note you can read at page size, beside the real screens. */
.note-card {
    max-width: 30rem;
    margin: 1.75rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--mark);
    border-radius: 0.9rem;
    background: var(--surface);
}

.note-card figcaption {
    font-size: 1.15rem;
    font-weight: 750;
}

.note-card p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.note-card .note-link {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.note-screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(30rem, 100%);
    margin-inline: auto;
}

.note-screens .screen:last-child {
    margin-block-start: 2rem;
}

/* Teams: the audience cards keep their shared styles from site.css. */
.business-split {
    margin-block-end: clamp(2rem, 4vw, 3rem);
}

.set-business .pricing-note {
    margin-block-start: 1.25rem;
    background: var(--surface);
}

/* Watch: the smallest plate. */
.set-watch {
    background:
        radial-gradient(40rem 20rem at 100% 0%, rgb(43 120 207 / 0.28), transparent 60%),
        linear-gradient(160deg, var(--ink) 0%, #0b2a33 100%);
}

.watch-link-line {
    max-width: 38rem;
    margin-block: 0.9rem 0;
    color: #cfdde1;
    font-size: 1.05rem;
}

.watch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-block-start: 1.5rem;
}

.watch-actions .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.watch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.watch-frame {
    position: relative;
    margin: 0;
    text-align: center;
}

.watch-frame img {
    display: block;
    width: 100%;
    height: auto;
    border: 0.65rem solid #02080a;
    background: #000000;
    box-shadow: 0 0 0 1px var(--screen-edge), 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.75);
}

.watch-frame figcaption {
    margin-block-start: 0.75rem;
    color: var(--ink-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

.watch-frame-apple {
    width: min(14rem, 44vw);
}

.watch-frame-apple img {
    border-radius: 2.75rem;
}

.watch-frame-apple::after {
    position: absolute;
    inset-block-start: 26%;
    inset-inline-end: -0.45rem;
    width: 0.5rem;
    height: 3rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--steel-side);
    content: "";
}

.watch-frame-wear {
    width: min(13rem, 40vw);
}

.watch-frame-wear img {
    border-radius: 50%;
}

/* ---------- REST between sections ---------- */

.rest-bar {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem max(1rem, (100% - 72rem) / 2);
    color: var(--go-ink);
    background: var(--go);
    text-decoration: none;
}

.rest-bar:hover .rest-bar-next {
    text-decoration: underline;
}

.rest-bar:focus-visible {
    outline-color: var(--go-ink);
    outline-offset: -0.35rem;
}

.rest-bar-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.rest-bar strong {
    font: 900 2rem / 1 var(--display);
}

.rest-bar-next {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.3rem);
    font-weight: 750;
}

.rest-bar svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Cool-down and finish ---------- */

.cooldown .privacy-card {
    margin-block-start: 0;
}

.cooldown .section-head {
    margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.cooldown .section-head h2,
.cta-band h2 {
    font: 800 clamp(2.1rem, 1.5rem + 2.2vw, 3.5rem) / 0.98 var(--display);
    text-transform: uppercase;
}

.fact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem 2rem;
    margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.fact-row li {
    display: grid;
    gap: 0.1rem;
}

.fact-row span {
    color: var(--muted);
    font-size: 0.93rem;
}

.bar-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.14rem;
    margin-block-end: 1.25rem;
    padding-inline: 1.5rem;
    background: var(--steel) center / 100% 0.35rem no-repeat;
}

.bar-mini span {
    display: block;
    width: 0.8rem;
    height: var(--mini);
    border-radius: 0.2rem;
    background: var(--plate);
}

.bar-mini span:nth-child(1) { --mini: 3.75rem; }
.bar-mini span:nth-child(2) { --mini: 3.4rem; }
.bar-mini span:nth-child(3) { --mini: 3.05rem; }
.bar-mini span:nth-child(4) { --mini: 2.7rem; }
.bar-mini span:nth-child(5) { --mini: 2.4rem; }
.bar-mini span:nth-child(6) { --mini: 2.1rem; }
.bar-mini span:nth-child(7) { --mini: 1.85rem; }
.bar-mini span:nth-child(8) { --mini: 1.65rem; }

/* ---------- Layout steps ---------- */


@media (min-width: 56rem) {
    .go-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
    }

    .set-split {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .set-exercises .set-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }

    .map-stack {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        align-items: center;
    }

    .map-stack-search {
        width: 100%;
    }

    .screen-strip {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-columns: auto;
        max-width: 54rem;
        margin-inline: auto;
        padding-inline: 0;
        overflow: visible;
    }

    .screen-raised {
        transform: translateY(-1.5rem);
    }
}

/* ---------- Motion, contrast and print ---------- */

@media (prefers-reduced-motion: reduce) {
    .try-go-button,
    .digit::before,
    .name-wall p {
        animation: none !important;
    }

    /* The timers hold still: 0:00 and 1:45. */
    .digit-down-t::before { transform: translateY(-16.667%); }
    .digit-down-o::before { transform: translateY(-40%); }
}

@media (forced-colors: active) {
    .plate,
    .rest-bar,
    .screen,
    .try,
    .try-dock {
        border: 1px solid CanvasText;
    }

    #try-set-1:checked ~ .try-card .try-row-1 label.try-tick,
    #try-set-2:checked ~ .try-card .try-row-2 label.try-tick,
    #try-set-3:checked ~ .try-card .try-row-3 label.try-tick,
    #try-set-4:checked ~ .try-card .try-row-4 label.try-tick {
        forced-color-adjust: none;
        color: Canvas;
        background: Highlight;
    }
}

@media print {
    .home-progress,
    .try,
    .bar-rig,
    .rest-bar,
    .name-wall,
    .bar-mini {
        display: none;
    }

    .tab-screen {
        display: block;
    }
}