:root {
            /* ===== Palet Key Visual Business Matching 2026 =====
               Krem gading, gradasi biru (navy -> teal), emas metalik. Tanpa merah. */
            --paper: #F7EFE3;
            --paper-2: #F1E1CB;
            --surface: #FFFCF6;
            --ink: #12314F;
            --ink-2: #5C6B7B;
            --line: #E6D6B8;
            --navy: #123049;
            --navy-2: #175466;
            --teal: #10616E;
            --on-navy: #FBF3E4;
            --gold-1: #F5E2AC;
            --gold: #D9A441;
            --gold-2: #B8831F;
            --sky: #C9983F;
            --sky-soft: #F6E8C9;
            --red: #B8831F;
            --on-red: #12283E;
            --err: #B5590F;
            --sun: #EFC776;
            --blue-grad: linear-gradient(155deg, #0E2742 0%, #143E5B 48%, #11616F 100%);
            --gold-grad: linear-gradient(135deg, #F2D89A 0%, #D9A441 48%, #B8831F 100%);
            --gold-line: linear-gradient(90deg, transparent, #D9A441 20%, #F2D89A 50%, #D9A441 80%, transparent);
            --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
            --body: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            box-sizing: border-box;
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        @media (prefers-color-scheme:dark) {
            :root:not([data-theme="light"]) {
                --paper: #0B1C2B;
                --paper-2: #0E2435;
                --surface: #122B3C;
                --ink: #F3EADB;
                --ink-2: #AFC0C7;
                --line: #24414F;
                --navy: #0E2742;
                --navy-2: #11616F;
                --on-navy: #FBF3E4;
                --sky: #E0B869;
                --sky-soft: #15323F;
                --red: #E0B869;
                --on-red: #0B1C2B;
                --err: #E08A3C;
                --sun: #EFC776;
            }
        }

        :root[data-theme="dark"] {
            --paper: #0B1C2B;
            --paper-2: #0E2435;
            --surface: #122B3C;
            --ink: #F3EADB;
            --ink-2: #AFC0C7;
            --line: #24414F;
            --navy: #0E2742;
            --navy-2: #11616F;
            --on-navy: #FBF3E4;
            --sky: #E0B869;
            --sky-soft: #15323F;
            --red: #E0B869;
            --on-red: #0B1C2B;
            --err: #E08A3C;
            --sun: #EFC776;
        }

        *,
        *::before,
        *::after {
            box-sizing: inherit
        }

        html {
            height: auto;
            scroll-behavior: smooth;
            scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px)
        }

        @media (prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important
            }
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--body);
            font-size: 17px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased
        }

        img,
        svg {
            max-width: 100%;
            display: block
        }

        a {
            color: inherit
        }

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

        .wrap {
            width: min(1200px, 100% - 40px);
            margin-inline: auto
        }

        h1,
        h2,
        h3 {
            font-family: var(--display);
            margin: 0;
            letter-spacing: -.01em
        }

        h2 {
            font-size: clamp(36px, 5.2vw, 62px);
            font-weight: 850;
            font-stretch: 78%;
            line-height: .98
        }

        h3 {
            font-size: 21px;
            font-weight: 800;
            font-stretch: 90%;
            line-height: 1.18
        }

        p {
            margin: 0
        }

        .lede {
            font-size: clamp(17px, 1.5vw, 19.5px);
            color: var(--ink-2);
            max-width: 58ch
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 52px;
            padding: 0 26px;
            border-radius: 999px;
            font: 700 16px/1 var(--body);
            text-decoration: none;
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform .15s ease, background-color .15s ease, color .15s ease
        }

        .btn:active {
            transform: scale(.98)
        }

        .btn svg {
            width: 18px;
            height: 18px;
            flex: none
        }

        .btn-red {
            background: var(--red);
            color: var(--on-red)
        }

        .btn-red:hover {
            filter: brightness(1.08)
        }

        .btn-line {
            color: var(--ink);
            border-color: var(--ink);
            background: transparent
        }

        .btn-line:hover {
            background: var(--ink);
            color: var(--paper)
        }

        .btn-ghost {
            color: var(--on-navy);
            border-color: color-mix(in srgb, var(--on-navy) 45%, transparent)
        }

        .btn-ghost:hover {
            background: var(--on-navy);
            color: var(--navy)
        }

        /* header */
        .top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 30;
            padding-top: env(safe-area-inset-top, 0px);
            transition: background-color .2s, border-color .2s;
            border-bottom: 1px solid transparent;
            color: var(--on-navy)
        }

        .top.solid {
            background: color-mix(in srgb, var(--paper) 90%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-color: var(--line);
            color: var(--ink)
        }

        .top .wrap {
            display: flex;
            align-items: center;
            gap: 28px;
            height: 68px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            margin-right: auto
        }

        .brand b {
            font-family: var(--display);
            font-weight: 900;
            font-size: 25px;
            letter-spacing: -.02em
        }

        .brand b i {
            font-style: normal;
            color: var(--red)
        }

        .brand span {
            font-size: 12.5px;
            line-height: 1.25;
            opacity: .75;
            max-width: 18ch
        }

        .nav {
            display: flex;
            gap: 22px;
            font-weight: 600;
            font-size: 15px
        }

        .nav a {
            text-decoration: none;
            opacity: .85
        }

        .nav a:hover {
            opacity: 1;
            text-decoration: underline;
            text-underline-offset: 5px
        }

        .top .btn {
            min-height: 42px;
            padding: 0 18px;
            font-size: 15px
        }

        @media (max-width:900px) {
            .nav {
                display: none
            }
        }

        @media (max-width:480px) {
            .brand span {
                display: none
            }
        }

        /* hero */
        .hero {
            background: var(--navy);
            color: var(--on-navy);
            padding: calc(env(safe-area-inset-top, 0px) + 112px) 0 76px;
            position: relative;
            overflow: hidden
        }

        .hero::after {
            content: "";
            position: absolute;
            right: -120px;
            top: -120px;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            border: 70px solid color-mix(in srgb, var(--sky) 12%, transparent);
            pointer-events: none
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 56px;
            align-items: center;
            position: relative;
            z-index: 1
        }

        .invite {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            font-weight: 600;
            font-size: 15.5px;
            color: color-mix(in srgb, var(--on-navy) 80%, transparent);
            margin-bottom: 26px
        }

        .pill {
            display: inline-block;
            padding: 6px 13px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font-weight: 800;
            font-size: 13.5px
        }

        .band {
            display: inline;
            background: var(--sky);
            color: #0F1B33;
            padding: .04em .16em 0;
            margin-left: -.16em;
            font-size: clamp(46px, 6.4vw, 94px);
            font-weight: 900;
            font-stretch: 75%;
            line-height: 1.12;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone
        }

        h1 {
            line-height: 1
        }

        .h1b {
            display: block;
            margin-top: .32em;
            font-size: clamp(30px, 3.9vw, 52px);
            font-weight: 850;
            font-stretch: 78%;
            line-height: 1.02;
            max-width: 17ch
        }

        .hero .lede {
            color: color-mix(in srgb, var(--on-navy) 78%, transparent);
            margin-top: 26px
        }

        .facts {
            display: grid;
            grid-template-columns: repeat(3, auto);
            justify-content: start;
            margin-top: 32px;
            border-top: 2px solid var(--sky)
        }

        .facts div {
            padding: 14px 26px 0 0
        }

        .facts div+div {
            padding-left: 22px;
            border-left: 1px solid color-mix(in srgb, var(--on-navy) 20%, transparent)
        }

        .facts small {
            display: block;
            font-size: 13px;
            opacity: .7
        }

        .facts strong {
            display: block;
            font-family: var(--display);
            font-weight: 800;
            font-stretch: 88%;
            font-size: 20px;
            line-height: 1.2
        }

        .cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 32px
        }

        .count {
            margin-top: 20px;
            font-size: 15px;
            opacity: .8
        }

        .count b {
            color: var(--sun);
            font-variant-numeric: tabular-nums
        }

        .leader {
            position: relative;
            margin: 0 auto;
            width: min(100%, 430px)
        }

        .arch {
            position: relative;
            aspect-ratio: 5/7;
            border-radius: 999px 999px 28px 28px;
            background: linear-gradient(180deg, var(--sky) 0%, #F3DFAE 100%);
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55)
        }

        .arch::before,
        .arch::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 2px solid rgba(19, 33, 74, .14);
            left: 50%;
            transform: translateX(-50%)
        }

        .arch::before {
            width: 118%;
            aspect-ratio: 1;
            top: 6%
        }

        .arch::after {
            width: 84%;
            aspect-ratio: 1;
            top: 16%
        }

        .cut {
            position: relative;
            z-index: 1;
            width: 88%;
            height: auto;
            display: block
        }

        .leader figcaption {
            margin-top: 16px;
            font-size: 14.5px;
            line-height: 1.4;
            color: color-mix(in srgb, var(--on-navy) 75%, transparent);
            text-align: center
        }

        .leader figcaption b {
            display: block;
            color: var(--on-navy);
            font-family: var(--display);
            font-weight: 800;
            font-stretch: 88%;
            font-size: 20px
        }

        .hero-copy {
            position: relative
        }

        .stamp {
            position: absolute;
            right: 0;
            top: 210px;
            width: 148px;
            height: 148px;
            border-radius: 50%;
            background: var(--red);
            color: #fff;
            display: grid;
            place-items: center;
            text-align: center;
            box-shadow: 0 0 0 7px var(--navy);
            transform: rotate(-12deg);
            animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) .35s both
        }

        .stamp b {
            display: block;
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 76%;
            font-size: 38px;
            line-height: .9;
            letter-spacing: -.01em
        }

        .stamp span {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            line-height: 1.2;
            margin-top: 6px
        }

        @keyframes pop {
            from {
                transform: rotate(-34deg) scale(.4);
                opacity: 0
            }

            to {
                transform: rotate(-12deg) scale(1);
                opacity: 1
            }
        }

        @media (max-width:960px) {
            .hero {
                padding-top: calc(env(safe-area-inset-top, 0px) + 96px)
            }

            .hero-grid {
                grid-template-columns: 1fr;
                gap: 44px
            }

            .leader {
                width: min(100%, 340px)
            }

            .stamp {
                position: relative;
                top: auto;
                right: auto;
                float: right;
                width: 104px;
                height: 104px;
                margin: 18px 0 6px 14px;
                shape-outside: circle(50%);
                box-shadow: 0 0 0 5px var(--navy)
            }

            .stamp b {
                font-size: 26px
            }

            .stamp span {
                font-size: 11px
            }
        }

        @media (max-width:560px) {
            .facts {
                grid-template-columns: 1fr
            }

            .facts div,
            .facts div+div {
                padding: 12px 0;
                border-left: 0
            }

            .facts div+div {
                border-top: 1px solid color-mix(in srgb, var(--on-navy) 20%, transparent)
            }

            .cta-row .btn {
                flex: 1 1 100%
            }
        }

        /* ticker */
        .ticker {
            background: var(--sky);
            color: #0F1B33;
            overflow: hidden;
            border-block: 1px solid color-mix(in srgb, #0F1B33 12%, transparent)
        }

        .ticker-track {
            display: flex;
            width: max-content;
            animation: tick 70s linear infinite
        }

        .ticker:hover .ticker-track {
            animation-play-state: paused
        }

        .ticker span {
            display: flex;
            align-items: center;
            gap: 22px;
            padding: 14px 11px;
            font-family: var(--display);
            font-weight: 800;
            font-stretch: 85%;
            font-size: 18px;
            white-space: nowrap
        }

        .ticker span::after {
            content: "";
            width: 8px;
            height: 8px;
            background: var(--red);
            border-radius: 2px;
            transform: rotate(45deg)
        }

        @keyframes tick {
            to {
                transform: translateX(-50%)
            }
        }

        section {
            padding: 96px 0
        }

        .head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 36px;
            align-items: end;
            margin-bottom: 40px
        }

        .head .side {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: flex-start
        }

        @media (max-width:860px) {
            .head {
                grid-template-columns: 1fr;
                gap: 18px
            }

            section {
                padding: 72px 0
            }
        }

        /* classes */
        .filters {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 6px;
            margin-bottom: 26px;
            scrollbar-width: thin
        }

        .filters button {
            flex: none;
            min-height: 42px;
            padding: 0 16px;
            border-radius: 999px;
            border: 1.5px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            font: 600 14.5px/1 var(--body);
            cursor: pointer
        }

        .filters button[aria-pressed="true"] {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink)
        }

        .filters button:hover {
            border-color: var(--ink)
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
            gap: 18px
        }

        .kcard {
            position: relative;
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border: 1.5px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: border-color .15s, transform .15s
        }

        .kcard:hover {
            border-color: var(--ink-2)
        }

        .kcard input {
            position: absolute;
            opacity: 0;
            pointer-events: none
        }

        .kcard:has(input:focus-visible) {
            outline: 3px solid var(--red);
            outline-offset: 3px
        }

        .kcard.on {
            border-color: var(--ink);
            box-shadow: 0 0 0 2px var(--ink)
        }

        .kimg {
            aspect-ratio: 5/3;
            overflow: hidden;
            border-bottom: 1px solid var(--line)
        }

        .kimg svg {
            width: 100%;
            height: 100%
        }

        .kbody {
            padding: 16px 18px 18px;
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .kgroup {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--ink-2)
        }

        .kbody h3 {
            margin-top: 4px
        }

        .kbody ul {
            margin: 12px 0 0;
            padding: 0;
            list-style: none;
            font-size: 14.5px;
            color: var(--ink-2);
            line-height: 1.45
        }

        .kbody li {
            padding-left: 16px;
            position: relative;
            margin-top: 6px
        }

        .kbody li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .55em;
            width: 7px;
            height: 7px;
            border-radius: 2px;
            background: var(--sky)
        }

        .kpick {
            margin-top: auto;
            padding-top: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 14.5px
        }

        .kpick i {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid var(--ink-2);
            display: grid;
            place-items: center;
            flex: none
        }

        .kcard.on .kpick i {
            background: var(--red);
            border-color: var(--red)
        }

        .kcard.on .kpick i::after {
            content: "";
            width: 9px;
            height: 5px;
            border-left: 2.5px solid #fff;
            border-bottom: 2.5px solid #fff;
            transform: rotate(-45deg) translate(1px, -1px)
        }

        .kcard.on .kpick b::after {
            content: " (dipilih)";
            color: var(--red)
        }

        .kcard[hidden] {
            display: none
        }

        .src {
            font-size: 13.5px;
            color: var(--ink-2);
            margin-top: 22px;
            max-width: 80ch
        }

        @media (max-width:560px) {
            .cards {
                grid-template-columns: 1fr;
                gap: 12px
            }

            .kimg {
                aspect-ratio: 12/5
            }

            .kbody {
                padding: 12px 14px 14px
            }

            .kbody h3 {
                font-size: 17.5px
            }

            .kbody ul {
                font-size: 13.5px;
                margin-top: 6px
            }

            .kbody li:nth-child(n+3) {
                display: none
            }

            .kpick {
                padding-top: 10px;
                font-size: 13.5px
            }
        }

        /* benefits + photos */
        .why {
            background: var(--surface);
            border-block: 1px solid var(--line)
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: start
        }

        .blist {
            margin: 28px 0 0;
            padding: 0;
            list-style: none;
            border-top: 2px solid var(--ink)
        }

        .blist li {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 16px;
            padding: 18px 0;
            border-bottom: 1px solid var(--line)
        }

        .blist svg {
            width: 40px;
            height: 40px;
            padding: 8px;
            border-radius: 10px;
            background: var(--sky-soft);
            color: var(--ink)
        }

        .blist p {
            color: var(--ink-2);
            font-size: 15.5px;
            margin-top: 3px
        }

        .photos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            position: sticky;
            top: 96px
        }

        .photos figure {
            margin: 0;
            border-radius: 8px;
            overflow: hidden;
            background: var(--line)
        }

        .photos img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .photos .p-big {
            grid-column: span 2;
            aspect-ratio: 4/3
        }

        .photos .p-s {
            aspect-ratio: 4/3
        }

        .photos figcaption {
            grid-column: span 2;
            font-size: 13.5px;
            color: var(--ink-2)
        }

        @media (max-width:860px) {
            .why-grid {
                grid-template-columns: 1fr
            }

            .photos {
                position: static
            }
        }

        .callout {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 18px;
            align-items: center;
            margin-top: 26px;
            padding: 20px 22px;
            border-radius: 16px;
            background: var(--navy);
            color: var(--on-navy)
        }

        .callout b {
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 76%;
            font-size: 64px;
            line-height: .9;
            color: var(--sun)
        }

        .callout p {
            font-size: 15px;
            line-height: 1.5;
            color: color-mix(in srgb, var(--on-navy) 85%, transparent)
        }

        @media (max-width:560px) {
            .callout {
                grid-template-columns: 1fr;
                gap: 8px
            }
        }

        .perks {
            margin-top: 18px;
            padding: 14px 16px;
            border-radius: 12px;
            background: var(--sky-soft);
            font-size: 15px
        }

        .duo-sec {
            background: var(--sky-soft)
        }

        .duo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .duo-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: clamp(22px, 3vw, 34px);
            display: flex;
            flex-direction: column;
            align-items: flex-start
        }

        .duo-card.alt {
            background: var(--navy);
            color: var(--on-navy);
            border-color: transparent
        }

        .duo-card h3 {
            font-size: clamp(26px, 2.6vw, 32px);
            font-stretch: 80%;
            margin: 10px 0 10px
        }

        .duo-card>p {
            color: var(--ink-2)
        }

        .duo-card.alt>p {
            color: color-mix(in srgb, var(--on-navy) 80%, transparent)
        }

        .duo-card .btn {
            margin-top: auto
        }

        .duo-tag {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font-weight: 700;
            font-size: 13px
        }

        .duo-card.alt .duo-tag {
            background: var(--sky);
            color: #0F1B33
        }

        .ticks {
            list-style: none;
            margin: 14px 0 22px;
            padding: 0;
            display: grid;
            gap: 9px
        }

        .ticks li {
            position: relative;
            padding-left: 28px;
            font-size: 15.5px;
            line-height: 1.5
        }

        .ticks li::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 6px;
            width: 12px;
            height: 7px;
            border-left: 2.5px solid var(--red);
            border-bottom: 2.5px solid var(--red);
            transform: rotate(-45deg)
        }

        .duo-card.alt .ticks li::before {
            border-color: var(--sky)
        }

        .fine {
            font-size: 13px;
            opacity: .75;
            margin-top: auto
        }

        @media (max-width:860px) {
            .duo {
                grid-template-columns: 1fr
            }
        }

        .sesi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .sesi {
            background: var(--surface);
            border: 1.5px solid var(--line);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        .sesi.on {
            border-color: var(--ink);
            box-shadow: 0 0 0 2px var(--ink)
        }

        .sesi-img {
            aspect-ratio: 12/5;
            overflow: hidden;
            border-bottom: 1px solid var(--line)
        }

        .sesi-img svg {
            width: 100%;
            height: 100%
        }

        .sesi-body {
            padding: 20px 22px 22px;
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .sesi-when {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            font-weight: 700
        }

        .sesi-when span {
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--sky-soft)
        }

        .sesi-when .d2 {
            background: color-mix(in srgb, var(--sun) 35%, transparent)
        }

        .sesi-body h3 {
            font-size: clamp(22px, 2.2vw, 27px);
            font-stretch: 82%;
            margin-top: 12px
        }

        .sesi-kl {
            font-size: 13.5px;
            color: var(--ink-2);
            margin-top: 6px
        }

        .sesi-prog {
            margin: 12px 0 0;
            padding: 0;
            list-style: none;
            font-size: 14.5px;
            color: var(--ink-2);
            line-height: 1.45
        }

        .sesi-prog li {
            padding-left: 16px;
            position: relative;
            margin-top: 6px
        }

        .sesi-prog li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .55em;
            width: 7px;
            height: 7px;
            border-radius: 2px;
            background: var(--sky)
        }

        .sesi-more {
            border: 0
        }

        .sesi-more summary {
            cursor: pointer;
            font-size: 14px;
            font-weight: 700;
            margin-top: 10px;
            color: var(--ink);
            list-style: none;
            padding: 0
        }

        .sesi-more summary::-webkit-details-marker {
            display: none
        }

        .sesi-more summary::after {
            display: none
        }

        .sesi-more[open] summary {
            margin-bottom: 2px
        }

        .sesi-pick {
            margin-top: auto;
            padding-top: 18px
        }

        .sesi-pick>span {
            display: block;
            font-size: 13.5px;
            font-weight: 700;
            margin-bottom: 8px
        }

        .kchips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

        .kchip {
            position: relative
        }

        .kchip input {
            position: absolute;
            opacity: 0;
            pointer-events: none
        }

        .kchip label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 7px 14px;
            border: 1.5px solid var(--line);
            border-radius: 999px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            background: var(--paper);
            line-height: 1.25
        }

        .kchip label:hover {
            border-color: var(--ink)
        }

        .kchip input:focus-visible+label {
            outline: 3px solid var(--red);
            outline-offset: 2px
        }

        .kchip input:checked+label {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink)
        }

        @media (max-width:900px) {
            .sesi-grid {
                grid-template-columns: 1fr
            }
        }

        .agenda-sec {
            background: var(--surface);
            border-block: 1px solid var(--line)
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 24px;
            flex-wrap: wrap
        }

        .tabs button {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            padding: 12px 20px;
            border-radius: 14px;
            border: 1.5px solid var(--line);
            background: var(--paper);
            color: var(--ink);
            font: 500 14px/1.3 var(--body);
            cursor: pointer;
            text-align: left
        }

        .tabs button b {
            font-family: var(--display);
            font-weight: 850;
            font-stretch: 85%;
            font-size: 20px
        }

        .tabs button[aria-selected="true"] {
            background: var(--navy);
            color: var(--on-navy);
            border-color: var(--navy)
        }

        .tl {
            border-top: 2px solid var(--ink)
        }

        .tl[hidden] {
            display: none
        }

        .tl-group {
            font-family: var(--display);
            font-weight: 800;
            font-stretch: 88%;
            font-size: 15px;
            color: var(--ink-2);
            padding: 18px 0 4px
        }

        .tl-row {
            display: grid;
            grid-template-columns: 140px 1fr auto;
            gap: 18px;
            padding: 14px 0;
            border-bottom: 1px solid var(--line);
            align-items: start
        }

        .tl-time {
            font-weight: 800;
            font-variant-numeric: tabular-nums
        }

        .tl-time small {
            display: block;
            font-weight: 500;
            color: var(--ink-2);
            font-size: 13px
        }

        .tl-what b {
            display: block;
            font-size: 16.5px
        }

        .tl-what p {
            font-size: 14.5px;
            color: var(--ink-2);
            margin-top: 4px
        }

        .tl-who {
            font-size: 14px;
            color: var(--ink-2);
            text-align: right;
            max-width: 30ch
        }

        .tl-row.ws {
            background: linear-gradient(90deg, var(--sky-soft), transparent 70%);
            border-radius: 0;
            padding-left: 12px;
            margin-left: -12px
        }

        .tl-row.ws .tl-what b {
            font-family: var(--display);
            font-weight: 850;
            font-stretch: 86%;
            font-size: 20px
        }

        .tl-row.mine {
            box-shadow: inset 4px 0 0 var(--red)
        }

        .tl-badge {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font: 700 12px/1.6 var(--body);
            vertical-align: middle
        }

        @media (max-width:720px) {
            .tl-row {
                grid-template-columns: 1fr;
                gap: 4px
            }

            .tl-who {
                text-align: left
            }
        }

        .prep {
            margin-top: 48px;
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 28px;
            padding: clamp(22px, 3vw, 34px);
            border-radius: 22px;
            background: var(--navy);
            color: var(--on-navy)
        }

        .prep h3 {
            font-size: clamp(26px, 2.6vw, 32px);
            font-stretch: 80%
        }

        .prep>div>p {
            margin-top: 8px;
            color: color-mix(in srgb, var(--on-navy) 80%, transparent)
        }

        .prep .ticks {
            margin: 0
        }

        .prep .ticks li::before {
            border-color: var(--sky)
        }

        @media (max-width:820px) {
            .prep {
                grid-template-columns: 1fr
            }
        }

        .pc-sched {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 8px
        }

        .pc-sched div {
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .08)
        }

        .pc-sched small {
            display: block;
            font-size: 11.5px;
            opacity: .75
        }

        .pc-sched b {
            display: block;
            font-size: 13.5px;
            line-height: 1.3
        }

        .opt .hint {
            display: block;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--ink-2);
            margin-top: 2px
        }

        .dayguide {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 22px
        }

        .dg {
            border-radius: 18px;
            padding: 20px 22px;
            background: var(--navy);
            color: var(--on-navy);
            border-top: 8px solid var(--sky)
        }

        .dg.d2 {
            border-top-color: var(--sun)
        }

        .dg span {
            display: block;
            font-size: 13.5px;
            font-weight: 700;
            opacity: .8
        }

        .dg b {
            display: block;
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 80%;
            font-size: clamp(26px, 3vw, 34px);
            line-height: 1.05
        }

        .dg p {
            margin-top: 10px;
            font-size: 15px;
            line-height: 1.55
        }

        .dg small {
            display: block;
            margin-top: 10px;
            font-size: 13px;
            opacity: .75
        }

        @media (max-width:720px) {
            .dayguide {
                grid-template-columns: 1fr
            }
        }

        .dayhint {
            margin-top: 14px;
            padding: 14px 16px;
            border-radius: 12px;
            background: var(--navy);
            color: var(--on-navy);
            font-size: 15px;
            line-height: 1.5
        }

        .dayhint b {
            color: var(--sun)
        }

        .dayhint:empty {
            display: none
        }

        /* gallery */
        .gal-sec {
            background: var(--navy);
            color: var(--on-navy)
        }

        .gal-sec .lede {
            color: color-mix(in srgb, var(--on-navy) 78%, transparent)
        }

        .gal {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 210px;
            gap: 12px
        }

        .gal figure {
            position: relative;
            margin: 0;
            border-radius: 14px;
            overflow: hidden;
            background: var(--navy-2)
        }

        .gal img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease
        }

        .gal figure:hover img {
            transform: scale(1.04)
        }

        .gal .big {
            grid-column: span 2;
            grid-row: span 2
        }

        .gal .wide {
            grid-column: span 2
        }

        .gal figcaption {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 28px 14px 12px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(180deg, transparent, rgba(10, 18, 40, .82))
        }

        @media (max-width:860px) {
            .gal {
                grid-template-columns: 1fr 1fr;
                grid-auto-rows: 150px;
                gap: 8px
            }

            .gal figcaption {
                font-size: 12.5px;
                padding: 22px 10px 8px
            }
        }

        /* steps */
        .steps {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0;
            counter-reset: s;
            position: relative
        }

        .steps li {
            counter-increment: s;
            padding: 0 18px 0 0;
            position: relative
        }

        .steps li::before {
            content: counter(s);
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: var(--navy);
            color: var(--on-navy);
            font-family: var(--display);
            font-weight: 900;
            font-size: 26px;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
            box-shadow: 0 0 0 6px var(--paper)
        }

        .steps li::after {
            content: "";
            position: absolute;
            top: 29px;
            left: 58px;
            right: 0;
            height: 2px;
            background: var(--line)
        }

        .steps li:last-child::after {
            display: none
        }

        .steps li:nth-child(4)::before,
        .steps li:nth-child(5)::before {
            background: var(--red)
        }

        .steps p {
            font-size: 15px;
            color: var(--ink-2);
            margin-top: 6px
        }

        @media (max-width:900px) {
            .steps {
                grid-template-columns: 1fr;
                gap: 0
            }

            .steps li {
                display: grid;
                grid-template-columns: 58px 1fr;
                column-gap: 18px;
                padding: 0 0 26px
            }

            .steps li::before {
                grid-row: span 2;
                margin: 0
            }

            .steps li::after {
                top: 58px;
                bottom: 0;
                left: 28px;
                width: 2px;
                height: auto;
                right: auto
            }
        }

        /* docs */
        .docs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .doc {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 22px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 26px
        }

        .doc-ico {
            width: 58px;
            height: 74px;
            border-radius: 6px;
            background: var(--red);
            color: #fff;
            display: grid;
            place-items: end center;
            padding-bottom: 9px;
            font: 800 13px/1 var(--body);
            position: relative;
            overflow: hidden
        }

        .doc-ico::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 18px;
            height: 18px;
            background: linear-gradient(225deg, var(--surface) 50%, rgba(0, 0, 0, .28) 50%)
        }

        .doc p {
            color: var(--ink-2);
            font-size: 15px;
            margin-top: 6px
        }

        .doc .meta {
            font-size: 13px;
            margin-top: 8px
        }

        .doc .btn {
            margin-top: 16px;
            min-height: 46px
        }

        .doc-status {
            font-size: 14px;
            margin-top: 10px;
            min-height: 1.4em
        }

        @media (max-width:860px) {
            .docs {
                grid-template-columns: 1fr
            }
        }

        /* register */
        .reg {
            background: var(--navy);
            color: var(--on-navy);
            border-radius: 28px;
            padding: clamp(30px, 5vw, 64px);
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 48px;
            align-items: center;
            position: relative;
            overflow: hidden
        }

        .reg::before {
            content: "";
            position: absolute;
            left: -90px;
            bottom: -90px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 56px solid color-mix(in srgb, var(--sky) 10%, transparent)
        }

        .reg>* {
            position: relative
        }

        .reg h2 {
            font-size: clamp(40px, 6vw, 78px);
            font-stretch: 76%
        }

        .reg .lede {
            color: color-mix(in srgb, var(--on-navy) 78%, transparent);
            margin-top: 16px
        }

        .flow {
            list-style: none;
            margin: 24px 0 0;
            padding: 0;
            counter-reset: f
        }

        .flow li {
            counter-increment: f;
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 12px;
            padding: 13px 0;
            border-top: 1px solid color-mix(in srgb, var(--on-navy) 16%, transparent)
        }

        .flow li::before {
            content: counter(f);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--sky);
            color: #0F1B33;
            display: grid;
            place-items: center;
            font-weight: 800
        }

        .flow b {
            display: block
        }

        .flow span {
            font-size: 14.5px;
            opacity: .8
        }

        .flow a {
            color: var(--sky)
        }

        .notice {
            margin-top: 24px;
            padding: 16px 18px;
            border-left: 4px solid var(--sun);
            background: color-mix(in srgb, var(--on-navy) 7%, transparent);
            border-radius: 0 10px 10px 0;
            font-size: 14px;
            line-height: 1.55
        }

        .reg-side {
            text-align: center
        }

        .reg-side .big {
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 76%;
            font-size: clamp(78px, 10vw, 132px);
            line-height: .85;
            color: var(--sky)
        }

        .reg-side .big+p {
            margin: 12px 0 22px;
            font-weight: 600
        }

        .chosen {
            margin-bottom: 14px;
            padding: 12px 14px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--on-navy) 9%, transparent);
            font-size: 14.5px;
            text-align: left
        }

        .chosen b {
            display: block;
            font-size: 16px
        }

        .chosen a {
            color: var(--sky)
        }

        .reg-side .btn {
            width: 100%;
            min-height: 58px;
            font-size: 17px
        }

        .reg-side .note {
            font-size: 13.5px;
            opacity: .72;
            margin-top: 14px
        }

        @media (max-width:860px) {
            .reg {
                grid-template-columns: 1fr
            }
        }

        /* form */
        .fwrap {
            display: grid;
            grid-template-columns: 330px 1fr;
            border-radius: 28px;
            overflow: hidden;
            background: var(--surface);
            border: 1px solid var(--line)
        }

        .faside {
            background: var(--navy);
            color: var(--on-navy);
            padding: 40px 30px;
            position: relative;
            overflow: hidden
        }

        .faside::after {
            content: "";
            position: absolute;
            right: -80px;
            bottom: -80px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 48px solid color-mix(in srgb, var(--sky) 10%, transparent)
        }

        .faside h2 {
            font-size: clamp(36px, 4vw, 52px);
            font-stretch: 76%
        }

        .faside .free {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-top: 18px
        }

        .faside .free b {
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 76%;
            font-size: 56px;
            line-height: .9;
            color: var(--sky)
        }

        .faside .free span {
            font-weight: 600;
            opacity: .85
        }

        .aside-note {
            margin-top: 16px;
            font-size: 14.5px;
            line-height: 1.5;
            opacity: .85;
            position: relative;
            z-index: 1
        }

        .stepper {
            list-style: none;
            padding: 0;
            margin: 30px 0 0;
            position: relative;
            z-index: 1
        }

        .stepper li {
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 12px;
            align-items: center;
            padding: 9px 0;
            opacity: .55;
            font-weight: 700
        }

        .stepper li small {
            display: block;
            font-weight: 500;
            font-size: 13px;
            opacity: .85
        }

        .stepper .n {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid var(--sky);
            display: grid;
            place-items: center;
            font-size: 15px
        }

        .stepper li.cur,
        .stepper li.done {
            opacity: 1
        }

        .stepper li.cur .n,
        .stepper li.done .n {
            background: var(--sky);
            color: #0F1B33
        }

        .fmain {
            padding: clamp(24px, 4vw, 48px);
            min-width: 0
        }

        .pane[hidden] {
            display: none
        }

        .pane>h3 {
            font-size: clamp(26px, 3vw, 34px);
            font-stretch: 80%;
            margin-bottom: 14px
        }

        .pane>p {
            color: var(--ink-2);
            margin-top: 12px;
            max-width: 66ch
        }

        .pane>p strong {
            color: var(--ink)
        }

        .infobox {
            display: grid;
            gap: 6px;
            margin: 20px 0 4px;
            padding: 16px 18px;
            border-radius: 12px;
            background: var(--sky-soft);
            font-weight: 600
        }

        .chain {
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: 12px;
            border: 1.5px dashed var(--line);
            font-weight: 600;
            font-size: 15px
        }

        .caution {
            margin-top: 16px;
            padding: 14px 16px;
            border-left: 4px solid var(--sun);
            background: color-mix(in srgb, var(--sun) 14%, transparent);
            border-radius: 0 10px 10px 0;
            font-size: 14.5px;
            color: var(--ink)
        }

        .fgroup {
            border: 0;
            padding: 0;
            margin: 28px 0 0;
            min-width: 0
        }

        .fgroup legend {
            font-family: var(--display);
            font-weight: 800;
            font-stretch: 88%;
            font-size: 20px;
            padding: 0 0 12px;
            width: 100%;
            border-bottom: 2px solid var(--ink);
            margin-bottom: 18px
        }

        .grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 18px
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 18px;
            min-width: 0
        }

        .field>label,
        .field>.lbl {
            font-weight: 700;
            font-size: 15px
        }

        .req {
            color: var(--red)
        }

        .help {
            font-size: 13.5px;
            color: var(--ink-2)
        }

        .fmain input[type=text],
        .fmain input[type=email],
        .fmain input[type=tel],
        .fmain input[type=url],
        .fmain input[type=number],
        .fmain input[type=file],
        .fmain select,
        .fmain textarea {
            width: 100%;
            min-height: 50px;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            padding: 12px 14px;
            font: inherit;
            font-size: 16px;
            background: var(--paper);
            color: var(--ink)
        }

        .fmain input[type=file] {
            padding: 10px 14px
        }

        .fmain textarea {
            min-height: 110px;
            resize: vertical
        }

        .fmain input:focus,
        .fmain select:focus,
        .fmain textarea:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 45%, transparent)
        }

        .field.bad input,
        .field.bad select,
        .field.bad textarea,
        .field.bad .opts {
            border-color: var(--red)
        }

        .field.bad .opts {
            outline: 2px solid var(--red);
            outline-offset: 4px;
            border-radius: 12px
        }

        .emsg {
            color: var(--red);
            font-size: 13.5px;
            font-weight: 600;
            min-height: 0
        }

        .emsg:empty {
            display: none
        }

        .opts {
            display: grid;
            gap: 8px
        }

        .opts.c2 {
            grid-template-columns: 1fr 1fr
        }

        .opts.c4 {
            grid-template-columns: repeat(4, 1fr)
        }

        .opt {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 12px 14px;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            background: var(--paper);
            line-height: 1.35
        }

        .opt:hover {
            border-color: var(--ink-2)
        }

        .opt:has(input:checked) {
            border-color: var(--ink);
            background: var(--sky-soft)
        }

        .opt input {
            accent-color: var(--red);
            width: 18px;
            height: 18px;
            margin: 1px 0 0;
            flex: none
        }

        .opt.plain {
            font-weight: 500;
            background: transparent
        }

        .hp {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden
        }

        .factions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 30px;
            padding-top: 22px;
            border-top: 1px solid var(--line)
        }

        .factions .spacer {
            flex: 1
        }

        .fstatus {
            font-size: 14.5px;
            font-weight: 600;
            color: var(--red);
            width: 100%
        }

        .fstatus:empty {
            display: none
        }

        .done-grid {
            display: grid;
            grid-template-columns: minmax(260px, 340px) 1fr;
            gap: 36px;
            align-items: start
        }

        @media (max-width:760px) {
            .done-grid {
                grid-template-columns: 1fr
            }
        }

        .pcard {
            background: #13214A;
            color: #F3F6FB;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 24px 50px -24px rgba(10, 18, 40, .6);
            width: 100%;
            max-width: 340px;
            margin-inline: auto
        }

        .pc-top {
            background: #E3B65A;
            color: #15283F;
            padding: 16px 20px 14px
        }

        .pc-top span {
            display: block;
            font-size: 13px;
            font-weight: 700
        }

        .pc-top b {
            display: block;
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 80%;
            font-size: 24px;
            line-height: 1.05;
            margin-top: 2px
        }

        .pc-body {
            padding: 18px 20px 6px
        }

        .pc-name {
            font-family: var(--display);
            font-weight: 850;
            font-stretch: 84%;
            font-size: 26px;
            line-height: 1.08;
            overflow-wrap: anywhere
        }

        .pc-org {
            font-size: 14.5px;
            opacity: .85;
            margin-top: 4px;
            overflow-wrap: anywhere
        }

        .pc-kelas {
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .08)
        }

        .pc-kelas small {
            display: block;
            font-size: 12px;
            opacity: .75
        }

        .pc-kelas b {
            display: block;
            color: #FFD27A;
            font-size: 15px;
            line-height: 1.3
        }

        .pc-qr {
            margin: 16px auto 0;
            width: 184px;
            height: 184px;
            padding: 12px;
            background: #fff;
            border-radius: 14px
        }

        .pc-qr svg {
            width: 100%;
            height: 100%;
            display: block
        }

        .pc-no {
            text-align: center;
            margin-top: 10px
        }

        .pc-no small {
            display: block;
            font-size: 12px;
            opacity: .75
        }

        .pc-no b {
            font-family: var(--display);
            font-weight: 900;
            font-stretch: 88%;
            font-size: 24px;
            letter-spacing: .03em
        }

        .pc-foot {
            padding: 14px 20px 18px;
            font-size: 12.5px;
            line-height: 1.45;
            opacity: .8;
            text-align: center;
            border-top: 1px dashed rgba(255, 255, 255, .2);
            margin-top: 14px
        }

        .done-grid h3 {
            font-size: clamp(26px, 3vw, 34px);
            font-stretch: 80%;
            margin-top: 4px
        }

        .mailnote {
            margin-top: 12px;
            padding: 12px 14px;
            border-radius: 10px;
            background: var(--sky-soft);
            font-size: 14.5px
        }

        .mailnote:empty {
            display: none
        }

        .done-badge {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: var(--red);
            display: grid;
            place-items: center;
            margin-bottom: 18px
        }

        .done-badge::after {
            content: "";
            width: 28px;
            height: 15px;
            border-left: 5px solid #fff;
            border-bottom: 5px solid #fff;
            transform: rotate(-45deg) translate(2px, -3px)
        }

        .regno {
            display: inline-block;
            margin-top: 14px;
            padding: 10px 16px;
            border-radius: 10px;
            background: var(--navy);
            color: var(--on-navy);
            font-family: var(--display);
            font-weight: 800;
            font-size: 24px;
            letter-spacing: .04em
        }

        .summary {
            margin: 20px 0 0;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px 18px;
            font-size: 15px
        }

        .summary dt {
            color: var(--ink-2)
        }

        .summary dd {
            margin: 0;
            font-weight: 700
        }

        .next {
            margin: 22px 0 0;
            padding-left: 20px;
            color: var(--ink-2)
        }

        .next li {
            margin-top: 6px
        }

        @media (max-width:900px) {
            .fwrap {
                grid-template-columns: 1fr
            }

            .faside {
                padding: 30px 24px
            }

            .stepper {
                display: flex;
                gap: 6px;
                margin-top: 22px
            }

            .stepper li {
                grid-template-columns: 1fr;
                justify-items: start;
                flex: 1;
                font-size: 13px
            }

            .stepper li small {
                display: none
            }
        }

        @media (max-width:620px) {

            .grid2,
            .opts.c2 {
                grid-template-columns: 1fr
            }

            .opts.c4 {
                grid-template-columns: 1fr 1fr
            }

            .factions .btn {
                flex: 1 1 100%
            }

            .factions .spacer {
                display: none
            }
        }

        /* admin */
        #admin[hidden] {
            display: none
        }

        .adm {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: clamp(20px, 3vw, 36px)
        }

        .adm-top {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: end;
            justify-content: space-between
        }

        .adm-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px
        }

        .adm-stats span {
            font-size: 13.5px;
            padding: 6px 10px;
            border-radius: 8px;
            background: var(--paper);
            border: 1px solid var(--line)
        }

        .adm-stats b {
            font-weight: 800
        }

        .tbl {
            overflow-x: auto;
            margin-top: 18px;
            border: 1px solid var(--line);
            border-radius: 12px
        }

        .tbl table {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
            min-width: 820px
        }

        .tbl th,
        .tbl td {
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            vertical-align: top
        }

        .tbl th {
            background: var(--paper);
            font-weight: 700
        }

        /* faq */
        .faq {
            max-width: 840px
        }

        details {
            border-bottom: 1px solid var(--line)
        }

        summary {
            list-style: none;
            cursor: pointer;
            padding: 20px 44px 20px 0;
            font-weight: 700;
            font-size: 18px;
            position: relative
        }

        summary::-webkit-details-marker {
            display: none
        }

        summary::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 27px;
            width: 10px;
            height: 10px;
            border-right: 2.5px solid var(--ink);
            border-bottom: 2.5px solid var(--ink);
            transform: rotate(45deg);
            transition: transform .2s
        }

        details[open] summary::after {
            transform: rotate(-135deg);
            top: 32px
        }

        details p {
            padding: 0 0 22px;
            color: var(--ink-2);
            max-width: 68ch
        }

        footer {
            background: var(--navy);
            color: color-mix(in srgb, var(--on-navy) 75%, transparent);
            padding: 56px 0 calc(64px + env(safe-area-inset-bottom, 0px));
            font-size: 14.5px
        }

        footer .wrap {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 36px
        }

        footer strong {
            color: var(--on-navy);
            display: block;
            margin-bottom: 6px
        }

        footer a {
            color: var(--sky)
        }

        @media (max-width:800px) {
            footer .wrap {
                grid-template-columns: 1fr
            }
        }

        /* bottom bar */
        .bar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 35;
            background: var(--surface);
            border-top: 1px solid var(--line);
            box-shadow: 0 -10px 30px rgba(15, 27, 51, .08);
            padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
            transform: translateY(110%);
            transition: transform .25s ease
        }

        .bar.show {
            transform: none
        }

        .bar .wrap {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .bar .txt {
            flex: 1;
            min-width: 0;
            font-size: 14px;
            color: var(--ink-2);
            line-height: 1.3
        }

        .bar .txt b {
            display: block;
            color: var(--ink);
            font-size: 15.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .bar .btn {
            min-height: 46px;
            padding: 0 20px;
            font-size: 15px;
            flex: none
        }

        .bar .alt {
            display: none
        }

        .bar.picked .alt {
            display: none !important
        }

        @media (max-width:560px) {
            .bar .btn {
                padding: 0 16px
            }

            .bar .alt {
                display: inline-flex
            }
        }

        .toast {
            position: fixed;
            left: 50%;
            bottom: calc(100px + env(safe-area-inset-bottom, 0px));
            transform: translate(-50%, 20px);
            background: var(--ink);
            color: var(--paper);
            padding: 12px 18px;
            border-radius: 12px;
            font-size: 15px;
            opacity: 0;
            pointer-events: none;
            transition: .25s;
            z-index: 40;
            max-width: calc(100% - 32px)
        }

        .toast.show {
            opacity: 1;
            transform: translate(-50%, 0)
        }

        /* ============================================================
           LAPIS TEMA KEY VISUAL BUSINESS MATCHING 2026
           Krem gading + gradasi biru (navy ke teal) + emas metalik.
           Tanpa warna merah.
           ============================================================ */

        /* Latar halaman: gradasi krem seperti bidang atas KV */
        body {
            background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
            background-attachment: fixed
        }

        /* Permukaan gelap memakai gradasi biru berlapis seperti siluet
           pegunungan pada KV: navy pekat menuju teal. */
        .hero,
        .callout,
        .duo-card.alt,
        .prep,
        .gal-sec,
        .reg,
        .faside,
        .pcard,
        footer {
            background: var(--blue-grad)
        }

        /* Elemen biru berukuran kecil: gradasi lebih pendek agar tetap pekat */
        .dg,
        .dayhint,
        .regno,
        .steps li::before,
        .tabs button[aria-selected="true"] {
            background: linear-gradient(145deg, #0E2742 0%, #15495F 100%)
        }

        /* Tombol utama: emas metalik dengan teks navy */
        .btn-red {
            background: var(--gold-grad);
            color: var(--on-red);
            border: 1px solid rgba(184, 131, 31, .5);
            box-shadow: 0 8px 20px -10px rgba(140, 97, 20, .8)
        }

        .btn-red:hover {
            background: linear-gradient(135deg, #F8E7BD 0%, #E3B255 48%, #C7902A 100%)
        }

        /* Badge, pil, dan ikon aksen: emas metalik, teks navy */
        .pill,
        .stamp,
        .duo-tag,
        .tl-badge,
        .doc-ico,
        .done-badge,
        .steps li:nth-child(4)::before,
        .steps li:nth-child(5)::before {
            background: var(--gold-grad);
            color: var(--on-red)
        }

        /* Judul hero: blok emas metalik */
        .band {
            background: var(--gold-grad);
            color: #0E2742
        }

        /* Bingkai foto: gradasi emas */
        .arch {
            background: linear-gradient(180deg, #E3B255 0%, #F3DFAE 100%)
        }

        /* Garis tipis emas sebagai pemisah, mengikuti aksen KV */
        .head h2 {
            position: relative
        }

        .head h2::after {
            content: "";
            display: block;
            width: 132px;
            height: 2px;
            margin-top: 16px;
            border-radius: 2px;
            background: var(--gold-line)
        }

        /* Status validasi memakai ambar KV, bukan merah */
        .req,
        .emsg,
        .fstatus {
            color: var(--err)
        }

        .field.bad input,
        .field.bad select,
        .field.bad textarea,
        .field.bad .opts {
            border-color: var(--err)
        }

        /* Kartu peserta: kepala kartu emas, badan biru bergradasi */
        .pc-top {
            background: var(--gold-grad);
            color: #0E2742
        }