/**
 * Community Requests page V2 — salmon-CTA redesign.
 *
 * Layout: hero -> 4-step grid -> actions + mascot row -> 3-panel economics
 * -> recent community actions feed -> thanks block.
 *
 * Sections from `prv2-board` through `prv2-voice-panel` are a near-literal
 * port of a reference layout (ChatGPT-generated) that we'll later refactor
 * to use `--wakasm-*` tokens once the visual is locked.
 *
 * @since 2026-05-02
 */

.prv2-page {
    --salmon:        var(--wakasm-patreon);     /* #f96854 */
    --salmon-hover:  #fa7c6a;
    --salmon-dark:   #e04d3a;
    --salmon-on:     #ffffff;
    --salmon-soft:   rgba(249, 104, 84, 0.15);
    --salmon-edge:   rgba(249, 104, 84, 0.35);

    --cream:         #fff0c7;
    --cream-soft:    #f4ddb0;
    --hero-bg:       #20252a;

    --board-bg:      #191d20;
    --panel-grad-1:  #25292c;
    --panel-grad-2:  #181c1f;
    --orange-line:   #d99a5f;
    --coral:         #ff685d;
    --coral-deep:    #e94c43;
    --teal:          #2a8d89;
    --teal-deep:     #1e6f72;
    --coin-gold:     #ffc936;

    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 60px 60px;
    background: #1a1a1a;

    /* Wavy borders on left/right; straight top/bottom (per CLAUDE.md page pattern) */
    clip-path: polygon(
        0% 0%, 100% 0%,
        98% 5%, 99% 10%, 97% 15%, 100% 20%, 98% 25%, 99% 30%, 97% 35%, 100% 40%,
        98% 45%, 99% 50%, 97% 55%, 100% 60%, 98% 65%, 99% 70%, 97% 75%, 100% 80%,
        98% 85%, 99% 90%, 97% 95%,
        100% 100%, 0% 100%,
        2% 95%, 1% 90%, 3% 85%, 0% 80%, 2% 75%, 1% 70%, 3% 65%, 0% 60%,
        2% 55%, 1% 50%, 3% 45%, 0% 40%, 2% 35%, 1% 30%, 3% 25%, 0% 20%,
        2% 15%, 1% 10%, 3% 5%
    );
}

/* Top torn edge — green accent */
.prv2-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #4da44b;
    clip-path: polygon(0% 0%, 10% 80%, 20% 60%, 30% 90%, 40% 50%, 50% 85%,
                       60% 40%, 70% 75%, 80% 55%, 90% 80%, 100% 0%, 100% 0%, 0% 0%);
    z-index: 1;
}

/* Bottom torn edge — green accent */
.prv2-page::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #4da44b;
    clip-path: polygon(0% 100%, 10% 20%, 20% 40%, 30% 10%, 40% 50%, 50% 15%,
                       60% 60%, 70% 25%, 80% 45%, 90% 20%, 100% 100%, 100% 100%, 0% 100%);
    z-index: 1;
}

/* Lift content above the torn edges */
.prv2-page > * {
    position: relative;
    z-index: 2;
}

/* =========================================================================
   Unified hover idiom — kill global theme link defaults inside the page so
   anchors don't gain an underline (which reflows text) or unexpected color
   flips on hover. Specific buttons/pills define their own hover effects.
   ========================================================================= */
.prv2-page a {
    text-decoration: none;
}
.prv2-page a:hover,
.prv2-page a:focus,
.prv2-page a:active {
    text-decoration: none;
}

/* =========================================================================
   Hero — wide site-width card, 2-col (text left + art right)
   ========================================================================= */

.prv2-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    gap: 18px;
    width: 990px;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 24px 36px;
    background: var(--hero-bg);
    border-radius: 16px;
    color: var(--cream-soft);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.prv2-hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
}

.prv2-hero-art {
    position: relative;
    min-height: 240px;
    z-index: 1;
    perspective: 900px;
}

.prv2-hero-spark {
    position: absolute;
    color: var(--cream);
    font-weight: 900;
    line-height: 1;
    opacity: 0.95;
    pointer-events: none;
    font-size: 32px;
}
.prv2-hero-spark--1 { top: 6px;   right: 22%; transform: rotate(15deg); }
.prv2-hero-spark--2 { top: 36px;  right: 8%;  font-size: 22px; }
.prv2-hero-spark--3 { bottom: 14px; right: 28%; font-size: 24px; transform: rotate(-12deg); }
.prv2-hero-spark--4 { top: 44%;  right: 4%;  font-size: 18px; }

