/* ---------------------------------------------------------------------------
   Pixel and Patchwork Studios — shared styles
   Palette and grid come from the quilt block in the logo.
   --------------------------------------------------------------------------- */

:root {
    --gold: #E8C763;
    --orange: #D97C00;
    --blue: #3D3DB9;
    --teal: #3E948C;
    --berry: #BC4A5A;
    --plum: #7D4FA0;
    --moss: #7C8F45;

    /* Two of the quilt colours are too light to carry text. Each keeps its
       pieced value above and gains a deepened sibling here, so the block and
       the background stay cotton-bright while the type stays readable. */
    --orange-text: #ae5500;
    --gold-text: #a58201;

    /* The two tag washes, frozen as explicit values rather than alpha so their
       contrast never depends on what sits behind them. */
    --wash-blue: #efeff9;
    --wash-orange: #fbf2e6;

    /* Letterbox behind the demo clip; also the ground its fallback text sits on. */
    --letterbox: #10121a;

    --ink: #22242c;
    --ink-soft: #5c6070;
    --rule: #e6e6ea;
    --paper: #ffffff;
    --paper-alt: #faf9f7;

    --measure: 68ch;
    --page: 1080px;
    --radius: 10px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: "Quicksand", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Skip link — keyboard users shouldn't have to tab the whole nav. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--blue);
    color: #fff;
    border-radius: 0 0 var(--radius) 0;
}

.skip:focus {
    left: 0;
}

.wrap {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 clamp(1.1rem, 4vw, 2rem);
}

/* ---------------------------------------------------------------- typography */

h1,
h2,
h3 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

h1 {
    font-size: clamp(2rem, 5.2vw, 3rem);
}

h2 {
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
    margin-bottom: 0.6rem;
}

h3 {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

p,
li {
    max-width: var(--measure);
}

p+p {
    margin-top: 0.9rem;
}

a {
    color: var(--blue);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--plum);
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.lede {
    font-size: clamp(1.05rem, 2.1vw, 1.25rem);
    color: var(--ink-soft);
}

.eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange-text);
    margin-bottom: 0.7rem;
}

.section {
    padding: clamp(2.75rem, 7vw, 4.5rem) 0;
}

.section--alt {
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.stack>*+* {
    margin-top: 1rem;
}

/* ------------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 66px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
}

.brand svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand b {
    font-weight: 600;
    color: var(--blue);
}

.brand span {
    color: var(--ink-soft);
    font-weight: 500;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(0.7rem, 2.4vw, 1.5rem);
    flex-wrap: wrap;
}

.nav > a,
.nav-dropdown > summary {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
}

.nav > a:hover,
.nav-dropdown > summary:hover {
    color: var(--blue);
}

.nav > a[aria-current="page"],
.nav-dropdown:has(a[aria-current="page"]) > summary {
    color: var(--ink);
    border-bottom-color: var(--orange);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown > summary span {
    font-size: 0.72em;
    transition: transform 0.16s ease;
}

.nav-dropdown[open] > summary span {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 13.5rem;
    padding: 0.45rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 16px 35px rgba(35, 29, 55, 0.16);
}

.nav-dropdown-menu a {
    padding: 0.7rem 0.8rem;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] {
    color: var(--blue);
    background: var(--wash-blue);
}

@media (max-width: 600px) {
    .nav-dropdown-menu {
        right: auto;
        left: 0;
    }
}

/* --------------------------------------------------------------------- hero */

.hero {
    padding: clamp(2rem, 6vw, 3.75rem) 0 clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}

.hero .lede {
    margin: 0.9rem auto 0;
    max-width: 56ch;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-block;
    padding: 0.62rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration: none;
    border: 2px solid var(--blue);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.btn--solid {
    background: var(--blue);
    color: #fff;
}

.btn--solid:hover {
    background: var(--plum);
    border-color: var(--plum);
    color: #fff;
}

.btn--ghost {
    color: var(--blue);
    background: transparent;
}

.btn--ghost:hover {
    background: var(--blue);
    color: #fff;
}

/* -------------------------------------------------------------------- cards */

.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    margin-top: 1.75rem;
}

.card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.4rem;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}

.card p {
    color: var(--ink-soft);
    font-size: 0.97rem;
}

.card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.card>*+* {
    margin-top: 0.7rem;
}

/* A small quilt swatch used as a card motif. */
.swatch {
    width: 46px;
    height: 46px;
    flex: none;
}

.tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--wash-blue);
    color: var(--blue);
}

.tag--soft {
    background: var(--wash-orange);
    color: var(--orange-text);
}

/* ------------------------------------------------------------------ content */

.prose h2 {
    margin-top: 2.25rem;
}

.prose h3 {
    margin-top: 1.5rem;
}

.prose ul,
.prose ol {
    margin: 0.7rem 0 0 1.25rem;
}

.prose li+li {
    margin-top: 0.35rem;
}

.prose table {
    border-collapse: collapse;
    margin-top: 1rem;
    width: 100%;
    font-size: 0.95rem;
}

.prose th,
.prose td {
    border: 1px solid var(--rule);
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--paper-alt);
    font-weight: 600;
}

.table-scroll {
    overflow-x: auto;
}

.note {
    border-left: 4px solid var(--gold);
    background: var(--paper-alt);
    padding: 0.9rem 1.1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-top: 1.25rem;
}

.note p {
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.support-contact {
    max-width: 680px;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-alt);
}

.support-contact h2 {
    overflow-wrap: anywhere;
}

.support-contact p {
    color: var(--ink-soft);
}

.support-contact .btn {
    margin-top: 1.25rem;
}

