.home-page {
    --home-pad: clamp(1.8rem, 4.1vw, 3.1rem);
    --home-blue: #294fcf;
    --home-blue-deep: #243c9d;
    --home-blue-border: #6c83c6;
    --home-blue-wash: #edf3ff;
    --home-parchment: #fdf5e7;
    --home-lilac: #eae7fd;
    --home-lilac-ink: #5044a2;
    --home-gold: #fff0d4;
    --home-gold-ink: #895310;
    --home-mint: #dcf3ed;
    --home-mint-ink: #14654f;
    --home-sky: #e7eeff;
    --home-sky-ink: #2b4cb9;
}

.home-page [hidden] { display: none; }
.home-page .home-section { padding-block: var(--home-pad); }
.home-page .home-hero {
    background: radial-gradient(ellipse at 77% 45%, #dfe8ff 0%, transparent 45%),
        linear-gradient(115deg, #f9fbff, #eef2ff);
    padding-block: clamp(1.7rem, 3.8vw, 3.15rem);
}
.home-page .home-hero-grid {
    grid-template-areas: "title dice" "body dice";
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: .85rem var(--public-gap);
    align-items: center;
}
.home-hero-heading { grid-area: title; align-self: end; }
.home-hero-body { grid-area: body; align-self: start; }
.home-page .home-hero-heading h1 {
    max-width: none;
    padding: 0;
    margin: 0;
    font-size: clamp(2.15rem, 1.8rem + 1.65vw, 3rem);
    line-height: 1.1;
}
.home-page .home-eyebrow {
    margin: 0 0 .55rem;
    color: var(--home-blue);
    font-size: 1.125rem;
    font-weight: 600;
}
.home-page .marketing-lead { max-width: 32rem; margin-bottom: 0; font-size: 1.125rem; }
.home-hero .marketing-button-secondary { border-color: var(--home-blue-border); }
.home-page .marketing-player-access .fas { flex: none; }
.home-dice-panel {
    grid-area: dice;
    min-width: 0;
    display: grid;
    justify-items: center;
}
.home-page .marketing-dice-art {
    position: relative;
    inset: auto;
    width: min(100%, 17.5rem);
    color: var(--home-blue);
}
.home-page .marketing-dice-orbit {
    width: 81%;
    background: radial-gradient(circle at 35% 22%, #f5f7ff, #dce6ff 67%, #cfddff);
    box-shadow: 0 0 1.9rem #acc1fc80;
}
.home-page .marketing-dice-orbit::before { inset: 9%; }
.home-page .marketing-dice-orbit::after { display: block; }
.home-dice-float {
    width: 67%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.home-page .marketing-dice { display: block; width: 100%; }
.home-page .marketing-dice-sparkle, .home-spark {
    position: absolute;
    display: block;
    width: 10%;
    aspect-ratio: 1;
    clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
.home-page .marketing-dice-sparkle { top: 13%; right: 13%; background: #259778; }
.home-spark-gold { top: 23%; left: 12%; width: 7%; background: #c48123; }
.home-spark-blue { bottom: 16%; right: 16%; width: 6%; background: #7662c5; }
.home-roll-controls {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.home-roll-button {
    background: #f7f9ff;
    color: var(--public-primary-hover);
    border: 1px solid var(--home-blue-border);
    border-radius: 2rem;
    min-height: 44px;
    padding: .35rem .85rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
}
.home-roll-button:hover { background: #e0e9ff; }
.home-roll-result { color: var(--public-navy); font-size: .95rem; font-weight: 600; }
.home-roll-result:not(:empty), .home-roll-controls .marketing-text-link { margin-inline-start: .6rem; }
.home-roll-controls .marketing-text-link { font-size: .95rem; }

.home-page .marketing-steps img {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: .6rem;
}
.home-page .marketing-steps p { max-width: 31ch; margin-bottom: 0; }

.home-demo {
    background: var(--home-blue-wash);
    scroll-margin-block-start: 1rem;
}
.home-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.35rem, 4vw, 3rem);
    align-items: center;
}
.home-demo-grid > div { max-width: 29rem; }
.home-demo-grid figure { width: min(100%, 36.25rem); justify-self: end; }
.home-demo-highlights {
    display: grid;
    gap: .25rem;
    padding: 0;
    margin: .7rem 0 .3rem;
    color: var(--public-navy);
    list-style: none;
}
.home-demo-highlights li { display: flex; align-items: baseline; gap: .65rem; }
.home-demo-highlights li::before {
    content: "";
    width: .43rem;
    height: .43rem;
    flex: none;
    border-radius: 1px;
    background: var(--home-blue);
    transform: translateY(-.13em) rotate(45deg);
}
.home-demo .marketing-shot {
    border-color: #bcccf0;
    box-shadow: 0 8px 24px #1b2a4e1f;
}

.home-feature-grid, .home-tools-list {
    list-style: none;
    padding: 0;
    margin: .9rem 0 0;
    display: grid;
}
.home-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem clamp(.9rem, 3vw, 2rem);
}
.home-icon-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}
.home-icon-item h3, .home-icon-item p { margin: 0; }
.home-icon-item h3 .marketing-text-link {
    font-size: 1.1875rem;
    min-height: 44px;
    line-height: 1.25;
    padding-block: .15rem;
}
.home-icon-item p { font-size: 1rem; line-height: 1.45; }
.home-icon {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    color: var(--icon-ink, var(--home-sky-ink));
    background: var(--icon-tint, var(--home-sky));
}
.home-icon::before, .home-party-flag {
    background: currentColor;
    mask: var(--home-icon) center / contain no-repeat;
}
.home-icon::before { content: ""; width: 68%; aspect-ratio: 1; }
.home-icon-flag { --home-icon: url("../assets/images/flying-flag.svg"); }
.home-icon-map { --home-icon: url("../assets/images/scroll-unfurled.svg"); --icon-ink: var(--home-gold-ink); --icon-tint: var(--home-gold); }
.home-icon-bow { --home-icon: url("../assets/images/pocket-bow.svg"); --icon-ink: var(--home-mint-ink); --icon-tint: var(--home-mint); }
.home-icon-scroll { --home-icon: url("../assets/images/tied-scroll.svg"); --icon-ink: var(--home-lilac-ink); --icon-tint: var(--home-lilac); }
.home-icon-dice { --home-icon: url("../assets/images/dice-twenty-faces-twenty.svg"); }
.home-icon-note { --home-icon: url("../assets/images/stabbed-note.svg"); --icon-ink: var(--home-gold-ink); --icon-tint: var(--home-gold); }
.home-icon-battle { --home-icon: url("../assets/images/battle-gear.svg"); --icon-ink: var(--home-mint-ink); --icon-tint: var(--home-mint); }

.home-party {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .48fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.3rem, 3.1vw, 2.5rem);
    border-radius: .9rem;
    background: linear-gradient(108deg, var(--public-navy), #24418b);
    color: var(--public-white);
}
.home-party-copy { max-width: 40rem; }
.home-page .home-party h2, .home-page .home-final h2 { color: var(--public-white); }
.home-page .home-party p, .home-page .home-final p { margin-bottom: 0; color: #f1f4ff; }
.home-party-art {
    display: grid;
    place-items: center;
    width: min(100%, 9rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed #a9bcf0;
    background: #a0b6ff1f;
    justify-self: center;
}
.home-party-flag {
    --home-icon: url("../assets/images/flying-flag.svg");
    color: #c9d6ff;
    width: 72%;
    aspect-ratio: 1;
    transform: rotate(-9deg);
}
.home-discovery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.4rem, 4vw, 3rem);
}
.home-beginners {
    padding: clamp(1.1rem, 2.6vw, 1.75rem);
    border-radius: .85rem;
    background: var(--home-parchment);
}
.home-beginners img { display: block; margin-bottom: .45rem; }
.home-beginners h2 { max-width: 22ch; }
.home-beginners p { max-width: 47ch; margin-bottom: .2rem; }
.home-beginners p + p { margin-top: .55rem; }
.home-tools-list { gap: .65rem; margin-top: .6rem; }
.home-page #free-tools { scroll-margin-block-start: 1rem; }
.home-page #free-tools > p { margin-bottom: 0; }

.home-final {
    background: linear-gradient(110deg, var(--home-blue), var(--home-blue-deep));
    color: var(--public-white);
}
.home-final-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.35rem var(--public-gap);
    align-items: center;
}
.home-page .home-final .home-price { font-size: 1.17rem; }
.home-page .home-final .home-price strong { color: var(--public-white); font-size: 1.35em; }
.home-page .home-final .home-price-detail { font-size: 1rem; }
.home-page .home-final .home-price-detail + .home-price-detail { margin-top: .25rem; }
.home-final .marketing-actions { margin-top: .9rem; }
.home-final .marketing-button-primary, .home-final .marketing-button-primary:visited {
    background: var(--public-white);
    color: var(--public-primary-hover);
}
.home-final .marketing-button-primary:hover { background: #e5edff; color: var(--public-navy); }
.home-final .marketing-button-secondary {
    background: transparent;
    border-color: #b9c9fb;
    color: var(--public-white);
}
.home-final .marketing-button-secondary:hover { background: #ffffff22; color: var(--public-white); }
.home-page .home-final :focus-visible { outline-color: var(--public-white); }

@media (max-width: 950px) {
    .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .home-page .marketing-steps article {
        grid-template-columns: 4rem minmax(0, 1fr);
        align-items: start;
        column-gap: .85rem;
    }
    .home-page .marketing-steps img {
        grid-row: span 2;
        width: 4rem;
        height: 4rem;
        margin: 0;
    }
    .home-page .marketing-steps p { max-width: none; }
    .home-demo-grid, .home-discovery, .home-final-grid { grid-template-columns: minmax(0, 1fr); }
    .home-demo-grid figure { justify-self: start; }
}

@media (max-width: 620px) {
    .home-page .home-hero-grid {
        display: grid;
        grid-template-areas: "title" "body" "dice";
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
    }
    .home-dice-panel {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: .85rem;
        width: min(100%, 22rem);
    }
    .home-page .marketing-dice-art { width: 7rem; }
    .home-roll-controls { justify-content: start; }
    .home-roll-result:not(:empty) { margin-inline-start: .35rem; }
    .home-roll-button { padding-inline: .62rem; }
    .home-roll-controls .marketing-text-link { margin-inline-start: 0; }
}

@media (max-width: 575px) {
    .home-feature-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .home-party {
        grid-template-columns: minmax(0, 1fr) 3.4rem;
        grid-template-areas: "title flag" "copy copy";
        gap: .25rem .65rem;
    }
    .home-party-copy { display: contents; }
    .home-page .home-party h2 { grid-area: title; margin: 0; }
    .home-party p { grid-area: copy; }
    .home-party-art { grid-area: flag; }
}

@media (prefers-reduced-motion: no-preference) {
    .home-dice-panel .marketing-dice-art { animation: home-dice-entrance 660ms ease-out both; }
    .home-dice-float { animation: home-dice-drift 2s 620ms ease-in-out 2; }
    .home-page .marketing-dice-sparkle, .home-spark { animation: home-spark-glow 2s 430ms ease-in-out 2; }
    .home-spark-gold { animation-delay: 600ms; }
    .home-spark-blue { animation-delay: 850ms; }
    .home-page [data-home-reveal].is-in-view { animation: home-reveal 420ms ease-out both; }
    .home-page .marketing-steps article:nth-child(2) img { animation-delay: 100ms; }
    .home-page .marketing-steps article:nth-child(3) img { animation-delay: 200ms; }
    .home-page .home-party-flag.is-in-view { animation: home-flag-wave 850ms ease-in-out 2; }
    .home-page .marketing-steps img, .home-icon::before, .home-demo .marketing-shot {
        transition: transform 180ms ease-out;
    }
    .home-page .marketing-steps article:nth-child(1):hover img { transform: translateY(-4px) rotate(-4deg); }
    .home-page .marketing-steps article:nth-child(2):hover img { transform: rotate(5deg); transform-origin: 62% 77%; }
    .home-page .marketing-steps article:nth-child(3):hover img { transform: translate(3px, -2px) rotate(3deg); }
    .home-demo .marketing-shot-open:hover .marketing-shot,
    .home-demo .marketing-shot-open:focus-visible .marketing-shot { transform: translateY(-3px); }
    .home-icon-item:focus-within .home-icon::before,
    .home-icon-item:hover .home-icon::before {
        transform: translateY(-3px) rotate(-5deg);
    }
    .home-page .marketing-button, .home-page .home-roll-button, .home-page .marketing-text-link {
        transition: background-color 150ms ease-out, color 150ms ease-out;
    }
}

@keyframes home-dice-entrance {
    from { opacity: .65; transform: translateY(10px) scale(.95); }
    to { opacity: 1; transform: none; }
}
@keyframes home-dice-drift {
    50% { transform: translateY(-7px) rotate(4deg); }
}
@keyframes home-spark-glow {
    50% { opacity: .65; transform: scale(.87); }
}
@keyframes home-reveal {
    from { opacity: .86; translate: 0 8px; }
    to { opacity: 1; translate: none; }
}
@keyframes home-flag-wave {
    50% { transform: rotate(-3deg); }
}