/* 3D coin: empty wrapper holding stacked face/edge discs.
   Faces sit at +/- half-thickness, edges fill the cylinder rim so the
   coin never disappears edge-on during rotation. */
.prv2-hero-coin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    animation: prv2-hero-coin-spin 2.4s linear infinite;
    will-change: transform;
}

@keyframes prv2-hero-coin-spin {
    from { transform: translate(-50%, -50%) rotateY(0deg); }
    to   { transform: translate(-50%, -50%) rotateY(360deg); }
}

.prv2-coin-face,
.prv2-coin-edge {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    backface-visibility: hidden;
}

.prv2-coin-face {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #fff39f, #ffc52f 50%, #d98900 100%);
    border: 7px solid #b87400;
    color: #2e9b56;
    font-size: 78px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
    box-shadow: inset -6px -7px 0 rgba(0, 0, 0, 0.14),
                0 0 0 14px rgba(255, 201, 54, 0.08);
    /* Cycle W through pastels with the default deep green as the
       recurring home-base color (positions 0 and 3 of 6). 7.2s total =
       6 slots × 1.2s = 1 slot per half-rotation. Hard snap via
       duplicated keyframes; negative delay lands snap at edge-on. */
    animation: prv2-hero-coin-color 7.2s linear -0.6s infinite;
}
.prv2-coin-face--front { transform: translateZ(7px); }
.prv2-coin-face--back  { transform: translateZ(-7px) rotateY(180deg); }