.meta {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.faq {
    border-top: 1px solid var(--rule);
    margin-top: 1.5rem;
}

.faq details {
    border-bottom: 1px solid var(--rule);
    padding: 0.9rem 0;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    color: var(--orange);
    font-size: 1.3rem;
    line-height: 1;
    flex: none;
}

.faq details[open] summary::after {
    content: "\2212";
}

.faq details>p {
    margin-top: 0.6rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------- footer */

.site-footer {
    border-top: 1px solid var(--rule);
    background: var(--paper-alt);
    padding: 2.5rem 0 3rem;
    margin-top: 1rem;
}

.footer-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.site-footer h2 {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
}

.site-footer ul {
    list-style: none;
}

.site-footer li+li {
    margin-top: 0.3rem;
}

.site-footer a {
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
}

.site-footer a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.colophon {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.87rem;
    color: var(--ink-soft);
}

.colophon p {
    max-width: none;
}

/* ------------------------------------------------------- animated hero logo */

.logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(4vmin, 26px);
    margin-bottom: 1.5rem;
}

.logo {
    width: min(52vmin, 325px);
    height: auto;
}

.logo .patch {
    transform-box: fill-box;
    transform-origin: center;
    fill: var(--base);
    transition: fill 0.8s ease;
    animation: puff 5.5s ease-in-out calc(var(--i) * 0.1s + 0.6s) infinite;
}

.logo .print {
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
    transition: opacity 0.4s ease;
    animation: puff 5.5s ease-in-out calc(var(--i) * 0.1s + 0.6s) infinite;
}

.logo .blank-print {
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.logo .gold {
    --base: var(--gold);
}

.logo .orange {
    --base: var(--orange);
}

.logo .blue {
    --base: var(--blue);
}

.logo .teal {
    --base: var(--teal);
}

.logo .berry {
    --base: var(--berry);
}

.logo .plum {
    --base: var(--plum);
}

.logo .moss {
    --base: var(--moss);
}

@keyframes puff {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

.logo .stitch {
    fill: none;
    stroke: rgba(93, 74, 44, 0.35);
    stroke-width: 0.035;
    stroke-dasharray: 0.13 0.11;
    stroke-linecap: round;
    animation: stitch-on 0.55s ease-out calc(var(--i) * 0.1s + 0.35s) backwards;
}

@keyframes stitch-on {
    from {
        opacity: 0;
        stroke-dashoffset: 0.72;
    }

    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* ---------------------------------------------------------------- word mark */

.wordmark {
    text-align: center;
    font-weight: 600;
    line-height: 1.2;
}

.wordmark .name {
    display: block;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    letter-spacing: 0.05em;
    color: var(--blue);
}

.wordmark .studios {
    display: block;
    margin-top: 0.5em;
    font-size: clamp(0.68rem, 1.9vw, 0.85rem);
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    color: var(--orange-text);
}

.wordmark .dash {
    color: var(--gold-text);
}

.wordmark .letter {
    display: inline-block;
    text-align: center;
    transition: color 0.8s ease;
}

.wordmark .letter.pixel {
    font-family: "Geist Pixel Locked", monospace;
    font-weight: 400;
}

.wordmark .letter.scrambling {
    font-family: var(--scramble), monospace;
    font-weight: 400;
    font-size: calc(1em * var(--scramble-scale, 1));
}

/* ------------------------------------------------- preferences and input */

/* Reduced motion suppresses movement, not the whole logo. The puff breathing,
   the piecing scale-in, and the stitch pull are movement and go; the colour
   cross-fades stay, so the block still changes fabric — it just holds still
   while it does it. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .logo .patch,
    .logo .print,
    .logo .stitch,
    .logo .seam-ext {
        animation: none !important;
    }

    .logo .stitch {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* The layout already adapts to width; the targets only ever adapted to a
   cursor. A coarse pointer is a thumb, so the two link groups that sit outside
   a sentence — and therefore get no inline exemption from the 24px floor — are
   sized for one: nav 33.5px to 44.7, footer links 19px to 37.9. The footer
   trades its list margin for link padding, so a row costs 5px of height and
   returns double the tappable area. Touch only; a cursor keeps the tighter
   layout. */
@media (pointer: coarse) {

    .nav > a,
    .nav-dropdown > summary {
        padding: 0.55rem 0;
    }

    .site-footer a {
        display: inline-block;
        padding: 0.4rem 0;
    }

    .site-footer li+li {
        margin-top: 0;
    }

    .faq summary {
        padding: 0.25rem 0;
    }
}

/* Touch never fires :hover, so every press on this site was silent — the colour
   shift that acknowledges a tap only existed for people using a mouse. These
   give the press its own state, and hand the browser's own tap flash a colour
   from the palette instead of the default black. */
a,
.btn,
.faq summary {
    -webkit-tap-highlight-color: rgba(61, 61, 185, 0.14);
}

.btn--solid:active {
    background: var(--plum);
    border-color: var(--plum);
    color: #fff;
}

.btn--ghost:active {
    background: var(--blue);
    color: #fff;
}

.nav a:active,
.site-footer a:active {
    color: var(--blue);
}

.prose a:active {
    color: var(--plum);
}

.faq summary:active {
    color: var(--blue);
}

/* ---------------------------------------------------------------------------
   Display faces used by the animated wordmark. Each carries the same vertical
   metric overrides so swapping a letter's face can never move the text.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "Geist Pixel Locked";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/geistpixel/v1/CSRs4zxZluGGW3oyI0A_AN0hQBvYDU4hBmqoKzA8XT6i.woff2) format("woff2");
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Scramble 1";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format("woff2");
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Scramble 2";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/vt323/v18/pxiKyp0ihIEF2isfFJU.woff2) format("woff2");
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Scramble 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2) format("woff2");
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Scramble 4";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v23/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2) format("woff2");
    ascent-override: 100%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------- product artwork */

.product-hero {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

@media (min-width: 760px) {
    .product-hero {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    }
}

.product-hero img {
    width: 100%;
    height: auto;
    max-width: 320px;
    display: block;
}

.product-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
}

.feature-list {
    list-style: none;
    margin-top: 1.25rem;
}

.feature-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-top: 0.55rem;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.62rem;
    height: 0.62rem;
    background: var(--orange);
}

.feature-list li:nth-child(2n)::before {
    background: var(--blue);
}

.feature-list li:nth-child(3n)::before {
    background: var(--gold);
}

.card-logo {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
    align-self: flex-start;
}

/* ------------------------------------------------------------ demo video */

.demo {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 820px) {
    .demo {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    }
}

.demo-video {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--letterbox);
    color: var(--paper);
}

figure.demo-figure {
    margin: 0;
}

figure.demo-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
    max-width: 300px;
}

/* Seams carried past the block edge and fading out, so the quilt reads as one
   piece of something larger. Stroke colour comes from a per-direction gradient
   set on each segment. */
.logo .seam-ext {
    fill: none;
    stroke-width: 0.035;
    stroke-dasharray: 0.13 0.11;
    stroke-linecap: round;
    animation: seam-ext-in 0.9s ease 4.7s backwards;
}

@keyframes seam-ext-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===========================================================================
   ArrowRhythmBlast product page

   The studio chrome stays on paper; everything between it becomes the game's
   neon playfield. All selectors are scoped so the other product pages keep the
   shared site treatment above.
   =========================================================================== */

@font-face {
    font-family: "Audiowide";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("Audiowide-Regular.ttf") format("truetype");
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.game-page {
    --arb-bg: #050713;
    --arb-panel: #0b1022;
    --arb-panel-light: #111832;
    --arb-ink: #f5f7ff;
    --arb-muted: #a9b2cc;
    --arb-cyan: #35e8ff;
    --arb-pink: #ff4f9a;
    --arb-violet: #9b6cff;
    --arb-lime: #9dff66;
    --arb-line: rgba(159, 187, 255, 0.16);
}

.game-page .site-footer {
    margin-top: 0;
}

.arb-page {
    position: relative;
    overflow: hidden;
    color: var(--arb-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(53, 232, 255, 0.12), transparent 24rem),
        radial-gradient(circle at 92% 30%, rgba(155, 108, 255, 0.14), transparent 28rem),
        var(--arb-bg);
}

.arb-page::before {
    content: "";
    position: fixed;
    inset: 66px 0 0;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(159, 187, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(159, 187, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.arb-page h2,
.arb-page h3 {
    font-family: "Audiowide", "Arial Black", sans-serif;
    font-weight: 400;
}

.arb-page h2,
.arb-page h3,
.arb-page p,
.arb-page li {
    max-width: none;
}

.arb-page em {
    color: var(--arb-cyan);
    font-style: normal;
    text-shadow: 0 0 28px rgba(53, 232, 255, 0.35);
}

.arb-hero {
    position: relative;
    min-height: min(790px, calc(100vh - 66px));
    display: grid;
    align-items: center;
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    border-bottom: 1px solid var(--arb-line);
    background:
        linear-gradient(90deg, rgba(5, 7, 19, 0.97) 0%, rgba(5, 7, 19, 0.72) 55%, rgba(5, 7, 19, 0.9) 100%),
        radial-gradient(circle at 75% 50%, rgba(53, 232, 255, 0.18), transparent 26rem);
}

.arb-hero::after {
    content: "";
    position: absolute;
    right: -12rem;
    bottom: -18rem;
    width: 44rem;
    height: 44rem;
    border: 1px solid rgba(53, 232, 255, 0.15);
    border-radius: 50%;
    box-shadow: 0 0 8rem rgba(53, 232, 255, 0.08), inset 0 0 8rem rgba(155, 108, 255, 0.06);
}

.arb-hero-inner {
    position: relative;
    z-index: 2;
    display: block;
    text-align: center;
}

.arb-hero-copy {
    width: min(100%, 720px);
    margin: 0 auto;
}

.arb-kicker,
.arb-section-number {
    font-family: "Audiowide", "Arial Black", sans-serif;
    color: var(--arb-cyan);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.arb-kicker span {
    color: var(--arb-pink);
    padding: 0 0.45rem;
}

.arb-logo {
    display: block;
    width: min(100%, 560px);
    height: auto;
    margin: 1.2rem auto 0;
    filter: drop-shadow(0 0 34px rgba(53, 232, 255, 0.18));
}

.arb-lede {
    margin: 1.75rem auto 0;
    max-width: 34rem !important;
    color: #dce3f7;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.65;
}

.arb-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 2rem;
}

.arb-quick-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    padding: 0.45rem 0.8rem;
    color: var(--arb-muted);
    border: 1px solid var(--arb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.arb-quick-stats b {
    color: var(--arb-lime);
    font-size: 1rem;
}

.arb-hero-board {
    position: relative;
    width: min(100%, 390px);
    aspect-ratio: 1;
    justify-self: center;
    display: grid;
    place-items: center;
    transform: rotate(3deg);
}

.arb-board-glow {
    position: absolute;
    inset: 8%;
    background: rgba(53, 232, 255, 0.12);
    filter: blur(55px);
}

.arb-board-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.45rem, 1vw, 0.75rem);
    width: 100%;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(53, 232, 255, 0.25);
    border-radius: 24px;
    background: rgba(8, 14, 32, 0.72);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 0 42px rgba(53, 232, 255, 0.04);
    backdrop-filter: blur(8px);
}

.arb-board-grid span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(53, 232, 255, 0.24);
    border-radius: 12px;
    color: var(--arb-cyan);
    background: linear-gradient(145deg, rgba(53, 232, 255, 0.14), rgba(53, 232, 255, 0.025));
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 700;
    text-shadow: 0 0 18px currentColor;
}

.arb-board-grid span:nth-child(3n) {
    color: var(--arb-pink);
    border-color: rgba(255, 79, 154, 0.25);
    background: linear-gradient(145deg, rgba(255, 79, 154, 0.14), rgba(255, 79, 154, 0.025));
}

.arb-board-grid span:nth-child(4n) {
    color: var(--arb-violet);
    border-color: rgba(155, 108, 255, 0.25);
    background: linear-gradient(145deg, rgba(155, 108, 255, 0.15), rgba(155, 108, 255, 0.025));
}

.arb-combo-readout {
    position: absolute;
    right: -1.2rem;
    bottom: -1.6rem;
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 0.35rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid rgba(157, 255, 102, 0.42);
    border-radius: 14px;
    background: #0b1321;
    box-shadow: 0 0 34px rgba(157, 255, 102, 0.18);
    transform: rotate(-3deg);
}

.arb-combo-readout small {
    grid-column: 1 / -1;
    color: var(--arb-muted);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
}

.arb-combo-readout strong {
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

.arb-combo-readout b {
    color: var(--arb-lime);
    font-size: 1.15rem;
}

/* A real frame from the game replaces the decorative arrow grid. */
.arb-hero-gameplay {
    position: relative;
    width: min(100%, 310px);
    justify-self: center;
    transform: rotate(2deg);
}

.arb-hero-phone {
    position: relative;
    padding: 0.65rem;
    border: 1px solid rgba(53, 232, 255, 0.32);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(53, 232, 255, 0.13), rgba(155, 108, 255, 0.08));
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.55),
        0 0 70px rgba(53, 232, 255, 0.15),
        inset 0 0 24px rgba(255, 255, 255, 0.04);
}

.arb-hero-phone::before {
    content: "";
    position: absolute;
    inset: 25% -18% 12%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(53, 232, 255, 0.2);
    filter: blur(60px);
}

.arb-hero-phone img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 23px;
}

.arb-gameplay-stamp {
    position: absolute;
    left: -4.5rem;
    bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(157, 255, 102, 0.38);
    border-radius: 12px;
    color: var(--arb-lime);
    background: rgba(7, 14, 25, 0.94);
    box-shadow: 0 0 28px rgba(157, 255, 102, 0.12);
    transform: rotate(-5deg);
}

.arb-gameplay-stamp span {
    font-family: "Audiowide", "Arial Black", sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.arb-gameplay-stamp b {
    font-size: 1rem;
}

.arb-arrow-field span {
    position: absolute;
    z-index: 1;
    color: rgba(53, 232, 255, 0.2);
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 18px currentColor;
    animation: arb-arrow-pulse 4.5s ease-in-out infinite alternate;
}

.arb-arrow-field span:nth-child(1) { left: 5%; top: 12%; }
.arb-arrow-field span:nth-child(2) { left: 38%; top: 8%; color: rgba(255, 79, 154, 0.18); animation-delay: -1s; }
.arb-arrow-field span:nth-child(3) { left: 90%; top: 16%; animation-delay: -2.4s; }
.arb-arrow-field span:nth-child(4) { left: 8%; top: 76%; color: rgba(155, 108, 255, 0.2); animation-delay: -3.2s; }
.arb-arrow-field span:nth-child(5) { left: 48%; top: 86%; animation-delay: -0.7s; }
.arb-arrow-field span:nth-child(6) { left: 94%; top: 72%; color: rgba(255, 79, 154, 0.19); animation-delay: -2s; }
.arb-arrow-field span:nth-child(7) { left: 69%; top: 17%; color: rgba(157, 255, 102, 0.17); animation-delay: -3.7s; }
.arb-arrow-field span:nth-child(8) { left: 25%; top: 91%; animation-delay: -1.5s; }
.arb-arrow-field span:nth-child(9) { left: 18%; top: 31%; color: rgba(255, 79, 154, 0.15); animation-delay: -2.8s; }
.arb-arrow-field span:nth-child(10) { left: 83%; top: 37%; color: rgba(155, 108, 255, 0.2); animation-delay: -0.4s; }
.arb-arrow-field span:nth-child(11) { left: 3%; top: 46%; color: rgba(157, 255, 102, 0.14); animation-delay: -3.4s; }
.arb-arrow-field span:nth-child(12) { left: 92%; top: 53%; animation-delay: -1.8s; }
.arb-arrow-field span:nth-child(13) { left: 14%; top: 61%; color: rgba(155, 108, 255, 0.18); animation-delay: -0.9s; }
.arb-arrow-field span:nth-child(14) { left: 77%; top: 80%; color: rgba(255, 79, 154, 0.17); animation-delay: -2.2s; }
.arb-arrow-field span:nth-child(15) { left: 58%; top: 4%; color: rgba(157, 255, 102, 0.13); animation-delay: -3.9s; }
.arb-arrow-field span:nth-child(16) { left: 35%; top: 72%; animation-delay: -1.2s; }

@keyframes arb-arrow-pulse {
    from {
        opacity: 0.35;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1.08);
    }
}

.arb-section {
    position: relative;
    padding: clamp(5rem, 10vw, 8rem) 0;
    border-bottom: 1px solid var(--arb-line);
}

.arb-gameplay-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 9vw, 7.5rem);
    align-items: center;
}

