/* Game of Skill | V23 design system. Edit tokens and components first. */
@layer tokens, reset, foundation, layout, components, scenes, responsive, motion;
@layer tokens {
    :root {
        --lime:#D0FF00;
        --cyan:#33FBFF;
        --cyan-deep:#003233;
        --pink:#FF0055;
        --bg:#020b0a;
        --white:#fff;
        --muted:rgba(255,255,255,.76);
        --panel-bg:rgba(42,51,0,.8);
        --panel-strong:#003233;
        --panel-border:10px solid var(--lime);
        --panel-glow:0 -10px 14px -12px rgba(208,255,0,.8);
        --max:1220px;
        --panel-gap:clamp(150px,18vh,210px);
        --section-padding:clamp(20px,5vw,72px);
        --panel-padding:clamp(24px,3.2vw,46px);
        --cut:12px;
        --focus:3px solid #fff;
    }
}
@layer reset {
    *,*::before,*::after {
        box-sizing:border-box
    }
    html {
        scroll-behavior:smooth;
        scroll-padding-top:calc(86px + env(safe-area-inset-top,0px));
        background:var(--bg)
    }
    body {
        margin:0;
        overflow-x:hidden;
        background:var(--bg);
        color:var(--white);
        font-family:Montserrat,'Avenir Next','Segoe UI',Arial,sans-serif
    }
    a {
        color:inherit;
        text-decoration:none
    }
    button,input {
        font:inherit
    }
    img,video {
        max-width:100%
    }
}
@layer foundation {
    .heading,.display {
        margin:0;
        font-weight:300;
        letter-spacing:.065em;
        line-height:.98;
        text-transform:uppercase;
        font-size:clamp(50px,6.6vw,105px)
    }
    .heading--medium,.display.medium {
        font-size:clamp(40px,5.2vw,78px)
    }
    .heading--small,.display.small {
        font-size:clamp(34px,4.2vw,62px)
    }
    .body-copy,.lead {
        font-size:clamp(18px,1.5vw,22px);
        line-height:1.68;
        color:var(--white)
    }
    .lime {
        color:var(--lime)
    }
    .center {
        text-align:center
    }
    .center .lead {
        margin-inline:auto
    }
    a:not(.btn):not(.scroll-cue):hover {
        color:var(--cyan)
    }
    a:not(.btn):not(.scroll-cue):focus-visible {
        color:var(--cyan);
        text-decoration:underline;
        text-underline-offset:5px
    }
    :where(a,button,input):focus-visible {
        outline:var(--focus);
        outline-offset:5px
    }
}
@layer layout {
    main {
        position:relative;
        z-index:2
    }
    .section {
        position:relative;
        z-index:5;
        min-height:105svh;
        display:flex;
        align-items:center;
        padding:clamp(78px,9vh,116px) var(--section-padding);
        scroll-margin-top:86px
    }
    .section.short {
        min-height:76svh
    }
    .inner {
        width:min(var(--max),100%);
        margin:auto;
        position:relative
    }
    .hero .inner {
        width:min(1340px,100%)
    }
    .section.hero {
        min-height:0;
        padding-top:86px;
        padding-bottom:68px
    }
    main .section:not(.hero) {
        min-height:0;
        padding-top:calc(var(--panel-gap)/2);
        padding-bottom:calc(var(--panel-gap)/2)
    }
    main #community {
        padding-bottom:clamp(230px,24vw,340px)
    }
    .cta-row {
        display:flex;
        gap:13px;
        flex-wrap:wrap;
        margin-top:30px
    }
}
@layer components {
    /* Panels: use .panel, .sub-panel, .sub-panel--standout. */
.panel,.content-frame {
        position:relative;
        background:var(--panel-bg);
        border:0;
        border-top:var(--panel-border);
        box-shadow:var(--panel-glow);
        padding:var(--panel-padding)
    }
    .panel::before,.content-frame::before {
        content:"";
        position:absolute;
        top:-10px;
        left:0;
        right:0;
        height:22px;
        pointer-events:none;
        background:linear-gradient(to bottom,rgba(208,255,0,.16),transparent)
    }
    .sub-panel {
        background:rgba(3,19,16,.94);
        border:1px solid rgba(255,255,255,.13)
    }
    .sub-panel--standout {
        background:var(--panel-strong);
        border:2px solid var(--cyan)
    }
    
    
    
    
    
    
    /* clip-path clips outlines: focus ring is drawn via an unclipped parent where available, and a visible inset here. */

    .btn--secondary:focus-visible,.btn.secondary:focus-visible {
        color:#fff;
        background:#fff
    }
    .media-frame {
        position:relative;
        aspect-ratio:16/9;
        overflow:hidden;
        background:rgba(0,0,0,.28);
        border:1px solid rgba(221,255,0,.34)
    }
    .media-frame:has(.gameplay-loop) {
        background:#030b0a
    }
    .gameplay-loop {
        width:100%;
        height:100%;
        object-fit:cover;
        display:block
    }
    
    
    
    @keyframes cue-bob {
        0%,100% {
            translate:0 0
        }
        50% {
            translate:0 5px
        }
    }
    .site-nav {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:1000;
        display:flex;
        align-items:center;
        min-height:72px;
        height:calc(72px + env(safe-area-inset-top,0px));
        padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));
        background:rgba(0,50,51,.8);
        border-bottom:2px solid var(--cyan)
    }
    .nav-inner {
        width:100%;
        max-width:1420px;
        margin:auto;
        min-height:72px;
        display:flex;
        align-items:center;
        gap:clamp(10px,1.5vw,24px)
    }
    .site-nav .studio-home {
        flex-shrink:0;
        font-size:11px;
        letter-spacing:.09em;
        color:var(--cyan);
        white-space:nowrap
    }
    .nav-game-name {
        font-size:clamp(12px,1.3vw,16px);
        font-weight:600;
        letter-spacing:.11em;
        white-space:nowrap;
        margin-right:auto;
        color:#fff
    }
    .nav-links {
        display:flex;
        align-items:center;
        margin-left:auto;
        gap:clamp(10px,1.4vw,22px);
        font-size:11px;
        letter-spacing:.11em;
        text-transform:uppercase;
        color:var(--cyan)
    }
    .mobile-menu-toggle {
        display: none;
    }
    .nav-cta {
        min-height:39px;
        padding:0 20px;
        margin-left:0;
        font-size:11px
    }
    footer {
        position:relative;
        z-index:8;
        padding:54px clamp(24px,6vw,88px);
        border-top:1px solid rgba(255,255,255,.13);
        background:rgba(2,9,8,.94)
    }
    .footer-inner {
        width:min(var(--max),100%);
        margin:auto;
        display:flex;
        align-items:center;
        gap:25px
    }
    .fig-mark {
        width:52px
    }
    .footer-copy {
        color:rgba(255,255,255,.5);
        font-size:13px;
        line-height:1.7
    }
    .footer-title {
        color:#fff
    }
    .footer-links {
        margin-left:auto;
        display:flex;
        gap:22px;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.09em
    }
}
/* Interactive effects: outer filter follows the clipped hexagonal silhouette. */
@layer components {
    
    
    
    /* Text underline is reserved for links, not the hexagonal buttons. */
    a:not(.btn):not(.nav-cta):not(.scroll-cue):hover,
    a:not(.btn):not(.nav-cta):not(.scroll-cue):focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        text-decoration-color: currentColor;
    }
    
    
}
@layer scenes {
    #ambient {
        position:fixed;
        inset:0;
        z-index:0;
        pointer-events:none;
        overflow:hidden;
        background:#020b0a
    }
    #ambient video {
        display:block;
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        pointer-events:none
    }
    .game-world {
        position:absolute;
        inset:0;
        z-index:1;
        pointer-events:none;
        overflow:hidden
    }
    .trail-svg {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        overflow:visible
    }
    .trail-line {
        fill:var(--pink);
        stroke:none;
        stroke-linecap:round;
        stroke-linejoin:round
    }
    .ball {
        position:absolute;
        z-index:3;
        width:clamp(37.5px,3.75vw,57px);
        aspect-ratio:1;
        border-radius:50%;
        background:#fff;
        translate:-50% -50%;
        box-shadow:0 0 0 2px rgba(255,0,85,.9),0 0 25px rgba(255,0,85,.72)
    }
    .world-piece {
        position:absolute;
        z-index:1;
        pointer-events:none;
        opacity:1;
        scale:.75;
        transition:none
    }
    .portal {
        width:clamp(145px,17vw,270px);
        filter:drop-shadow(0 0 13px rgba(221,255,0,.35))
    }
    .platform-piece {
        width:clamp(330px,38vw,600px)
    }
    #gate {
        height:clamp(210px,28vw,420px);
        filter:none
    }
    #spike {
        width:clamp(170px,20vw,315px);
        scale:1;
        filter:drop-shadow(0 0 14px rgba(255,45,45,.5))
    }
    .faulty-piece {
        filter:drop-shadow(0 0 13px rgba(255,255,255,.55))
    }
    .repaired-piece {
        filter:drop-shadow(0 0 13px rgba(221,255,0,.35))
    }
    #spring {
        width:clamp(235px,29vw,440px)
    }
    .cup-piece {
        width:349px;
        max-width:85vw;
        z-index:5;
        scale:1;
        transform-origin:center center
    }
    .hidden,.ball.is-teleporting,.ball.is-offstage {
        opacity:0
    }
    .activated {
        filter:brightness(1.5) sepia(.3) saturate(2) hue-rotate(25deg)
    }
    .logo-hero {
        display:block;
        width:min(550px,67vw);
        margin:clamp(26px,5vh,52px) auto clamp(28px,5vh,52px)
    }
    .hero-stack {
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:clamp(14px,2vh,22px)
    }
    .hero-stack .display {
        font-size:clamp(29px,3.65vw,54px);
        line-height:1.23;
        letter-spacing:.035em;
        max-width:1100px
    }
    .hero-headline-first {
        white-space:nowrap
    }
    .hero-stack .hero-media {
        width:min(100%,760px)
    }
    .hero-stack .lead {
        font-size:clamp(16px,1.3vw,19px);
        line-height:1.5;
        margin:0 auto
    }
    .hero-stack .cta-row,.hero-stack .release-line {
        margin-top:0
    }
    .hero-stack .cta-row {
        justify-content:center
    }
    .release-line {
        color:#fff;
        font-size:13px
    }
    .platform-card.next-fest-callout {
        width:min(100%,620px);
        height:auto;
        min-height:0;
        margin:0 auto;
        text-align:center;
        text-decoration:none;
        cursor:pointer;
        transition:background-color .18s ease,border-color .18s ease,filter .18s ease,translate .18s ease
    }
    .platform-card.next-fest-callout:hover {
        background:rgba(0,50,51,.8);
        border-color:#8dffff;
        translate:0 -3px;
        filter:drop-shadow(0 0 9px rgba(51,251,255,.45))
    }
    .platform-card.next-fest-callout:active {
        translate:none;
        filter:brightness(.88)
    }
    .platform-card.next-fest-callout:focus-visible {
        background:rgba(0,50,51,.8);
        border-color:#8dffff;
        translate:0 -3px;
        filter:drop-shadow(0 0 9px rgba(51,251,255,.45));
        outline:3px solid #fff;
        outline-offset:4px
    }
    .next-fest-kicker {
        color:var(--cyan);
        font-size:12px;
        font-weight:800;
        letter-spacing:.16em
    }
    .next-fest-title {
        margin-top:5px;
        color:var(--lime);
        font-size:clamp(20px,2.1vw,30px);
        font-weight:900;
        line-height:1.1;
        letter-spacing:.025em
    }
    .next-fest-copy {
        margin-top:7px;
        color:#fff;
        font-size:14px;
        font-weight:600
    }
    .hero-media iframe {
        display:block;
        width:100%;
        height:100%;
        border:0
    }
    .hero-media .trailer-launch {
        position:absolute;
        inset:0;
        display:block;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        background:#001718;
        cursor:pointer
    }
    .hero-media .trailer-launch img {
        display:block;
        width:100%;
        height:100%;
        object-fit:cover
    }
    .hero-media .trailer-play {
        position:absolute;
        top:50%;
        left:50%;
        display:grid;
        place-items:center;
        width:76px;
        height:54px;
        border-radius:13px;
        background:rgba(0,50,51,.95);
        border:2px solid var(--cyan);
        color:var(--cyan);
        font-size:26px;
        transform:translate(-50%,-50%);
        transition:background .18s,color .18s
    }
    .hero-media .trailer-launch:hover .trailer-play,.hero-media .trailer-launch:focus-visible .trailer-play {
        background:var(--cyan);
        color:var(--cyan-deep)
    }
    .gameplay-story {
        display:flex;
        flex-direction:column;
        gap:clamp(48px,7vw,95px)
    }
    .gameplay-heading {
        margin:0 auto;
        width:100%
    }
    .story-beat {
        width:min(70%,720px)
    }
    .story-left {
        align-self:flex-start;
        text-align:left
    }
    .story-right {
        align-self:flex-end;
        text-align:right
    }
    .story-beat .lead {
        font-size:clamp(22px,2.1vw,32px);
        line-height:1.4;
        color:#fff
    }
    .story-beat .media-frame {
        margin-top:25px
    }
    .story-finale {
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:26px
    }
    .story-finale .lead {
        margin:0
    }
    .story-finale .finale-media {
        width:min(100%,900px)
    }
    .story-finale h3 {
        margin:0
    }
    .mechanics-grid {
        display:flex;
        flex-direction:column;
        gap:20px;
        margin-top:38px
    }
    .mechanic {
        position:relative;
        display:block;
        min-height:0;
        padding:0;
        overflow:visible;
        isolation:isolate;
        margin-top:24px;
        background:transparent;
        border:0;
        box-shadow:none
    }
    .mechanic .mechanic-image {
        display:block;
        width:100%;
        height:auto;
        margin:0;
        border:0
    }
    .mechanic .mechanic-caption {
        position:relative;
        z-index:2;
        display:flex;
        align-items:baseline;
        flex-wrap:nowrap;
        gap:18px;
        width:fit-content;
        max-width:100%;
        margin:0 auto -40px -25px;
        padding:11px 32px;
        background:var(--lime);
        color:var(--cyan-deep);
        clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%)
    }
    .mechanic .mechanic-caption h3,.mechanic .mechanic-caption p {
        color:var(--cyan-deep);
        margin:0
    }
    .mechanic .mechanic-caption h3 {
        flex:0 0 auto;
        font-size:clamp(18px,2vw,25px);
        font-weight:300;
        letter-spacing:.09em;
        text-transform:uppercase
    }
    .mechanic .mechanic-caption p {
        flex:0 1 auto;
        font-size:clamp(12px,1.3vw,16px);
        line-height:1.65;
        white-space:nowrap
    }
    .mechanics-more {
        margin:40px auto 12px;
        font-size:clamp(24px,3vw,38px);
        font-weight:500;
        line-height:1.3;
        text-align:center;
        color:#fff
    }
    .levels-image {
        display:block;
        width:100%;
        height:auto;
        margin-top:28px
    }
    .boss-callout {
        margin-top:55px;
        display:grid;
        grid-template-columns:.8fr 1.2fr;
        gap:45px;
        align-items:center;
        border-top:2px solid var(--lime);
        padding-top:clamp(40px,6vw,75px)
    }
    .music-names {
        display:flex;
        justify-content:center;
        gap:clamp(12px,2vw,32px);
        flex-wrap:nowrap;
        align-items:center;
        margin:50px 0 20px
    }
    .music-names span {
        color:#fff;
        font-size:clamp(15px,2.2vw,31px);
        font-weight:300;
        letter-spacing:.025em;
        white-space:nowrap
    }
    .customization-strip {
        display:grid;
        grid-template-columns:1fr 1.4fr;
        gap:50px;
        align-items:center
    }
    .rewards-video {
        width:100%;
        height:auto;
        display:block;
        margin-top:22px
    }
    .platforms {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:16px;
        margin-top:48px
    }
    .platform-card {
        padding:32px 26px;
        min-height:260px;
        display:flex;
        flex-direction:column
    }
    .platform-card h3,.community-box h3 {
        color:#fff;
        font-weight:300;
        letter-spacing:.07em;
        margin:0 0 12px
    }
    .platform-card h3 {
        font-size:30px
    }
    .platform-card .date {
        display:flex;
        flex-grow:1;
        flex-direction:column;
        justify-content:center;
        color:#fff;
        margin-bottom:auto
    }
    .platform-coming {
        display:block;
        padding:12px 0;
        color:#fff;
        font-size:13px;
        letter-spacing:.09em;
        text-transform:uppercase
    }
    .platform-card .btn {
        margin-bottom:24px
    }
    .platform-card .btn.last {
        margin-bottom:0
    }
    .community-box {
        max-width:900px;
        margin:44px auto 0;
        padding:42px;
        text-align:left
    }
    .community-box h3 {
        font-size:clamp(22px,3vw,36px);
        font-weight:400
    }
    .community-box p {
        color:#fff;
        line-height:1.65
    }
    .socials {
        display:flex;
        gap:18px;
        flex-wrap:wrap;
        margin-top:26px;
        font-size:12px;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:var(--cyan)
    }
    .signup {
        display:flex;
        max-width:680px;
        margin:38px auto 0
    }
    .signup input {
        flex:1;
        min-width:0;
        background:var(--cyan-deep);
        border:2px solid var(--cyan);
        border-right:0;
        color:#fff;
        padding:16px 18px
    }
    .signup button {
        border:0;
        background:var(--cyan);
        color:var(--cyan-deep);
        padding:0 24px;
        font-size:12px;
        font-weight:700;
        letter-spacing:.1em;
        text-transform:uppercase;
        cursor:pointer;
        transition:background .18s
    }
    .signup button:hover {
        background:#8dffff
    }
}
@layer responsive {
    @media(max-width:1050px) {
        .boss-callout,.customization-strip {
            grid-template-columns:1fr
        }
        .hero-headline-first {
            white-space:normal
        }
    }
    @media(max-width:760px) {
        :root {
            --panel-gap:clamp(100px,13vh,150px);
            --panel-padding:24px 18px
        }
        .site-nav {
            padding-left:max(12px,env(safe-area-inset-left,0px));
            padding-right:max(12px,env(safe-area-inset-right,0px))
        }
        .mobile-menu-toggle {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 44px;
            height: 44px;
            margin-left: auto;
            padding: 10px;
            border: 2px solid var(--cyan);
            background: var(--cyan-deep);
            cursor: pointer;
        }
        .mobile-menu-toggle span {
            display: block;
            height: 2px;
            background: var(--cyan);
        }
        .mobile-menu-toggle:focus-visible {
            outline: var(--focus);
            outline-offset: 3px;
        }
        .nav-inner {
            position: relative;
        }
        .nav-links {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 12px;
            background: #003233;
            border: 2px solid var(--cyan);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
        }
        .nav-links.is-open {
            display: flex;
        }
        .nav-links a:not(.nav-cta) {
            display: block;
            padding: 14px 12px;
            font-size: 13px;
        }
        .nav-links .nav-cta {
            margin-top: 8px;
        }
        .nav-inner {
            gap:8px
        }
        .site-nav .studio-home {
            display:block;
            font-size:9px;
            letter-spacing:.045em;
        }
        .nav-game-name {
            margin-right: 0;
            font-size:11px;
            letter-spacing:.035em
        }
        .nav-cta {
            font-size:10px;
            min-height:37px;
            padding:0 15px
        }
        .section {
            min-height:auto;
            padding:110px 20px
        }
        .section.hero {
            padding-top:84px
        }
        .logo-hero {
            width:min(440px,83vw);
            margin-bottom:12px
        }
        .hero-stack {
            gap:18px
        }
        .hero-stack .display {
            font-size:clamp(27px,6.8vw,43px)
        }
        .hero-stack .hero-media {
            width:100%
        }
        .hero-stack .cta-row .btn {
            flex:1 1 200px
        }
        .heading,.display {
            font-size:clamp(42px,13vw,66px)
        }
        .section:not(.hero) > .inner > .panel > .heading--medium,
        .section:not(.hero) > .inner > .content-frame > .heading--medium,
        .gameplay-heading {
            font-size: clamp(23px, 6vw, 32px);
        }
        .heading--medium,.display.medium {
            font-size: clamp(23px, 6vw, 32px);
        }
        .story-beat {
            width:100%
        }
        .story-right {
            text-align:left;
            align-self:flex-start
        }
        .gameplay-story {
            gap:65px
        }
        .mechanic .mechanic-caption {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 12px 24px;
            text-align: center;
        }
        .mechanic .mechanic-caption h3,
        .mechanic .mechanic-caption p {
            flex: none;
            width: 100%;
            margin: 0;
        }
        .mechanic .mechanic-caption p {
            white-space:normal
        }
        .platforms {
            grid-template-columns:1fr
        }
        .music-names {
            flex-wrap:wrap;
            gap:12px 22px
        }
        .music-names span {
            font-size:clamp(17px,4vw,24px)
        }
        .signup {
            flex-direction:column
        }
        .signup input {
            border-right:2px solid var(--cyan)
        }
        .signup button {
            min-height:52px
        }
        .world-piece {
            opacity:.9
        }
        .portal {
            width:140px
        }
        .platform-piece {
            width:210px
        }
        #spring {
            width:245px
        }
        #spike {
            width:170px
        }
        .ball {
            width:52px
        }
        main #community {
            padding-bottom: clamp(460px, 48vw, 680px);
        }
        .footer-inner {
            align-items:flex-start;
            flex-wrap:wrap
        }
        .footer-links {
            width:100%;
            margin:10px 0 0
        }
    }
    @media(orientation:portrait) {
        #ambient {
            background-image:url('../assets/background/floating-shapes-portrait.jpg');
            background-position:center;
            background-size:cover
        }
        #ambient video {
            display:none
        }
    }
    @media(prefers-reduced-transparency:reduce) {
        .panel,.content-frame {
            background:rgba(42,51,0,.97)
        }
    }
}
@layer motion {
    @media(prefers-reduced-motion:reduce) {
        html {
            scroll-behavior:auto
        }
        #ambient {
            background-image:url('../assets/background/floating-shapes-portrait.jpg');
            background-position:center;
            background-size:cover
        }
        #ambient video,.game-world {
            display:none
        }
        *,*::before,*::after {
            animation:none!important;
            transition:none!important
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .nav-cta { transition: none; }
    .btn:hover, .nav-cta:hover { translate: none; }
}