@keyframes prv2-hero-coin-color {
    0%,     16.65% { color: #2e9b56; } /* default deep green - home base */
    16.66%, 33.32% { color: #7dd3fc; } /* pastel blue */
    33.33%, 49.99% { color: #c4b5fd; } /* pastel purple */
    50%,    66.65% { color: #2e9b56; } /* default deep green - home base */
    66.66%, 83.32% { color: #f9a8d4; } /* pastel pink */
    83.33%, 100%   { color: #fdba74; } /* pastel orange */
}

/* Edge discs — thin gold cylinders stacked between the faces.
   Slight darker rim gradient sells the curvature; backface-visibility
   keeps the silhouette clean. --coin-z-scale lets smaller variants
   compress the rim depth proportionally. */
.prv2-coin-edge {
    background: radial-gradient(circle at 50% 50%, #d98900 0 64%, #b87400 67%, #8a5500 100%);
    transform: translateZ(calc(var(--z, 0px) * var(--coin-z-scale, 1)));
    backface-visibility: visible;
}

/* Small inline variant — for step-card icons. Drops the absolute
   positioning, shrinks face + rim, in-flow so it sits inside the
   step-icon grid cell. Reuses the rotate-only spin keyframes. */
.prv2-hero-coin--small {
    position: relative;
    top: auto;
    left: auto;
    width: 50px;
    height: 50px;
    transform: none;
    animation: prv2-coin-spin 2.4s linear infinite;
    --coin-z-scale: 0.5;
    vertical-align: middle;
}
.prv2-hero-coin--small .prv2-coin-face {
    font-size: 30px;
    border-width: 3px;
    -webkit-text-stroke: 1px #ffffff;
    box-shadow: inset -2px -3px 0 rgba(0, 0, 0, 0.12),
                0 0 0 5px rgba(255, 201, 54, 0.08);
}
.prv2-hero-coin--small .prv2-coin-face--front { transform: translateZ(3px); }
.prv2-hero-coin--small .prv2-coin-face--back  { transform: translateZ(-3px) rotateY(180deg); }

/* Wrap a small spinning coin + adjacent emoji in step-icon cells */
.prv2-step-icon-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Generic opt-in spin modifier for other coins (Monthly Credits, mini coins,
   voice-panel big coin, thanks-strip coin, etc.). Add prv2-coin--spin to
   enable. Uses translate-free spin since these coins aren't absolutely
   positioned. */
.prv2-coin--spin {
    animation: prv2-coin-spin 2.4s linear infinite;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}
@keyframes prv2-coin-spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .prv2-hero-coin,
    .prv2-coin-face,
    .prv2-coin--spin { animation: none; }
}

/* Floating game-art stream — two rows of real box art drifting in
   opposite directions to visualize "what to play next." Edge fade-mask
   so tiles enter/exit softly rather than popping in. */
.prv2-hero-stream {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.prv2-hero-stream-row {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: visible;
}
.prv2-hero-stream-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 14px;
    will-change: transform;
}
.prv2-hero-stream-row--a .prv2-hero-stream-track {
    animation: prv2-hero-stream-left 28s linear infinite;
}
.prv2-hero-stream-row--b .prv2-hero-stream-track {
    animation: prv2-hero-stream-right 32s linear infinite;
}
@keyframes prv2-hero-stream-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes prv2-hero-stream-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.prv2-hero-tile {
    flex: 0 0 auto;
    width: 72px;
    height: 100px;
    border-radius: 7px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    background-color: #0e1113;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
    animation: prv2-hero-tile-bob 4.2s ease-in-out infinite;
}
.prv2-hero-tile:nth-child(3n)   { animation-delay: -1s;   }
.prv2-hero-tile:nth-child(3n+1) { animation-delay: -2.4s; }
.prv2-hero-tile:nth-child(3n+2) { animation-delay: -3.6s; }
@keyframes prv2-hero-tile-bob {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-5px) rotate( 2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .prv2-hero-stream-track,
    .prv2-hero-tile { animation: none; }
}

.prv2-hero-thanks {
    position: absolute;
    top: 14px;
    left: 18px;
    padding: 5px 12px;
    background: linear-gradient(180deg, #ffd663, #e6a51b);
    color: #5a3a00;
    border: 2px solid #8b5b00;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: rotate(-10deg);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.prv2-hero-card {
    position: absolute;
    width: 44px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    z-index: 2;
}
.prv2-hero-card--red {
    bottom: 22px;
    left: 28px;
    background: #fff;
    color: var(--coral);
    transform: rotate(-14deg);
}
.prv2-hero-card--blue {
    bottom: 18px;
    right: 28px;
    background: #fff;
    color: #4ea7ff;
    transform: rotate(12deg);
}

.prv2-hero-title {
    margin: 0;
    font-family: inherit;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.prv2-hero-title .cream { color: var(--cream); }
.prv2-hero-title .coral { color: var(--salmon); }

.prv2-hero-sub {
    margin: 14px 0 16px;
    max-width: 38ch;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

.prv2-hero-cta,
.prv2-hero-cta:link,
.prv2-hero-cta:visited,
.prv2-hero-cta:hover,
.prv2-hero-cta:focus,
.prv2-hero-cta:active {
    color: #ffffff;
}
.prv2-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    background: linear-gradient(180deg, #ff7667 0%, #f35b52 100%);
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.prv2-hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    filter: brightness(1.05);
}
.prv2-hero-cta:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.prv2-hero-cta-icon {
    font-size: 19px;
    line-height: 1;
}

.prv2-hero-caption {
    margin: 12px 0 0;
    max-width: 40ch;
    color: var(--cream-soft);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}
.prv2-hero-caption-heart {
    display: inline-block;
    color: var(--salmon);
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

@media (max-width: 760px) {
    .prv2-hero {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
    .prv2-hero-art {
        min-height: 200px;
    }
}

/* =========================================================================
   Support board — wraps steps + middle-row + bottom-grid
   ========================================================================= */

.prv2-board {
    position: relative;
    width: 990px;
    max-width: 100%;
    margin: 0 auto 36px;
    padding: 8px;
    background: var(--board-bg);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    /* No overflow: hidden — sticker showcase deliberately overflows left. */
}

/* Shared panel chrome (steps, actions, credits, cost, voice) */
.prv2-board-panel {
    background: linear-gradient(180deg, var(--panel-grad-1) 0%, var(--panel-grad-2) 100%);
    border: 1.5px solid var(--orange-line);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 8px 20px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
   Steps grid — 4 numbered cards
   ========================================================================= */

.prv2-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 12px;
}

.prv2-step-card {
    position: relative;
    min-height: 146px;
    padding: 16px 14px 14px;
    text-align: center;
}

.prv2-step-num {
    position: absolute;
    top: 14px;
    left: 18px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff776b, #ec4f46);
    color: #fff;
    font-weight: 950;
    font-size: 19px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.prv2-step-icon {
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    font-size: 46px;
    filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.35));
}

.prv2-step-title {
    margin: 0 0 4px;
    color: var(--cream);
    font-size: 18px;
    line-height: 1.05;
    font-weight: 950;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.prv2-step-copy {
    margin: 0;
    color: #f6e7c8;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
}

/* =========================================================================
   Middle row — actions panel + mascot
   ========================================================================= */

.prv2-middle-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 14px;
    margin-bottom: 12px;
}

.prv2-actions-panel {
    position: relative;
    padding: 12px 16px 16px;
    min-height: 210px;
}

/* ============================================================================
   STICKER SHOWCASE — CLIP-PATH ESCAPE
   ----------------------------------------------------------------------------
   PROBLEM: .prv2-page has the standard "jagged left/right edges" clip-path
   (CLAUDE.md "Standard Page Design Pattern"). clip-path on a parent slices
   ALL descendants — children CANNOT visually overflow the polygon, no matter
   what overflow/position/z-index/transform they use. Removing overflow:hidden
   on inner panels does NOTHING because the clip is on the outer .prv2-page.
   This is the same trap as Fliptown's tracker on .game-single (see
   project memory: project_patron_requests + Fliptown notes).

   SOLUTION: This element is a SIBLING of .prv2-page (rendered as a child of
   .prv2-page-wrap, which has no clip-path). Because it's outside the clipped
   container, it can freely overflow into the dark area to the left of the
   page's jagged edge. Positioning is absolute against .prv2-page-wrap;
   .prv2-page-wrap and .prv2-page share the same outer geometry (the wrap
   just has no clip), so left/top values are tuned to align with the Place
   Stickers button row inside .prv2-actions-panel.

   IF YOU MOVE THIS BACK INSIDE .prv2-page IT WILL GET CUT OFF AGAIN.
   See markup comment in page-patron-requests.php for the wrapper rationale.
   ========================================================================== */
.prv2-page-wrap {
    position: relative;
    /* No clip-path here — that's deliberate. Allows children rendered as
       siblings of .prv2-page (like .prv2-sticker-showcase) to overflow the
       jagged page edge. */
}
.prv2-sticker-showcase {
    position: absolute;
    top: 660px;
    left: -175px;
    width: 240px;
    /* pointer-events MUST stay enabled — patron-stickers.js binds 3D-tilt
       and shine on .sticker-combo via pointermove/leave. The arrow + label
       opt out individually below. */
    z-index: 5;
    text-align: center;
}
/* Rotation lives on this wrapper, NOT on .sticker-combo. patron-stickers.js
   continuously rewrites .sticker-combo's transform on hover (perspective +
   rotateX/Y), so any static transform on the combo would be clobbered.
   Wrapper rotation stays put while the JS animates the inner combo. */
.prv2-showcase-rotate {
    display: inline-block;
    transform: rotate(-10deg);
    transform-origin: center;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
    /* Cap the sticker font-size: the default .sticker-combo uses
       clamp(3rem, 12vw, 7rem) which is huge for this little callout. */
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    /* Keep the sticker in its natural horizontal shape — without nowrap,
       the 240px showcase width breaks "THIS GAME SLAPS" onto two lines and
       the sticker collapses into a near-square. The wrapper is inline-block
       so it sizes to the un-wrapped sticker width and overflows the
       .prv2-sticker-showcase frame to the right (which is fine — there's
       empty dark space there). */
    white-space: nowrap;
}
.prv2-showcase-rotate .sticker-combo {
    white-space: nowrap;
    /* Override the inline font-size set by wakasm_render_single_sticker
       (clamp(1.5rem, 6vw, 3rem) = 48px at this viewport — too wide for
       the dark margin). Drop it so the natural horizontal sticker fits
       in the negative space without competing with panel content. */
    font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
}
.prv2-showcase-label {
    display: block;
    margin-top: 10px;
    color: #fff5df;
    font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    transform: rotate(-6deg);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none; /* hover should fall through to the sticker */
}
.prv2-showcase-label-sub {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.85;
    font-style: italic;
}
.prv2-showcase-arrow {
    position: absolute;
    top: 24px;
    right: -50px;
    width: 95px;
    height: 70px;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
    transform: rotate(-2deg);
    pointer-events: none; /* hover should fall through to the sticker */
}

@media (max-width: 1080px) {
    .prv2-sticker-showcase { display: none; }
}

.prv2-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--cream);
    font-size: 23px;
    line-height: 1;
    font-weight: 950;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.prv2-section-subtitle {
    margin: 4px 0 12px;
    color: #d8c6a8;
    font-size: 13px;
    font-weight: 650;
}

.prv2-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-right: 15px;
}

.prv2-catalog-link {
    margin: 14px 15px 0 0;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(216, 198, 168, 0.35);
    border-radius: 8px;
    color: #d8c6a8;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.prv2-catalog-link a {
    color: var(--wakasm-green, #4da44b);
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}
.prv2-catalog-link a:hover {
    text-decoration: underline;
    color: #6fc26d;
}

.prv2-action-button,
.prv2-action-button:link,
.prv2-action-button:visited,
.prv2-action-button:hover,
.prv2-action-button:focus,
.prv2-action-button:active {
    color: #fff;
    border: 2px solid var(--coral-deep);
}
.prv2-action-button {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
        "icon label"
        "icon tag";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    min-height: 62px;
    padding: 9px 12px;
    border: 2px solid var(--coral-deep);
    border-radius: 10px;
    background: linear-gradient(180deg, #2a2e32, #1e2225);
    font-size: 14px;
    font-weight: 900;
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 3px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.prv2-action-button-label {
    grid-area: label;
    line-height: 1.15;
}
.prv2-action-button-tag {
    grid-area: tag;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
}
.prv2-action-button:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 4px 0 rgba(0, 0, 0, 0.25);
    filter: brightness(1.08);
}
.prv2-action-button:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 1px 0 rgba(0, 0, 0, 0.25);
}

.prv2-action-button-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 31px;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.32));
}

/* Mascot zone — Pooter logo with decorative floating hearts.
   Translated down + right so it slightly overlaps the Your Voice Matters
   panel below, reading as a sticker pinned across both sections. */
.prv2-mascot-wrap {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(18px, 32px);
    z-index: 3;
}

.prv2-mascot-img {
    display: block;
    width: 100%;
    max-width: 235px;
    height: auto;
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.32));
}

.prv2-mascot-heart {
    position: absolute;
    color: var(--coral);
    line-height: 1;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
    pointer-events: none;
    animation: prv2-mascot-heart-bob 3.6s ease-in-out infinite;
}
.prv2-mascot-heart--1 { top: 8px;   left: 4px;   font-size: 28px; transform: rotate(-14deg); animation-delay: -0.4s; }
.prv2-mascot-heart--2 { top: 32px;  right: 6px;  font-size: 22px; transform: rotate( 12deg); animation-delay: -1.2s; }
.prv2-mascot-heart--3 { bottom: 14px; left: 12px; font-size: 18px; transform: rotate(  8deg); animation-delay: -2.0s; }
.prv2-mascot-heart--4 { bottom: 6px; right: 10px; font-size: 24px; transform: rotate(-10deg); animation-delay: -2.8s; }

@keyframes prv2-mascot-heart-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
    .prv2-mascot-heart { animation: none; }
}

/* =========================================================================
   Bottom grid — credits | costs | voice
   ========================================================================= */

.prv2-bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
        "costs voice"
        "costs credits";
    gap: 22px;
}
.prv2-cost-panel    { grid-area: costs; }
.prv2-voice-panel   { grid-area: voice; }
.prv2-credits-panel { grid-area: credits; }

.prv2-credits-panel,
.prv2-cost-panel,
.prv2-voice-panel {
    padding: 16px 18px;
    min-height: 235px;
    border-color: var(--coral-deep);
}

/* Cost panel fills the full row span (voice + credits stacked). Use flex
   so the bottom note + tier-costs sit at the bottom of the box, with the
   action list expanding to fill the gap. */
.prv2-cost-panel {
    display: flex;
    flex-direction: column;
}
.prv2-cost-panel .prv2-cost-list { flex: 1 1 auto; }
.prv2-cost-panel .prv2-cost-note { margin-top: auto; }

.prv2-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--cream);
    font-size: 23px;
    line-height: 1;
    font-weight: 950;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* Coin icons — gold disc with green "w".
   Canonical rules live in assets/css/utilities/coin.css as .wakasm-coin
   (with .prv2-coin alias selectors). Markup here still references prv2-coin
   classes for backward compat. */

.prv2-credit-list,
.prv2-cost-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.prv2-credit-list li,
.prv2-cost-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #f8ead0;
    font-weight: 700;
    font-size: 14px;
}
.prv2-cost-list li {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 240, 199, 0.1);
    font-size: 13px;
}
.prv2-cost-list li.prv2-cost-group {
    padding-bottom: 2px;
    margin-top: 6px;
    border-bottom: none;
    color: var(--cream-soft, #d6c8a8);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}
.prv2-cost-list li.prv2-cost-group:first-child { margin-top: 0; }

/* Hover/focus tooltip on action-cost rows. Cream bubble with coral-deep text,
   anchored above the row, driven by the desc field from wakasm_get_request_types(). */
.prv2-cost-list li[data-prv2-tip] { position: relative; cursor: help; outline: none; }
.prv2-cost-list li[data-prv2-tip]:hover,
.prv2-cost-list li[data-prv2-tip]:focus-visible { z-index: 50; }
.prv2-cost-list li[data-prv2-tip]:hover::after,
.prv2-cost-list li[data-prv2-tip]:focus-visible::after {
    content: attr(data-prv2-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 280px;
    padding: 8px 10px;
    background: var(--cream);
    color: var(--coral-deep);
    font-family: 'Changa', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 20;
    pointer-events: none;
    opacity: 1;
}
.prv2-cost-list li[data-prv2-tip]:hover::before,
.prv2-cost-list li[data-prv2-tip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 18px;
    border: 6px solid transparent;
    border-top-color: var(--cream);
    z-index: 20;
    pointer-events: none;
    opacity: 1;
}

.prv2-coin-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd564;
    font-weight: 950;
    white-space: nowrap;
}

.prv2-refresh-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 29px;
    padding: 12px 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--teal), var(--teal-deep));
    color: #eafffa;
    font-size: 12px;
    font-weight: 900;
}