.arb-video-shell {
    position: relative;
    width: min(100%, 330px);
    justify-self: center;
    padding: 0.7rem;
    border: 1px solid rgba(53, 232, 255, 0.25);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(53, 232, 255, 0.12), rgba(155, 108, 255, 0.06));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 70px rgba(53, 232, 255, 0.08);
}

.arb-video-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.35rem 0.75rem;
    color: var(--arb-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.arb-video-label span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--arb-pink);
    box-shadow: 0 0 10px var(--arb-pink);
}

.arb-video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 16px;
    background: var(--arb-bg);
}

.arb-gameplay-copy h2,
.arb-section-heading h2,
.arb-details h2 {
    margin-top: 1rem;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.55rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
}

.arb-gameplay-copy > p:not(.arb-section-number) {
    margin-top: 1.5rem;
    color: var(--arb-muted);
    font-size: 1.03rem;
    line-height: 1.75;
}

.arb-combo-ladder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-top: 1.8rem;
}

.arb-combo-ladder div {
    padding: 1rem;
    border: 1px solid var(--arb-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.arb-combo-ladder small {
    display: block;
    color: var(--arb-muted);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.arb-combo-ladder strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--arb-cyan);
    font-size: 1.6rem;
}

.arb-combo-ladder div:nth-child(2) strong { color: var(--arb-violet); }
.arb-combo-ladder div:nth-child(3) strong { color: var(--arb-pink); }

.arb-perfect-run {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 1.8rem;
    padding: 1.15rem;
    border-left: 3px solid var(--arb-lime);
    border-radius: 0 14px 14px 0;
    background: rgba(157, 255, 102, 0.055);
}

.arb-perfect-run span {
    color: var(--arb-lime);
    letter-spacing: 0.08em;
    text-shadow: 0 0 14px rgba(157, 255, 102, 0.45);
}

.arb-perfect-run p {
    color: var(--arb-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.arb-perfect-run strong {
    display: block;
    color: var(--arb-ink);
}

.arb-challenge {
    background:
        radial-gradient(circle at 50% 0%, rgba(155, 108, 255, 0.13), transparent 32rem),
        rgba(7, 10, 24, 0.72);
}

.arb-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
}

.arb-section-heading > p {
    max-width: 18rem;
    padding-bottom: 0.35rem;
    color: var(--arb-muted);
}

.arb-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}

.arb-mode-card {
    position: relative;
    min-height: 300px;
    padding: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--arb-line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(17, 24, 50, 0.96), rgba(8, 12, 28, 0.96));
    transition: transform 180ms ease, border-color 180ms ease;
}

.arb-mode-card:hover {
    transform: translateY(-5px);
    border-color: rgba(53, 232, 255, 0.48);
}

.arb-mode-card::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: var(--card-color);
    opacity: 0.1;
    filter: blur(16px);
}

.arb-mode-card--easy { --card-color: var(--arb-cyan); }
.arb-mode-card--hard { --card-color: var(--arb-violet); }
.arb-mode-card--extreme { --card-color: var(--arb-pink); }