/* V25: Beehiiv owns its embedded form and confirmation states. */
.signup--beehiiv {
  display: block;
  width: min(100%, 680px);
  max-width: 100%;
  margin-inline: auto;
}
.signup--beehiiv iframe {
  display: block;
  max-width: 100%;
}

/* V27: mobile artwork follows the same 75% base scale as other scenery.
   Keep layout/route coordinates unchanged; ball radius is read from its rendered width. */
@layer responsive {
    @media (max-width: 760px) {
        #spike, .cup-piece {
            scale: .75;
        }
        .ball {
            width: 39px;
        }
    }
}

/* V28: simplify the mobile hero and restore cup alignment after scaling. */
@layer responsive {
    @media (max-width: 760px) {
        .scroll-cue { display: none; }
        main #community { padding-bottom: clamp(315px, 37vw, 460px); }
    }
}

@layer layout {
    .feedback-page {
        position:relative;
        z-index:2;
        min-height:100vh;
        padding:clamp(118px,14vh,150px) var(--section-padding) clamp(70px,9vw,110px);
    }
    .feedback-shell {
        width:min(900px,100%);
        margin:0 auto;
    }
    .feedback-intro {
        max-width:760px;
        margin:0 auto clamp(30px,5vw,48px);
        text-align:center;
    }
    .feedback-nav {
        display:flex;
        align-items:center;
        margin-left:auto;
    }
    .feedback-form-frame iframe {
        display:block;
        width:100%;
        height:1030px;
        border:0;
        border-top:var(--panel-border);
        background:var(--panel-bg);
        box-shadow:var(--panel-glow);
    }
}
@layer responsive {
    @media(max-width:850px) {
        .feedback-page {
            padding-top:112px;
        }
        .feedback-form-frame iframe {
            height:1120px;
        }
    }
}