.prv2-cost-note {
    margin: 10px 0 0;
    color: var(--cream-soft);
    font-size: 12px;
    font-weight: 700;
}

.prv2-tier-costs {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    color: var(--cream-soft);
    font-size: 12px;
    font-weight: 850;
}
.prv2-tier-costs-more {
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    opacity: 0.75;
}

/* Voice panel — coral gradient with mascot coin */
.prv2-voice-panel {
    position: relative;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 55%, rgba(255, 207, 61, 0.28), transparent 19%),
        linear-gradient(180deg, #ff7467 0%, #e95049 100%);
    border-color: var(--cream);
    text-align: center;
}

.prv2-voice-title {
    margin: 0 0 5px;
    color: #fff5df;
    font-size: 26px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}
.prv2-voice-copy {
    width: 75%;
    margin: 0 auto 15px;
    color: #fff7e7;
    font-size: 14px;
    line-height: 1.18;
    font-weight: 800;
}

/* Vote-tally row — three game-box + chip pairs visualize stacking upvotes.
   Tight bottom margin because the chat bubble sits directly under the row. */
.prv2-voice-tally-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    margin-bottom: 12px;
}
.prv2-voice-tally-pair {
    display: flex;
    align-items: center;
    gap: 0;
}
.prv2-voice-tally-pair .prv2-voice-tally { margin-left: -8px; }
.prv2-voice-tally-tile {
    display: block;
    width: 48px;
    height: 66px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background-color: #0e1113;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    transform: rotate(-4deg);
}
.prv2-voice-tally-pair:nth-child(2) .prv2-voice-tally-tile { transform: rotate( 3deg) scale(1.05); }
.prv2-voice-tally-pair:nth-child(3) .prv2-voice-tally-tile { transform: rotate( 6deg) scale(1.12); }
.prv2-voice-tally {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--coral-deep);
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    animation: prv2-voice-tally-bob 3.6s ease-in-out infinite;
}
.prv2-voice-tally-arrow {
    font-size: 12px;
    line-height: 1;
    transform: translateY(-1px);
}
.prv2-voice-tally-num {
    font-size: 16px;
    line-height: 1;
}
.prv2-voice-tally--a { transform: rotate(-7deg); font-size: 14px; animation-delay: -0.4s; }
.prv2-voice-tally--b { transform: rotate( 4deg) scale(1.1); animation-delay: -1.4s; }
.prv2-voice-tally--c {
    transform: rotate( 9deg) scale(1.25);
    background: #fff7d6;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22),
                0 0 0 3px rgba(255, 255, 255, 0.18);
    animation-delay: -2.4s;
}
@keyframes prv2-voice-tally-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -3px; }
}