.arb-mode-icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 2.8rem;
    border: 1px solid color-mix(in srgb, var(--card-color) 42%, transparent);
    border-radius: 12px;
    color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 10%, transparent);
    font-size: 1.8rem;
    text-shadow: 0 0 14px var(--card-color);
}

.arb-mode-level {
    color: var(--card-color);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.arb-mode-card h3 {
    margin-top: 0.5rem;
    color: #fff;
    font-size: 1.22rem;
}

.arb-mode-card > p:last-child {
    margin-top: 0.65rem;
    color: var(--arb-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.arb-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 9vw, 7rem);
}

.arb-detail-list {
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--arb-line);
}

.arb-world-note {
    margin-top: 1rem;
    color: var(--arb-violet);
    font-family: "Audiowide", "Arial Black", sans-serif;
    font-size: clamp(0.82rem, 1.5vw, 1.05rem);
    letter-spacing: 0.06em;
    text-shadow: 0 0 18px rgba(155, 108, 255, 0.35);
}

.arb-detail-list li {
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--arb-line);
}

.arb-detail-list p {
    color: var(--arb-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.arb-detail-list strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--arb-ink);
    font-size: 1rem;
}

.arb-detail-list a,
.arb-support-strip a {
    color: var(--arb-cyan);
}

.arb-detail-list a:hover,
.arb-support-strip a:hover {
    color: #fff;
}

.arb-support-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(4rem, 8vw, 6rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--arb-line);
    color: var(--arb-muted);
    font-size: 0.9rem;
}

.arb-support-strip span {
    margin-right: auto;
    color: var(--arb-violet);
    letter-spacing: 0.5em;
    text-shadow: 0 0 12px rgba(155, 108, 255, 0.4);
}

.arb-support-strip a {
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 820px) {
    .arb-hero {
        min-height: auto;
    }

    .arb-hero-inner,
    .arb-gameplay-grid,
    .arb-details-grid {
        grid-template-columns: 1fr;
    }

    .arb-gameplay-copy {
        order: -1;
    }

    .arb-section-heading {
        display: block;
    }

    .arb-section-heading > p {
        margin-top: 1rem;
    }

    .arb-mode-grid {
        grid-template-columns: 1fr;
    }

    .arb-mode-card {
        min-height: 0;
    }

    .arb-mode-icon {
        margin-bottom: 2rem;
    }
}

@media (max-width: 540px) {
    .arb-hero {
        padding-top: 3.5rem;
    }

    .arb-combo-ladder {
        grid-template-columns: 1fr;
    }

    .arb-combo-ladder div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .arb-combo-ladder strong {
        margin-top: 0;
    }

    .arb-support-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .arb-support-strip span {
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arb-mode-card,
    .arb-arrow-field span {
        transition: none;
        animation: none;
    }
}

/* ===========================================================================
   ArrowRhythmBlast showcase — a full-bleed break in the paper.

   A deliberate departure from the quilt system: DESIGN.md forbids saturated
   full-bleed bands, gradients and shadows, because the rest of the site is a
   pieced block on paper. This band is the game's own world, not the studio's,
   and it is the one place the page stops being paper. The system already
   reserves a dark ground for game media (--letterbox); this extends it.
   =========================================================================== */

.showcase {
    --neon-cyan: #35e8ff;
    --neon-pink: #ff3d8b;
    --neon-violet: #a25cff;
    --neon-lime: #7bff6b;
    --void: #05070f;
    --void-lit: #e9f2ff;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--void);
    color: var(--void-lit);
    padding: clamp(7rem, 15vw, 11.5rem) 0;
}

/* Aurora, matching the game's own backdrop: cold light low on the left, a
   warmer bloom top right, both far enough off-centre to leave the copy on a
   near-flat ground so the text keeps its contrast. */
.showcase::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(38% 44% at 12% 88%, rgba(53, 232, 255, 0.30), transparent 70%),
        radial-gradient(32% 40% at 22% 96%, rgba(123, 255, 107, 0.20), transparent 70%),
        radial-gradient(44% 46% at 88% 14%, rgba(162, 92, 255, 0.34), transparent 72%),
        radial-gradient(30% 34% at 96% 32%, rgba(255, 61, 139, 0.22), transparent 70%);
}

/* The board grid, carried out of the game and held to the same six-cell
   rhythm the rest of the site uses. */
.showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(233, 242, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 90% at 50% 50%, #000 30%, transparent 78%);
}

.showcase ::selection {
    background: var(--neon-cyan);
    color: var(--void);
}

.showcase-inner {
    display: grid;
    gap: clamp(2rem, 6vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

@media (min-width: 880px) {
    .showcase-inner {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        justify-items: start;
    }
}

/* ----------------------------------------------------------------- the clip */

.showcase-video {
    width: min(74vw, 290px);
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    background: #05070f;
    /* A cast shadow for weight, and a rim for the light the screen throws. */
    box-shadow:
        0 30px 64px -26px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(233, 242, 255, 0.10),
        0 0 68px -14px rgba(53, 232, 255, 0.38);
}

/* ---------------------------------------------------------------- the copy */

.showcase-copy {
    max-width: 34rem;
}

/* Same display voice as the ArrowRhythmBlast page, so the band on the home
   page reads as that game's world rather than as a generic dark section. */
.showcase h2 {
    font-family: "Audiowide", "Arial Black", sans-serif;
    font-weight: 400;
    font-size: clamp(1.85rem, 4.5vw, 3.55rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}

.showcase h2 em {
    font-style: normal;
    color: var(--neon-cyan);
    text-shadow: 0 0 26px rgba(53, 232, 255, 0.55);
}

.showcase p {
    color: rgba(233, 242, 255, 0.82);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    max-width: 46ch;
}

/* The combo ladder is the game's actual scoring rule, not an ornament. */
.combo-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.combo-ladder li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(233, 242, 255, 0.16);
    background: rgba(233, 242, 255, 0.04);
    font-size: 0.85rem;
    color: rgba(233, 242, 255, 0.72);
    max-width: none;
}

.combo-ladder b {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.combo-ladder li:nth-child(1) b {
    color: var(--neon-lime);
}

.combo-ladder li:nth-child(2) b {
    color: var(--neon-cyan);
}

.combo-ladder li:nth-child(3) b {
    color: var(--neon-pink);
}

.showcase .btn {
    margin-top: 1.9rem;
    border-color: var(--neon-cyan);
    color: var(--void);
    background: var(--neon-cyan);
    box-shadow: 0 0 34px -6px rgba(53, 232, 255, 0.7);
}

.showcase .btn:hover {
    background: #fff;
    border-color: #fff;
    color: var(--void);
}

.showcase .btn:focus-visible {
    outline-color: var(--neon-cyan);
}

.showcase-logo {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}

/* The clip auto-plays on request, so its controls are the pause mechanism and
   have to stay reachable rather than being styled away. */
.showcase-video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(5, 7, 15, 0.75));
}

/* The paper does not stop at the band, it dissolves into it. Each edge fades
   from the exact colour of the neighbouring section — white above, paper-alt
   below — down to nothing, letting the void come through underneath. */
/* Hard dividers: the bands butt straight up against each other and the colour
   change is the divider. Delete this rule to bring the dissolves back. */
.showcase-edge,
.parchment-edge {
    display: none;
}

.showcase-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(72px, 10vw, 150px);
    z-index: 0;
    pointer-events: none;
}

.showcase-edge--top {
    top: 0;
    background: linear-gradient(to bottom,
            rgb(255, 255, 255) 0%,
            rgba(255, 255, 255, 0.72) 26%,
            rgba(255, 255, 255, 0.28) 56%,
            rgba(255, 255, 255, 0) 100%);
}

.showcase-edge--bottom {
    bottom: 0;
    background: linear-gradient(to top,
            rgb(234, 217, 181) 0%,
            rgba(234, 217, 181, 0.72) 26%,
            rgba(234, 217, 181, 0.28) 56%,
            rgba(234, 217, 181, 0) 100%);
}

/* Content rides above both fades. */
.showcase-inner {
    position: relative;
    z-index: 1;
}

/* ===========================================================================
   PathScribe showcase — the counterpoint to the neon band.

   Warm vellum drawn from PathScribe's own site (#ead9b5 ground, #3b2c17 ink).
   Where the game band is loud and cold, this one is quiet and warm; the two
   sitting back to back is the studio's two halves stated in one scroll.
   =========================================================================== */

.parchment {
    --vellum: #ead9b5;
    --vellum-ink: #3b2c17;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--vellum);
    color: var(--vellum-ink);
    padding: clamp(7rem, 15vw, 11.5rem) 0;
}