/* Chat bubble with rotating fan quips sits between tally row + join button.
   Bubble has a downward tail; lines cycle via staggered fade keyframes. */
.prv2-voice-quip {
    position: relative;
    margin: 0 auto 22px;
    padding: 10px 14px;
    min-height: 56px;
    width: 92%;
    border-radius: 14px;
    background: var(--cream);
    color: #5a2a26;
    font-size: 13px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.prv2-voice-quip strong {
    color: var(--coral-deep);
    font-style: normal;
    font-weight: 950;
    margin-left: 4px;
}
.prv2-voice-quip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: var(--cream);
    border-bottom-width: 0;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18));
}

.prv2-voice-quip-line {
    position: absolute;
    inset: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    opacity: 0;
    animation: prv2-voice-quip-cycle 12s ease-in-out infinite;
}
.prv2-voice-quip-sprite {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prv2-voice-quip-text {
    flex: 0 1 auto;
}
.prv2-voice-quip-line--1 { animation-delay:  0s; }
.prv2-voice-quip-line--2 { animation-delay: -9s; }
.prv2-voice-quip-line--3 { animation-delay: -6s; }
.prv2-voice-quip-line--4 { animation-delay: -3s; }

@keyframes prv2-voice-quip-cycle {
    0%        { opacity: 0; transform: translateY(6px); }
    3%, 22%   { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .prv2-voice-tally { animation: none; }
    .prv2-voice-quip-line { animation: none; }
    .prv2-voice-quip-line--1 { opacity: 1; }
}

.prv2-voice-join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    background: rgba(255, 143, 123, 0.95);
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 4px 0 rgba(0, 0, 0, 0.16);
}
.prv2-voice-join,
.prv2-voice-join:link,
.prv2-voice-join:visited,
.prv2-voice-join:hover,
.prv2-voice-join:focus,
.prv2-voice-join:active {
    color: #fff;
}
.prv2-voice-join {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.prv2-voice-join:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 5px 0 rgba(0, 0, 0, 0.16);
    filter: brightness(1.05);
}
.prv2-voice-join:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 1px 0 rgba(0, 0, 0, 0.16);
}

.prv2-voice-note {
    margin: 10px 0 0;
    color: #ffe7dd;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

/* =========================================================================
   Recent Community Actions — section title + single panel of compact rows
   (Matches reference: orange-bordered panel, sprite + text + small banner
    on right, salmon "wants this too!" pill, faint divider between rows.)
   ========================================================================= */

.prv2-feed-section {
    margin: 24px auto 28px;
    width: 990px;
    max-width: 100%;
}

.prv2-feed-heading {
    margin: 0 0 6px;
    text-align: center;
    color: var(--cream);
    font-size: 23px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.prv2-feed-subhead {
    margin: 0 auto 14px;
    max-width: 640px;
    text-align: center;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.45;
}

/* Card grid: 3 across desktop, 2 across tablet, 1 across mobile (handled below). */
.prv2-feed-panel {
    padding: 18px;
    border-color: var(--coral-deep);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.prv2-feed-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--cream-soft, #d8c8a4);
    font-style: italic;
    opacity: 0.85;
}

/* Card visuals (.prv2-card-*) replaced by .wakasm-rcard-* in
   components/request-card.css — see commits 6d2a896..86f64ee. */

/* =========================================================================
   Thanks strip — page-level horizontal block with heart / text / coin
   ========================================================================= */

.prv2-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 990px;
    max-width: 100%;
    margin: 18px auto 24px;
    padding: 14px 28px;
    text-align: center;
}

.prv2-thanks-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

/* The sticker wall — flex-wraps so adding more stickers grows the area
   downward naturally without breaking layout. */
.prv2-thanks-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px 28px;
    width: 100%;
    min-height: 60px;
    padding: 8px 0 4px;
}