/* Aged paper: light pooling toward the middle, shadow gathering at the
   corners, taken from the same treatment PathScribe's own page uses. */
.parchment::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 4% 10%, rgba(114, 72, 29, 0.18), transparent 30%),
        radial-gradient(ellipse at 96% 90%, rgba(110, 69, 28, 0.16), transparent 32%),
        radial-gradient(ellipse at 75% 18%, rgba(255, 247, 213, 0.36), transparent 28%),
        radial-gradient(ellipse at center, transparent 46%, rgba(92, 57, 22, 0.16) 108%);
}

.parchment ::selection {
    background: var(--vellum-ink);
    color: var(--vellum);
}

.parchment-copy {
    max-width: 60ch;
}

.parchment-logo {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}

.parchment h2 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: #2a1f10;
    margin-bottom: 1rem;
}

.parchment p {
    color: rgba(48, 35, 18, 0.86);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    max-width: 54ch;
}

/* The clip sits on the vellum like a page laid on a table. */
.parchment-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid rgba(92, 57, 22, 0.22);
    box-shadow: 0 26px 54px -28px rgba(74, 46, 18, 0.75);
}

.parchment .btn {
    margin-top: 1.9rem;
    background: var(--vellum-ink);
    border-color: var(--vellum-ink);
    color: #f6ecd6;
}

.parchment .btn:hover {
    background: #5c4726;
    border-color: #5c4726;
    color: #fff;
}

.parchment .btn:focus-visible {
    outline-color: var(--vellum-ink);
}

.parchment-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(72px, 10vw, 150px);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top,
            rgb(255, 255, 255) 0%,
            rgba(255, 255, 255, 0.72) 26%,
            rgba(255, 255, 255, 0.28) 56%,
            rgba(255, 255, 255, 0) 100%);
}

/* Copy and clip sit side by side, with the copy leading. The neon band runs
   clip-first, so the two showcases mirror each other down the page rather than
   repeating one layout twice. The clip is landscape, so it takes the wider
   column. */
.parchment-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

@media (min-width: 880px) {
    .parchment-inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

/* ===========================================================================
   PathScribe product page — the vellum world at full page length.

   The home page states PathScribe in one band (.parchment); this gives that
   same world a whole page, exactly as .arb-page gives one to the neon
   .showcase. It takes the same departure clause: DESIGN.md forbids gradients
   and saturated full-bleed grounds because the studio site is a pieced block
   on paper. This page is the app's own paper, not the studio's, and it borrows
   its ground, ink, quill blue and book serif from PathScribe's own site.

   The two product pages are deliberate opposites — cold neon and warm vellum,
   Audiowide and Garamond — built on identical bones, so the studio's hand
   still shows through both.
   =========================================================================== */

.book-page {
    --ps-vellum: #ead9b5;
    --ps-vellum-deep: #e2cea6;

    --ps-ink: #2a1f10;
    --ps-ink-soft: #5f4a2c;

    /* Quill blue and ember red are lifted from the logo's own gradients. Any
       colour here that ever sets type carries a deepened sibling, exactly the
       way --orange / --orange-text works on the studio pages: --ps-gold and
       --ps-ember-bright mark, --ps-gold-text and --ps-ember set words. */
    --ps-quill: #21478f;
    --ps-quill-light: #5576ad;
    --ps-ember: #b12524;
    --ps-ember-bright: #dc302f;
    --ps-gold: #c8961f;
    /* Deep enough to clear AA on the darker vellum band too (4.62:1 on
       --ps-vellum-deep, 5.13:1 on --ps-vellum), not just on the lighter one. */
    --ps-gold-text: #74510a;

    --ps-line: rgba(92, 57, 22, 0.24);
}

.book-page .site-footer {
    margin-top: 0;
}

.ps-page {
    position: relative;
    overflow: hidden;
    color: var(--ps-ink);
    background:
        radial-gradient(ellipse at 4% 6%, rgba(114, 72, 29, 0.16), transparent 32%),
        radial-gradient(ellipse at 96% 88%, rgba(110, 69, 28, 0.14), transparent 34%),
        radial-gradient(ellipse at 78% 14%, rgba(255, 247, 213, 0.34), transparent 26%),
        var(--ps-vellum);
}

/* Faint ruling: the paper answer to the game page's neon grid. */
.ps-page::before {
    content: "";
    position: fixed;
    inset: 66px 0 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: linear-gradient(rgba(92, 57, 22, 0.05) 1px, transparent 1px);
    background-size: 100% 32px;
}

.ps-page h1,
.ps-page h2,
.ps-page h3 {
    font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-weight: 600;
}

.ps-page h2,
.ps-page h3,
.ps-page p,
.ps-page li {
    max-width: none;
}

.ps-page em {
    color: var(--ps-ember);
}

.ps-page ::selection {
    background: var(--ps-ink);
    color: var(--ps-vellum);
}

.ps-page a {
    color: var(--ps-quill);
}

.ps-page a:hover {
    color: var(--ps-ember);
}

/* ------------------------------------------------------------------ hero */

.ps-hero {
    position: relative;
    min-height: min(720px, calc(100vh - 66px));
    display: grid;
    align-items: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-bottom: 1px solid var(--ps-line);
}

.ps-hero::after {
    content: "";
    position: absolute;
    right: -14rem;
    bottom: -16rem;
    width: 40rem;
    height: 40rem;
    border: 1px solid rgba(92, 57, 22, 0.14);
    border-radius: 50%;
}

.ps-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ps-hero-copy {
    width: min(100%, 730px);
    margin: 0 auto;
}

.ps-kicker {
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    color: var(--ps-gold-text);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ps-kicker span {
    color: var(--ps-ember);
    padding: 0 0.45rem;
}

.ps-logo {
    display: block;
    width: min(100%, 540px);
    height: auto;
    margin: 1.4rem auto 0;
}

.ps-lede {
    margin: 1.6rem auto 0;
    max-width: 36rem !important;
    color: var(--ps-ink-soft);
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    line-height: 1.7;
}

.ps-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 2rem;
}

.ps-quick-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    padding: 0.45rem 0.85rem;
    color: var(--ps-ink-soft);
    border: 1px solid var(--ps-line);
    border-radius: 999px;
    background: rgba(255, 250, 232, 0.5);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.ps-quick-stats b {
    color: var(--ps-quill);
    font-size: 1rem;
}

/* Printer's marks drifting on the page: the counterpart to the arrow field. */
.ps-mark-field span {
    position: absolute;
    z-index: 1;
    color: rgba(92, 57, 22, 0.18);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 3.2rem);
    line-height: 1;
    animation: ps-mark-drift 9s ease-in-out infinite alternate;
}

.ps-mark-field span:nth-child(1) { left: 6%; top: 14%; }
.ps-mark-field span:nth-child(2) { left: 37%; top: 7%; color: rgba(33, 71, 143, 0.18); animation-delay: -1.4s; }
.ps-mark-field span:nth-child(3) { left: 89%; top: 18%; animation-delay: -3.1s; }
.ps-mark-field span:nth-child(4) { left: 9%; top: 74%; color: rgba(177, 37, 36, 0.16); animation-delay: -4.6s; }
.ps-mark-field span:nth-child(5) { left: 47%; top: 87%; animation-delay: -0.8s; }
.ps-mark-field span:nth-child(6) { left: 93%; top: 70%; color: rgba(33, 71, 143, 0.16); animation-delay: -2.7s; }
.ps-mark-field span:nth-child(7) { left: 70%; top: 15%; color: rgba(200, 150, 31, 0.26); animation-delay: -5.2s; }
.ps-mark-field span:nth-child(8) { left: 24%; top: 90%; animation-delay: -1.9s; }
.ps-mark-field span:nth-child(9) { left: 16%; top: 34%; color: rgba(177, 37, 36, 0.14); animation-delay: -3.8s; }
.ps-mark-field span:nth-child(10) { left: 84%; top: 40%; color: rgba(33, 71, 143, 0.15); animation-delay: -0.5s; }
.ps-mark-field span:nth-child(11) { left: 3%; top: 48%; color: rgba(200, 150, 31, 0.24); animation-delay: -4.2s; }
.ps-mark-field span:nth-child(12) { left: 60%; top: 79%; animation-delay: -2.3s; }

@keyframes ps-mark-drift {
    from {
        opacity: 0.55;
        transform: translateY(-4px) rotate(-3deg);
    }

    to {
        opacity: 1;
        transform: translateY(4px) rotate(3deg);
    }
}

/* --------------------------------------------------------------- sections */

.ps-section {
    position: relative;
    padding: clamp(4.5rem, 9vw, 7rem) 0;
    border-bottom: 1px solid var(--ps-line);
}

.ps-section h2 {
    color: var(--ps-ink);
    font-size: clamp(1.95rem, 4.2vw, 3.2rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ------------------------------------------------------------- in the app */

/* The game page can stand its clip beside the copy because that clip is a
   portrait phone. This one is a landscape tablet showing an app full of small
   type, so it leads the section at full measure instead and the copy runs
   beneath it. Same two blocks, ordered to suit the aspect. */
.ps-play-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    align-items: start;
}

.ps-play-copy > p {
    color: var(--ps-ink-soft);
    font-size: 1.03rem;
    line-height: 1.75;
}

.ps-play-copy > p + p {
    margin-top: 1.4rem;
}

/* The clip lies on the vellum like a page laid on a table. It is the one
   lifted object on the page, carried over from the home band so the two read
   as the same object seen twice. */
.ps-video-shell {
    position: relative;
    width: min(100%, 760px);
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    padding: 0.7rem;
    border: 1px solid var(--ps-line);
    border-radius: var(--radius);
    background: rgba(255, 250, 232, 0.62);
    box-shadow: 0 26px 54px -28px rgba(74, 46, 18, 0.75);
}

.ps-video-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem 0.7rem;
    color: var(--ps-gold-text);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ps-video-label span {
    width: 1.6rem;
    height: 1px;
    background: var(--ps-gold);
}

.ps-video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ps-ink);
}

.ps-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-top: 1.8rem;
}

.ps-loop div {
    padding: 0.95rem 1rem;
    border: 1px solid var(--ps-line);
    border-radius: var(--radius);
    background: rgba(255, 250, 232, 0.45);
}

.ps-loop small {
    display: block;
    color: var(--ps-ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ps-loop strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--ps-quill);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
}

.ps-loop div:nth-child(2) strong { color: var(--ps-gold-text); }
.ps-loop div:nth-child(3) strong { color: var(--ps-ember); }

.ps-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 1.8rem;
    padding: 1.15rem;
    border-left: 3px solid var(--ps-gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: rgba(200, 150, 31, 0.1);
}

.ps-note > span {
    color: var(--ps-gold-text);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 1.5rem;
    line-height: 1;
}

.ps-note p {
    color: var(--ps-ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ps-note strong {
    display: block;
    color: var(--ps-ink);
}

/* ------------------------------------------------------------- three jobs */

.ps-shelf {
    background: var(--ps-vellum-deep);
}

.ps-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
}

.ps-section-heading > p {
    max-width: 19rem;
    padding-bottom: 0.35rem;
    color: var(--ps-ink-soft);
}

.ps-job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.75rem;
}

/* The accent rides the icon box and the level label, not a bar across the top:
   a 3px edge fights a 10px corner, and the card was already saying its colour
   twice over. */
.ps-job-card {
    position: relative;
    padding: clamp(1.4rem, 3vw, 1.9rem);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius);
    background: rgba(255, 250, 232, 0.66);
}

.ps-job-card--read { --accent: var(--ps-gold); --accent-text: var(--ps-gold-text); }
.ps-job-card--play { --accent: var(--ps-quill-light); --accent-text: var(--ps-quill); }
.ps-job-card--keep { --accent: var(--ps-ember-bright); --accent-text: var(--ps-ember); }

.ps-job-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.6rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent-text);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 1.5rem;
    line-height: 1;
}

.ps-job-level {
    color: var(--accent-text);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ps-job-card h3 {
    margin-top: 0.35rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

.ps-job-card ul {
    margin-top: 1rem;
    list-style: none;
}

.ps-job-card li {
    position: relative;
    margin-top: 0.5rem;
    padding-left: 1.15rem;
    color: var(--ps-ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.ps-job-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--accent);
}

/* ---------------------------------------------------------------- systems */

.ps-systems-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 7vw, 5rem);
    align-items: start;
}

.ps-systems-grid > div > p {
    margin-top: 1.4rem;
    color: var(--ps-ink-soft);
    font-size: 1.03rem;
    line-height: 1.75;
}

.ps-recipe {
    padding: clamp(1.5rem, 3.5vw, 2.1rem);
    border: 1px solid var(--ps-line);
    border-radius: var(--radius);
    background: rgba(255, 250, 232, 0.62);
}

.ps-recipe > p:first-child {
    color: var(--ps-quill);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ps-recipe h3 {
    margin-top: 0.35rem;
    font-size: 1.6rem;
    line-height: 1.2;
}

.ps-recipe h3 + p {
    margin-top: 0.9rem;
    color: var(--ps-ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ---------------------------------------------------------------- details */

.ps-details {
    background: var(--ps-vellum-deep);
}

.ps-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 7vw, 5rem);
}

.ps-details-note {
    margin-top: 1rem;
    color: var(--ps-quill);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    letter-spacing: 0.04em;
}

.ps-detail-list {
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--ps-line);
}

.ps-detail-list li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0.7rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--ps-line);
}

.ps-detail-list li > span {
    color: var(--ps-gold-text);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.ps-detail-list p {
    color: var(--ps-ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ps-detail-list strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ps-ink);
    font-size: 1rem;
}

/* ---------------------------------------------------------- support strip */

.ps-support-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(3.5rem, 7vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--ps-line);
    color: var(--ps-ink-soft);
    font-size: 0.9rem;
}

.ps-support-strip > span {
    margin-right: auto;
    color: var(--ps-gold-text);
    font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 1.25rem;
    letter-spacing: 0.4em;
}

.ps-support-strip a {
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 880px) {
    .ps-hero {
        min-height: auto;
    }

    .ps-play-grid,
    .ps-systems-grid,
    .ps-details-grid {
        grid-template-columns: 1fr;
    }

    .ps-section-heading {
        display: block;
    }

    .ps-section-heading > p {
        margin-top: 1rem;
    }

    .ps-job-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .ps-hero {
        padding-top: 3rem;
    }

    .ps-loop {
        grid-template-columns: 1fr;
    }

    .ps-loop div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .ps-loop strong {
        margin-top: 0;
    }

    .ps-support-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .ps-support-strip > span {
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-mark-field span {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   PathScribe refresh

   The product page keeps the studio site's flat, pieced construction while
   borrowing the deep blue, red, and gold from the app mark. Uncial Antiqua is
   the logo's display face; it is reserved for headings and a few bookish
   labels so longer copy remains comfortable in Quicksand.
   --------------------------------------------------------------------------- */

.book-page {
    --ps-paper: #ead9b5;
    --ps-paper-alt: #dfca9f;
    --ps-white: #f8edce;
    --ps-navy: #17366f;
    --ps-navy-dark: #102650;
    --ps-red: #a52d31;
    --ps-red-bright: #d0443f;
    --ps-gold: #d9a12d;
    --ps-gold-text: #795608;
    --ps-ink: #26231f;
    --ps-muted: #665f56;
    --ps-rule: #d6cbbb;
}

.book-page .site-footer {
    margin-top: 0;
}

.ps-page {
    position: relative;
    overflow: hidden;
    color: var(--ps-ink);
    background:
        radial-gradient(ellipse at 5% 8%, rgba(114, 72, 29, 0.16), transparent 29%),
        radial-gradient(ellipse at 95% 88%, rgba(105, 65, 25, 0.15), transparent 31%),
        radial-gradient(ellipse at 72% 18%, rgba(255, 247, 213, 0.32), transparent 26%),
        linear-gradient(112deg, rgba(255, 250, 226, 0.22), transparent 38%, rgba(125, 81, 35, 0.05)),
        var(--ps-paper);
}

.ps-page::before {
    display: block;
    content: "";
    position: fixed;
    inset: 66px 0 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(92, 57, 22, 0.045) 1px, transparent 1px),
        radial-gradient(ellipse at 28% 76%, rgba(130, 86, 39, 0.1), transparent 25%);
    background-size: 100% 34px, auto;
}

.ps-page > section {
    position: relative;
    z-index: 1;
}

.ps-page h2,
.ps-page h3 {
    max-width: none;
    color: var(--ps-navy-dark);
}

.ps-page h2 {
    font-family: "Uncial Antiqua", Georgia, serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.ps-page h3 {
    font-family: inherit;
    font-size: 1.18rem;
    line-height: 1.3;
}

.ps-page p,
.ps-page li {
    max-width: none;
}

.ps-page a {
    color: var(--ps-navy);
}

.ps-page a:hover {
    color: var(--ps-red);
}

.ps-hero {
    min-height: clamp(590px, calc(100vh - 66px), 780px);
    padding: clamp(3.75rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 7.5rem);
    overflow: hidden;
    isolation: isolate;
    background: #d8c8a0;
}

.ps-hero::after {
    display: none;
}

.ps-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #d8c8a0;
}

.ps-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 64%, var(--ps-paper) 100%),
        linear-gradient(90deg, rgba(242, 229, 191, 0.97) 0%, rgba(242, 229, 191, 0.9) 42%, rgba(224, 208, 174, 0.54) 70%, rgba(52, 42, 38, 0.28) 100%),
        linear-gradient(180deg, rgba(34, 29, 31, 0.12), transparent 30%, rgba(74, 50, 25, 0.18));
    pointer-events: none;
}