/* =========================================================================
   .wakasm-sticker-callout — REUSABLE STICKER + HAND-DRAWN CALLOUT COMPONENT
   -------------------------------------------------------------------------
   Hand-drawn SVG arrow + Caveat-font caption that point at a sticker.

   TWO MOUNT MODES — pick based on whether you're inside a clip-path:

   1. INLINE — sticker, arrow, label all live in one wrapper. Use when
      there is NO clip-path between this element and the viewport.

       <span class="wakasm-sticker-callout">
           <span class="wakasm-sticker-callout__sticker">[sticker]</span>
           <svg class="wakasm-sticker-callout__arrow">[arrow path]</svg>
           <span class="wakasm-sticker-callout__label">Caption</span>
       </span>

   2. OVERLAY — sticker stays where it is in the DOM (e.g. inside a
      clipped page); arrow + label render in a SEPARATE element placed
      as a sibling of the clipped element, inside an unclipped ancestor
      (e.g. .prv2-page-wrap). Per-instance --modifier class positions
      the overlay so the arrowhead lands on the actual sticker.

       <span class="wakasm-sticker-callout__sticker">[sticker]</span>
       ...
       <div class="wakasm-sticker-callout-overlay
                   wakasm-sticker-callout-overlay--rankon">
           <svg class="wakasm-sticker-callout__arrow">[arrow path]</svg>
           <span class="wakasm-sticker-callout__label">Caption</span>
       </div>

   🔴 CLIP-PATH ESCAPE WARNING — READ BEFORE USING:
   This component does NOT escape clip-path. If the parent (or ANY ancestor)
   has clip-path, the arrow + label WILL be cropped at the polygon boundary.
   Wakasm's "Standard Page Design Pattern" pages (.prv2-page, .game-single)
   all wrap content in a clipped container with jagged left/right edges.
   You MUST render this callout as a SIBLING of the clipped container,
   inside an unclipped wrapper (e.g. .prv2-page-wrap). See:
     - .prv2-sticker-showcase (top of patron-requests page) — escape example
     - .prv2-thanks (this file) — also pulled out of .prv2-page for this reason
     - feedback memory: clip_path_escape_pattern.md
     - ARCHITECTURE/CLIP-PATH-ESCAPE-PATTERN.md
   ========================================================================= */
.wakasm-sticker-callout {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.wakasm-sticker-callout__sticker {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.wakasm-sticker-callout__arrow {
    position: absolute;
    width: 130px;
    height: 80px;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
    pointer-events: none; /* hover should fall through to the sticker */
}

.wakasm-sticker-callout__label {
    position: absolute;
    width: max-content;
    max-width: 260px;
    color: #fff5df;
    font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.wakasm-sticker-callout__label em {
    display: block;
    margin-top: 4px;
    font-style: italic;
    color: var(--coral, #ef8b6d);
    font-weight: 800;
    font-size: 18px;
}

/* --- OVERLAY mode container ---
   Anchors absolutely against the nearest positioned ancestor — use an
   unclipped wrapper like .prv2-page-wrap. Per-instance modifier classes
   tune top/right/bottom/left coords so the arrowhead lands on the actual
   sticker that lives elsewhere in the DOM. */
.wakasm-sticker-callout-overlay {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

/* --- Instance: rank-on sticker in the .prv2-thanks strip ---
   The rank-on sticker sits in .prv2-thanks-row inside .prv2-page (clipped).
   This overlay is a sibling of .prv2-page (so it escapes the clip) and is
   anchored to bottom-of-page-wrap so it follows the thanks strip whatever
   the feed length above happens to be. The arrow's SVG viewBox places its
   head at (10,10) — the top-left corner of the SVG — so positioning the
   overlay's top-left near the sticker's right edge lands the arrowhead on
   the sticker. Tune in tandem with .prv2-thanks layout shifts. */
.wakasm-sticker-callout-overlay--rankon {
    bottom: 110px;
    left: 50%;
    margin-left: 100px; /* offset right of page center to clear the row */
    width: 320px;
    height: 100px;
}
.wakasm-sticker-callout-overlay--rankon .wakasm-sticker-callout__arrow {
    top: 0;
    left: 0;
    transform: rotate(8deg);
}
.wakasm-sticker-callout-overlay--rankon .wakasm-sticker-callout__label {
    top: 60px;
    left: 90px;
    transform: rotate(-4deg);
}

@media (max-width: 850px) {
    /* On narrow screens the overlay points off-screen because the page
       collapses to a centered single column. Hide it; the Add Sticker
       marker button below carries the affordance on its own. */
    .wakasm-sticker-callout-overlay {
        display: none;
    }
}


.prv2-thanks-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.prv2-thanks-icon--heart {
    width: 58px;
    height: 58px;
    color: var(--coral);
    font-size: 56px;
    line-height: 1;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
    transform: rotate(-8deg);
}

.prv2-thanks-text {
    margin: 0;
    color: var(--cream);
    font-size: 22px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* Instance-specific tweaks for the rank-on sticker living inside a
   .wakasm-sticker-callout__sticker slot — rotation, sticker font-size cap,
   and tooltip suppression. The base callout component stays generic. */
.prv2-thanks-rankon {
    display: inline-flex;
    align-items: center;
    transform: rotate(6deg);
    transform-origin: center;
    line-height: 1;
}
/* Override the renderer's inline clamp(1.5rem, 6vw, 3rem) — the thanks strip
   has a tight footprint, so cap the sticker around the badge size it replaces. */
.prv2-thanks-rankon .sticker-combo {
    font-size: 2.75rem !important;
    cursor: default;
}
.prv2-thanks-rankon .patron-tooltip { display: none !important; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 850px) {
    .prv2-board {
        width: 520px;
    }
    .prv2-steps-grid {
        grid-template-columns: 1fr 1fr;
    }
    .prv2-bottom-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "voice voice"
            "costs credits";
    }
    .prv2-middle-row {
        grid-template-columns: 1fr;
    }
    .prv2-mascot-wrap {
        min-height: 120px;
    }
    .prv2-mascot {
        right: 8px;
        bottom: -86px;
        transform: scale(0.72);
        transform-origin: bottom right;
    }
    .prv2-action-buttons {
        grid-template-columns: 1fr 1fr;
        padding-right: 0;
    }
    .prv2-feed-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 14px;
    }
}

@media (max-width: 560px) {
    .prv2-steps-grid,
    .prv2-action-buttons {
        grid-template-columns: 1fr;
    }
    .prv2-bottom-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "voice"
            "costs"
            "credits";
    }
    .prv2-step-card {
        min-height: 130px;
    }
    .prv2-voice-copy {
        width: 100%;
    }
    .prv2-feed-panel {
        grid-template-columns: 1fr;
    }
}