.ps-hero-media .ps-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ps-hero-grid {
    display: flex;
    align-items: center;
}

.ps-hero-copy {
    width: min(100%, 620px);
    margin: 0;
}

.ps-logo {
    display: block;
    width: min(100%, 440px);
    height: auto;
    margin: 1.2rem 0 0;
}

.ps-lede {
    margin: 1.35rem 0 0;
    max-width: 35rem !important;
    color: var(--ps-muted);
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.72;
}

.ps-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: center;
    margin-top: 1.8rem;
}

.ps-btn {
    background: var(--ps-navy);
    border-color: var(--ps-navy);
    color: #fff !important;
}

.ps-btn:hover {
    background: var(--ps-red);
    border-color: var(--ps-red);
}

.ps-text-link {
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.ps-text-link span {
    display: inline-block;
    margin-left: 0.25rem;
}

.ps-promises {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.25rem;
    margin: 1.8rem 0 0;
    color: var(--ps-muted);
    list-style: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.ps-promises li {
    position: relative;
    padding-left: 0.95rem;
}

.ps-promises li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    background: var(--ps-gold);
}

.ps-hero-demo {
    border: 1px solid var(--ps-rule);
    border-radius: var(--radius);
    background: rgba(248, 237, 206, 0.78);
    box-shadow: 0 28px 64px -36px rgba(69, 40, 14, 0.82);
}

.ps-demo-bar {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.55rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--ps-rule);
}

.ps-demo-bar span {
    width: 0.52rem;
    height: 0.52rem;
    background: var(--ps-red-bright);
}

.ps-demo-bar span:nth-child(2) {
    background: var(--ps-gold);
}

.ps-demo-bar span:nth-child(3) {
    background: var(--ps-navy);
}

.ps-demo-bar b {
    margin-left: auto;
    color: var(--ps-muted);
    font-family: "Uncial Antiqua", Georgia, serif;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.ps-video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    background: #eee9f0;
}

.ps-demo-caption {
    padding: 0.8rem 1rem;
    color: var(--ps-muted);
    font-size: 0.78rem;
}

.ps-section {
    padding: clamp(4rem, 9vw, 7rem) 0;
    border-bottom: 1px solid var(--ps-rule);
}

.ps-workflow {
    background: var(--ps-paper);
}

.ps-control {
    background: rgba(248, 237, 206, 0.42);
}

.ps-section-heading {
    display: block;
}

.ps-section-heading h2,
.ps-capture-copy h2,
.ps-systems-copy h2 {
    margin-top: 0;
}

.ps-section-intro {
    max-width: 43rem !important;
    margin-top: 1rem;
    color: var(--ps-muted);
    font-size: 1.04rem;
    line-height: 1.7;
}

.ps-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 3rem;
    align-items: start;
}

.ps-feature {
    position: relative;
    min-height: 0;
    padding: 0 0 1.5rem;
    border-radius: 0;
    background: transparent;
    clip-path: none;
}

.ps-feature::after {
    content: none;
}

.ps-feature--read {
    --feature-accent: var(--ps-gold);
}

.ps-feature--play {
    --feature-accent: var(--ps-navy);
}

.ps-feature--record {
    --feature-accent: var(--ps-red-bright);
}

.ps-feature-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.4rem;
    border-radius: 0;
    clip-path: none;
    object-fit: cover;
}

.ps-feature h3 {
    margin-top: 0;
}

.ps-feature > p:last-child {
    margin-top: 0.85rem;
    color: var(--ps-muted);
    font-size: 0.91rem;
    line-height: 1.65;
}

.ps-capture {
    background: rgba(204, 176, 122, 0.3);
}

.ps-capture-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 7vw, 5.5rem);
    align-items: center;
}

.ps-capture-example {
    position: relative;
    padding: 6rem clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--ps-rule);
    border-radius: 0;
    background: rgba(255, 247, 222, 0.8);
    box-shadow: 0 26px 54px -38px rgba(69, 40, 14, 0.78);
    clip-path: none;
}

.ps-paper-label {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--ps-rule);
    color: var(--ps-gold-text);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ps-capture-example blockquote {
    margin: 2rem 0;
    color: var(--ps-navy-dark);
    font-family: "Uncial Antiqua", Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.45;
}

.ps-capture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ps-rule);
}

.ps-capture-actions span {
    padding: 0;
    border-radius: 0;
    background: transparent;
    clip-path: none;
    color: var(--ps-navy);
    font-size: 0.72rem;
    font-weight: 700;
}

.ps-capture-actions span + span::before {
    content: "\00b7";
    margin-right: 0.55rem;
    color: var(--ps-gold-text);
}

.ps-capture-copy > p {
    margin-top: 1.1rem;
    color: var(--ps-muted);
    line-height: 1.72;
}

.ps-note {
    display: block;
    margin-top: 1.6rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--ps-gold);
    border-radius: 0;
    background: linear-gradient(90deg, var(--ps-gold) 0 4px, rgba(255, 247, 222, 0.4) 4px);
    clip-path: none;
}

.ps-note strong,
.ps-note span {
    display: block;
}

.ps-note strong {
    color: var(--ps-ink);
}

.ps-note span {
    margin-top: 0.15rem;
    color: var(--ps-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.ps-systems {
    background: var(--ps-navy-dark);
}

.ps-systems-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: clamp(2rem, 6vw, 5rem);
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid var(--ps-navy);
    border-radius: 0;
    background: transparent;
    clip-path: none;
}

.ps-systems-copy {
    position: relative;
}

.ps-systems-copy h2,
.ps-systems-copy > p:last-child {
    max-width: 36rem;
    color: #fffdf8;
}

.ps-systems-copy > p:last-child {
    margin-top: 1.15rem;
    color: #d9dfeb;
    line-height: 1.72;
}

.ps-recipe {
    padding: 0;
    border: 1px solid #6d82aa;
    border-radius: 0;
    background: transparent;
    clip-path: none;
}

.ps-recipe-icon {
    display: block;
    margin-bottom: 2rem;
    color: var(--ps-gold-text);
    font-family: "Uncial Antiqua", Georgia, serif;
    font-size: 2rem;
}

.ps-recipe h3 {
    margin-top: 0;
    color: #fffdf8;
}

.ps-recipe > p:last-child {
    margin-top: 0.85rem;
    color: #d9dfeb;
    font-size: 0.91rem;
    line-height: 1.65;
}

.ps-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
    border-top: 1px solid var(--ps-rule);
    border-left: 1px solid var(--ps-rule);
}

.ps-detail-grid article {
    min-height: 12rem;
    padding: 1.5rem;
    border-right: 1px solid var(--ps-rule);
    border-bottom: 1px solid var(--ps-rule);
}

.ps-detail-grid article > span {
    color: var(--ps-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ps-detail-grid h3 {
    margin-top: 1.3rem;
}

.ps-detail-grid p {
    margin-top: 0.55rem;
    color: var(--ps-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ps-support-strip {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(3rem, 7vw, 5rem);
    padding: 0;
    border: 1px solid var(--ps-rule);
    border-radius: 0;
    background: transparent;
    clip-path: none;
}

.ps-support-strip h2 {
    max-width: 40rem;
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    letter-spacing: -0.01em;
}

.ps-support-strip .btn {
    flex: none;
    margin: 0;
    border-color: var(--ps-navy);
    color: var(--ps-navy);
}

.ps-support-strip .btn:hover {
    background: var(--ps-navy);
    color: #fff;
}

@media (max-width: 880px) {
    .ps-capture-grid,
    .ps-systems-panel {
        grid-template-columns: 1fr;
    }

    .ps-feature-grid {
        grid-template-columns: 1fr;
    }

    .ps-feature {
        min-height: 0;
    }

}

@media (max-width: 600px) {
    .ps-hero {
        min-height: 620px;
        padding-top: 2.75rem;
    }

    .ps-hero-media::after {
        background:
            linear-gradient(180deg, transparent 58%, var(--ps-paper) 100%),
            rgba(242, 229, 191, 0.88);
    }

    .ps-demo-bar b {
        display: none;
    }

    .ps-detail-grid {
        grid-template-columns: 1fr;
    }

    .ps-support-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* PathScribe uses colour and parchment tone for separation, not outlines or
   elevation. Focus outlines remain available through the shared :focus-visible
   rule because they are an accessibility affordance rather than decoration. */
.ps-page,
.ps-page *,
.ps-page *::before,
.ps-page *::after {
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------------
   PathScribe: historical editorial direction
   Quiet museum typography, parchment fields, burgundy accents, and imagery
   integrated into the composition rather than decorated as fantasy UI.
   --------------------------------------------------------------------------- */

.book-page {
    --ps-paper: #eee5d3;
    --ps-paper-alt: #dfcfad;
    --ps-white: #f7f0df;
    --ps-navy: #6f241f;
    --ps-navy-dark: #642019;
    --ps-red: #6f241f;
    --ps-red-bright: #8a3028;
    --ps-gold: #aa7c3f;
    --ps-gold-text: #79552a;
    --ps-ink: #29231d;
    --ps-muted: #62584d;
    --ps-rule: #cdbfaa;
    color: var(--ps-ink);
    font-family: "EB Garamond", Georgia, serif;
}

.book-page .site-header {
    background: rgba(238, 229, 211, 0.94);
    backdrop-filter: blur(10px);
}

.book-page .brand span,
.book-page .nav {
    font-family: "Cormorant Garamond", Georgia, serif;
}

.book-page .brand span {
    color: #493d33;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
}

.book-page .brand b {
    color: var(--ps-red);
}

.book-page .nav > a,
.book-page .nav-dropdown > summary {
    color: #4b4037;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.book-page .nav-dropdown-menu {
    background: var(--ps-white);
}

.book-page .nav-dropdown-menu a {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1rem;
}

.ps-page {
    background-color: var(--ps-paper);
    background-image:
        linear-gradient(rgba(242, 234, 216, 0.3), rgba(242, 234, 216, 0.3)),
        url("pathscribe-parchment-v1.webp");
    background-position: center top;
    background-size: auto, 768px 512px;
}

.ps-page::before {
    display: none;
}

.ps-page h2,
.ps-page h3,
.ps-capture-example blockquote {
    font-family: "Cormorant Garamond", Georgia, serif;
}

.ps-page h2 {
    color: var(--ps-ink);
    font-size: clamp(3.1rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ps-page h3 {
    color: var(--ps-ink);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.08;
}

.ps-page p,
.ps-page li {
    font-family: "EB Garamond", Georgia, serif;
}

.ps-hero {
    min-height: clamp(650px, calc(100vh - 66px), 850px);
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    background: #d9cfbc;
}

.ps-hero::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.34;
    background: url("pathscribe-parchment-v1.webp") center / 768px 512px repeat;
    mix-blend-mode: multiply;
}

.ps-hero-media::after {
    background:
        linear-gradient(180deg, transparent 72%, var(--ps-paper) 100%),
        linear-gradient(90deg, rgba(240, 233, 216, 0.99) 0%, rgba(240, 233, 216, 0.94) 38%, rgba(232, 223, 205, 0.54) 63%, rgba(39, 31, 26, 0.18) 100%);
}

.ps-hero-copy {
    width: min(100%, 610px);
}

.ps-logo {
    width: min(100%, 520px);
    margin-top: 0;
}

.ps-lede {
    max-width: 31rem !important;
    margin-top: 1.6rem;
    color: #463c33;
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.55;
}

.ps-actions {
    margin-top: 2rem;
}

.ps-btn,
.ps-support-strip .btn {
    padding: 0.82rem 1.6rem;
    border-radius: 0;
    background: var(--ps-red);
    color: #fff8ec !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ps-promises {
    gap: 0.7rem 1.3rem;
    color: #5a4d41;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ps-promises li {
    padding-left: 0.9rem;
}

.ps-promises li::before {
    top: 0.7em;
    width: 0.35rem;
    height: 1px;
    background: var(--ps-red);
}

.ps-section {
    padding: clamp(5rem, 10vw, 8.5rem) 0;
}

.ps-workflow {
    overflow: hidden;
    isolation: isolate;
    background: rgba(243, 236, 220, 0.68);
}

.ps-workflow > .wrap {
    position: relative;
    z-index: 1;
}

.ps-manuscript-art {
    position: absolute;
    z-index: 0;
    top: -3rem;
    right: -9rem;
    width: min(64rem, 72vw);
    height: auto;
    opacity: 0.42;
    pointer-events: none;
    transform: rotate(1.5deg);
}

.ps-workflow::before,
.ps-workflow::after,
.ps-capture-example::before,
.ps-capture-example::after,
.ps-systems-panel::before,
.ps-systems-panel::after {
    content: none;
}

.ps-section-intro {
    max-width: 39rem !important;
    margin-top: 1.5rem;
    color: var(--ps-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

.ps-feature-grid {
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

.ps-feature-image {
    margin-bottom: 1.6rem;
}

.ps-feature > p:last-child {
    margin-top: 0.75rem;
    color: var(--ps-muted);
    font-size: 1.02rem;
    line-height: 1.5;
}

.ps-capture {
    background: rgba(231, 220, 197, 0.74);
}

.ps-capture-example {
    padding: clamp(2.2rem, 5vw, 3.6rem);
    background: rgba(249, 243, 226, 0.9);
}

.ps-seal {
    position: absolute;
    right: -1.5rem;
    bottom: -3rem;
    z-index: 2;
    width: clamp(6.5rem, 10vw, 8.5rem);
    height: auto;
    pointer-events: none;
    transform: rotate(-8deg);
}

.ps-paper-label {
    color: var(--ps-red);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ps-capture-example blockquote {
    color: var(--ps-ink);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 500;
    line-height: 1.04;
}

.ps-capture-actions {
    color: var(--ps-red);
}

.ps-capture-actions span {
    color: var(--ps-red);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.77rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ps-capture-copy > p,
.ps-systems-copy > p:last-child,
.ps-recipe > p:last-child {
    font-size: 1.12rem;
    line-height: 1.55;
}

.ps-note {
    padding: 1rem 0 1rem 1.2rem;
    background: linear-gradient(90deg, var(--ps-red) 0 3px, transparent 3px);
}

.ps-note strong {
    color: var(--ps-red);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-note span {
    font-size: 1rem;
}

.ps-systems {
    background: var(--ps-navy-dark);
}

.ps-systems-panel {
    gap: clamp(3rem, 8vw, 7rem);
}

.ps-systems-copy h2,
.ps-systems-copy > p:last-child,
.ps-recipe h3,
.ps-recipe > p:last-child {
    color: #f4ead8;
}

.ps-recipe-icon {
    color: #d4aa67;
}

.ps-control {
    background: rgba(245, 238, 223, 0.7);
}

.ps-detail-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: 4rem;
}

.ps-detail-grid article {
    min-height: 0;
    padding: 0;
}

.ps-detail-grid article > span {
    color: var(--ps-red);
    font-family: "Cormorant Garamond", Georgia, serif;
}

.ps-detail-grid h3 {
    margin-top: 1rem;
}

.ps-detail-grid p {
    font-size: 1rem;
    line-height: 1.5;
}

.ps-support-strip {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: 2rem;
    background: linear-gradient(var(--ps-red), var(--ps-red)) left top / 4rem 2px no-repeat;
}

.ps-support-strip h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 500;
    text-transform: none;
}

@media (max-width: 880px) {
    .ps-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .book-page .site-header {
        background: rgba(238, 229, 211, 0.98);
    }

    .ps-hero {
        min-height: 650px;
    }

    .ps-hero-media::after {
        background:
            linear-gradient(180deg, rgba(240, 233, 216, 0.82), var(--ps-paper) 100%),
            rgba(240, 233, 216, 0.78);
    }

    .ps-page h2 {
        font-size: clamp(2.7rem, 14vw, 4rem);
    }

    .ps-capture-example::before {
        content: none;
    }

    .ps-manuscript-art {
        top: 1rem;
        right: -16rem;
        width: 44rem;
        opacity: 0.3;
    }

    .ps-seal {
        right: -0.5rem;
        bottom: -2.2rem;
        width: 6.5rem;
    }

    .ps-detail-grid {
        grid-template-columns: 1fr;
    }
}