/* ==========================================================================
   The Bikers Ranger — global stylesheet
   Mobile-first. Section order: tokens, reset, utilities, header, mobile nav,
   footer, shared components (cards, forms, etc.), then page sections.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Self-hosted (the CSP only allows fonts from this origin). Latin subsets of
   the families used in the Figma file; Inter, Oswald and Montserrat are
   variable fonts, so one file covers every weight. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/oswald-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-latin-500-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/orbitron-latin-400-normal.woff2") format("woff2");
}

/* --- Design tokens ------------------------------------------------------ */
:root {
    /* Colours as used in the Figma file. */
    --c-black: #101010;
    --c-yellow: #eab811; /* first design; kept for the Biker Hero headline */
    --c-green: #028150; /* TBR Final Flow accent */
    --c-white: #ffffff;
    --c-grey-900: #242424; /* cards, form panel */
    --c-grey-800: #373737; /* search field */
    --c-grey-700: #414141; /* form inputs */
    --c-grey-600: #474747; /* footer rule and legal text */
    --c-grey-500: #5e5e5e; /* footer text */
    --c-grey-450: #6b6b6b; /* search placeholder */
    --c-grey-400: #898989; /* input placeholders, inactive dots */

    --c-bg: var(--c-black);
    --c-text: var(--c-white);
    --c-muted: var(--c-grey-400);
    --c-accent: var(--c-green);
    --c-on-accent: var(--c-white);
    --c-surface: var(--c-grey-900);
    --c-border: rgba(255, 255, 255, 0.12);

    --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-footer: "Poppins", var(--font-body);

    /* Fluid type: scales between the 393px mobile and 1440px desktop frames. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    --fs-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --fs-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
    --fs-3xl: clamp(2.25rem, 4vw + 1.2rem, 4rem);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-24: 6rem;

    --radius: 7px;
    --radius-lg: 13px;

    /* Desktop frames are 1440 wide with content from x=94 to x=1346. */
    --container: 1252px;
    --gutter: 28px;
    --header-h: 32px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    :root {
        --gutter: 2rem;
    }
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    min-height: 100dvh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--c-accent);
}

ul,
ol {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

/* --- Utilities ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
}

.skip-link:focus {
    top: var(--sp-2);
    color: var(--c-on-accent);
}

/* Buttons in the design are square yellow blocks with Oswald caps. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-6);
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn--primary {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--c-white);
    color: var(--c-black);
}

.btn--ghost {
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

/* --- Header ------------------------------------------------------------- */
/* Dark #242424 bar (TBR Final Flow navigation bar): 82px tall on desktop,
   32px on the 393px phone frame. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-grey-900);
    color: var(--c-white);
}

.site-header__bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    min-height: var(--header-h);
    margin-inline: auto;
    padding-inline: 23px 28px;
}

.site-header a:hover,
.site-header a:focus-visible,
.site-header button:hover {
    color: var(--c-white);
    opacity: 0.7;
}

.site-header :focus-visible {
    outline-color: var(--c-white);
}

.site-header__logo {
    flex-shrink: 0;
    margin-right: auto;
}

.site-header__logo img {
    width: 47px;
    height: 24px;
    object-fit: contain;
}

/* Desktop nav and the inline auth links are hidden until there is room. */
.site-nav,
.site-header__auth {
    display: none;
}

/* The icon is 17x18 in the design; the button around it is a bigger target. */
.site-header__toggle {
    display: grid;
    place-items: center;
    width: 33px;
    height: 32px;
    margin-right: -8px;
}

.site-header__burger {
    width: 17px;
    height: 18px;
}

/* Detail pages: the yellow bar carries only "< Kembali". */
.site-header__back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.site-header__back-icon {
    width: 11px;
    height: 14px;
}

@media (min-width: 1100px) {
    .site-header--back .site-header__bar {
        min-height: 71px;
        padding-left: 99px;
    }

    .site-header__back {
        gap: 33px;
        font-size: 32.6px;
    }

    .site-header__back-icon {
        width: 23px;
        height: 29px;
    }
}

/* --- Chat button -------------------------------------------------------- */
/* Fixed to the window, so it stays put while the page scrolls. Sits under
   the mobile menu and any open pop-up. */
.chat-button {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: block;
    width: 48px;
    transition: transform 0.2s var(--ease);
}

.chat-button:hover,
.chat-button:focus-visible {
    transform: scale(1.06);
}

.chat-button img {
    width: 100%;
    height: auto;
}

/* Standard chat-widget size: 48px on phones, 60px from tablets up. */
@media (min-width: 768px) {
    .chat-button {
        right: 24px;
        bottom: 24px;
        width: 60px;
    }
}

/* --- Mobile nav --------------------------------------------------------- */
/* The open menu is a yellow panel over the header with its own logo and a
   black close box (Figma "Home Page - Nav Bar Drop Down - Mobile"). */
.mobile-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    max-height: 100dvh;
    padding: 14px 28px 34px;
    background: var(--c-grey-900);
    color: var(--c-white);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 0 100vmax rgba(16, 16, 16, 0.6);
}

.mobile-nav[hidden] {
    display: none;
}

.mobile-nav__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 21px -7px;
}

.mobile-nav__logo img {
    width: 74px;
    height: 38px;
    object-fit: contain;
}

.mobile-nav__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 6px -8px 0 0;
}

.mobile-nav__close-icon {
    width: 16px;
    height: 16px;
}

.mobile-nav__list > li + li {
    margin-top: 41px;
}

.mobile-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 24px;
    text-transform: uppercase;
    text-align: left;
}

.mobile-nav__chevron {
    width: 30px;
    height: 30px;
    margin-block: -3px;
    transform: rotate(180deg);
    transition: transform 0.2s var(--ease);
}

[aria-expanded="true"] > .mobile-nav__chevron {
    transform: none;
}

.mobile-nav__submenu {
    margin-top: 7px;
    background: var(--c-grey-700);
}

.mobile-nav__submenu[hidden] {
    display: none;
}

.mobile-nav__submenu a {
    display: block;
    padding: 0 21px;
    color: var(--c-white);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 31.5px;
    text-transform: uppercase;
}

.mobile-nav__submenu a:hover,
.mobile-nav__submenu a:focus-visible,
.mobile-nav__submenu a[aria-current] {
    background: var(--c-accent);
    color: var(--c-on-accent);
    opacity: 1;
}

.mobile-nav__auth {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.6em;
    margin-top: 44px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 24px;
    text-transform: uppercase;
}

.mobile-nav__cta {
    font-weight: 900;
}

.mobile-nav__auth .site-header__logout button {
    font-weight: 600;
    letter-spacing: inherit;
    text-transform: uppercase;
}

@media (min-width: 1100px) {
    :root {
        --header-h: 82px;
    }

    .site-header__toggle,
    .mobile-nav {
        display: none;
    }

    .site-nav,
    .site-header__auth {
        display: block;
    }

    /* At 1440 wide: logo at x=80, first link at x=354, 41px between links,
       auth links ending at x=1346. Everything tightens on narrower screens. */
    .site-header__bar {
        gap: clamp(16px, 2.85vw, 41px);
        padding-inline: clamp(24px, 5.56vw, 80px) clamp(24px, 6.53vw, 94px);
    }

    .site-header__logo {
        margin-right: clamp(0px, 7.5vw, 108px);
    }

    .site-header__logo img {
        width: 125px;
        height: 63px;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2.85vw, 41px);
    }

    .site-nav__item {
        position: relative;
    }

    .site-nav__link {
        display: block;
        padding: 8px 0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .site-nav__link.is-active {
        font-weight: 900;
    }

    .site-nav__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 180px;
        background: var(--c-grey-700);
        box-shadow: 0 8px 24px rgba(16, 16, 16, 0.25);
        opacity: 0;
        transform: translateY(8px);
        visibility: hidden;
        transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    }

    .site-nav__item:hover .site-nav__submenu,
    .site-nav__item:focus-within .site-nav__submenu {
        opacity: 1;
        transform: none;
        visibility: visible;
    }

    .site-nav__submenu a {
        display: block;
        padding: 0 21px;
        color: var(--c-white);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 31.5px;
        text-transform: uppercase;
    }

    .site-nav__submenu a:hover,
    .site-nav__submenu a:focus-visible {
        background: var(--c-accent);
        color: var(--c-on-accent);
        opacity: 1;
    }

    .site-header__auth {
        display: flex;
        align-items: center;
        gap: 0.5em;
        margin-left: auto;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.25;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* Final Flow III: a grey pill. */
    .site-header__auth-link--cta {
        padding: 3px 6px;
        background: var(--c-grey-700);
        font-weight: 900;
    }

    .site-header__logout button {
        font-weight: 600;
        letter-spacing: inherit;
        text-transform: uppercase;
    }
}

/* --- Footer ------------------------------------------------------------- */
/* Poppins in greys, as in the Figma footer. Phone: logo row, blurb, icon
   row, links on one line, legal. Desktop: three columns over a thin rule. */
.site-footer {
    margin-top: 0;
    background: var(--c-grey-900);
    color: var(--c-white);
    font-family: var(--font-footer);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--c-white);
    text-decoration: underline;
}

/* TBR Final Flow III: brand | Navigasi | Sokongan | social icons, then the
   legal line. Phones stack them. */
.site-footer__inner {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: calc(1252px + 64px);
    margin-inline: auto;
    padding: 32px 28px 28px;
}

.site-footer__lockup {
    display: flex;
    align-items: center;
    gap: 9px;
}

.site-footer__logo {
    width: 80px;
    height: 33px;
    object-fit: contain;
}

.site-footer__x {
    color: var(--c-white);
    font-family: "Orbitron", var(--font-body);
    font-size: 16px;
}

.site-footer__logo-rk {
    width: 44px;
    height: 45px;
    object-fit: contain;
}

.site-footer__partnership {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.site-footer__company {
    margin-top: 16px;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
}

.site-footer__reg,
.site-footer__address {
    font-size: 10px;
    font-style: normal;
    line-height: 1.45;
}

.site-footer__address {
    margin-top: 12px;
}

.site-footer__heading {
    margin-bottom: 14px;
    color: var(--c-grey-400);
    font-family: var(--font-footer);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-footer__heading--social {
    margin-bottom: 6px;
    text-transform: none;
}

.site-footer__nav ul {
    display: grid;
    gap: 14px;
}

.site-footer__nav a {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.site-footer__socials {
    display: grid;
    align-content: start;
    gap: 18px;
}

.site-footer__social-icons {
    display: flex;
    gap: 6px;
}

.site-footer__social-icons a,
.site-footer__icon {
    display: block;
    color: var(--c-white);
}

.site-footer__social-icons .icon {
    display: block;
    width: 16px;
    height: 16px;
}

.site-footer__legal {
    padding-top: 10px;
    border-top: 1px solid var(--c-grey-600);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 426fr 334fr 317fr minmax(175px, auto);
        gap: 0 24px;
        padding: 117px 32px 66px;
    }

    .site-footer__lockup {
        gap: 13px;
    }

    .site-footer__logo {
        width: 102px;
        height: 42px;
    }

    .site-footer__x {
        font-size: 20px;
    }

    .site-footer__logo-rk {
        width: 55px;
        height: 56px;
    }

    .site-footer__partnership {
        margin-top: 25px;
        font-size: 14px;
        line-height: 20.6px;
    }

    .site-footer__company {
        margin-top: 24px;
        font-size: 12px;
        line-height: 1.2;
    }

    .site-footer__reg,
    .site-footer__address {
        font-size: 12px;
        line-height: 1.35;
    }

    .site-footer__address {
        margin-top: 24px;
    }

    .site-footer__heading {
        margin-bottom: 24px;
        font-size: 15.9px;
    }

    .site-footer__heading--social {
        margin-bottom: 8px;
    }

    .site-footer__nav ul {
        gap: 22px;
    }

    .site-footer__nav a {
        font-size: 14px;
    }

    .site-footer__socials {
        gap: 26px;
    }

    .site-footer__legal {
        grid-column: 1 / -1;
        margin-top: 50px;
        padding-top: 11px;
        font-size: 12.7px;
        line-height: 19.5px;
    }
}

/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- Icons -------------------------------------------------------------- */
/* fill: none by default; the heart symbol inherits it so a liked heart can fill. */
.icon {
    display: inline-block;
    flex-shrink: 0;
    fill: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
}

.icon--sm {
    width: 1em;
    height: 1em;
}

.icon--xl {
    width: 3.5rem;
    height: 3.5rem;
}

/* --- Layout helpers ----------------------------------------------------- */
.section {
    padding-block: var(--sp-12);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--sp-16);
    }
}

/* --- Flash messages ----------------------------------------------------- */
.flash {
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-6);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius);
    background: var(--c-surface);
    font-weight: 600;
}

.flash--error {
    border-left-color: #ff5a5a;
}

/* --- Section heading ---------------------------------------------------- */
/* A yellow label chip over a big white Oswald title. */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: 23px;
}

/* Logo badge in place of the green eyebrow (Pangkal Bara, Pit Stop, Biker Hero). */
.section-heading--badge {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.section-heading__badge {
    flex-shrink: 0;
    width: 64px;
    height: auto;
}

@media (min-width: 768px) {
    .section-heading--badge {
        gap: 12px;
    }

    .section-heading__badge {
        width: 111px;
    }
}

.section-heading__eyebrow {
    display: flex;
}

.section-heading__eyebrow span {
    display: inline-block;
    padding: 0 7px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 20px;
    text-transform: capitalize;
}

.section-heading__title {
    margin-top: 7px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 31px;
    text-wrap: wrap;
}

h1.section-heading__title {
    font-size: 30px;
}

.section-heading__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .section-heading {
        margin-bottom: 43px;
    }

    .section-heading__eyebrow {
    display: flex;
}

.section-heading__eyebrow span {
        padding: 0 13px;
        font-size: 22px;
        line-height: 36px;
    }

    .section-heading__title,
    h1.section-heading__title {
        margin-top: 8px;
        font-size: 54.6px;
        line-height: 56.4px;
    }
}

/* --- Tabs & filter chips ------------------------------------------------ */
/* Plain uppercase words; the current one sits on a yellow block. Both
   scroll sideways on narrow screens instead of wrapping. */
.tabs,
.chips {
    margin-bottom: 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar,
.chips::-webkit-scrollbar {
    display: none;
}

.tabs__list,
.chips__list {
    display: flex;
    align-items: center;
    width: max-content;
}

.tabs__list {
    gap: 9px;
}

.chips__list {
    gap: 7px;
}

.tabs__link,
.chip {
    display: block;
    color: var(--c-white);
    font-size: 10px;
    font-weight: 600;
    line-height: 18.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabs__link {
    padding: 0 10px;
}

.chip {
    padding: 0 4px;
}

.tabs__link.is-active,
.chip.is-active {
    background: linear-gradient(var(--c-accent), var(--c-accent)) center / 100% 18px no-repeat;
    color: var(--c-on-accent);
}

.chip.is-active {
    background-size: 100% 13px;
}

.tabs__link:hover,
.chip:hover {
    color: var(--c-white);
}

.tabs__link.is-active:hover,
.chip.is-active:hover {
    color: var(--c-on-accent);
}

@media (min-width: 768px) {
    .tabs {
        margin-bottom: 34px;
    }

    .chips {
        margin-bottom: 41px;
    }

    .tabs__list {
        gap: 12px;
    }

    .chips__list {
        gap: 25px;
    }

    .tabs__link,
    .chip {
        font-size: 20px;
        line-height: 32.4px;
    }

    .tabs__link {
        padding: 0 23px;
    }

    .chip {
        padding: 0 7px;
    }

    .tabs__link.is-active {
        background-size: 100% 23px;
    }

    .chip.is-active {
        background-size: 100% 22px;
    }
}

/* --- Search ------------------------------------------------------------- */
.search-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 272px;
    margin-bottom: 25px;
    border-radius: 8px;
    background: var(--c-grey-800);
}

.search-form:focus-within {
    outline: 1px solid var(--c-white);
}

.search-form__input {
    flex: 1;
    min-width: 0;
    min-height: 24px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--c-white);
    font-size: 9px;
    line-height: 1;
}

.search-form__input::placeholder {
    color: var(--c-grey-450);
}

.search-form__input:focus {
    outline: none;
}

.search-form__button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 24px;
    color: var(--c-grey-450);
}

.search-form__icon {
    width: 15px;
    height: 15px;
}

@media (min-width: 768px) {
    .search-form {
        max-width: 569px;
        margin-bottom: 37px;
        border-radius: 14.3px;
    }

    .search-form__input {
        min-height: 43px;
        padding: 0 28px;
        font-size: 16.13px;
    }

    .search-form__button {
        width: 83px;
        height: 43px;
    }

    .search-form__icon {
        width: 27px;
        height: 27px;
    }
}

/* --- Cards -------------------------------------------------------------- */
/* Photo on top, #242424 body: a yellow chip button, an Oswald title, a
   yellow place line and a row of yellow icon actions. Sized in em so the
   phone card is the desktop card at two thirds, as in the design. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 5px;
    background: var(--c-grey-900);
    font-size: 10.8px;
}

/* The body overlaps the photo's bottom 4px in the design; crop it instead. */
.card__media {
    position: relative;
    display: block;
    aspect-ratio: 285 / 185;
    overflow: hidden;
    background: var(--c-black);
}

.card--place .card__media {
    aspect-ratio: 285 / 178;
}

.card__media--video {
    aspect-ratio: 16 / 9;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease);
}

.card:hover .card__media img {
    transform: scale(1.03);
}

/* Video tiles: the thumbnail under a 74% black layer and a yellow play ring. */
.card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.74);
    color: var(--c-accent);
    transition: background-color 0.2s var(--ease);
}

.card__play-icon {
    width: 20%;
    height: auto;
    aspect-ratio: 1;
}

.card__media--video:hover .card__play,
.card__media--video:focus-visible .card__play {
    background: rgba(0, 0, 0, 0.5);
}

.card--video {
    border-radius: 0;
}

.card--video .card__media--video {
    aspect-ratio: 385 / 208;
}

.card--video .card__body {
    min-height: 7em;
    padding: 0.8em 1.75em 1.2em;
}

.card--video .card__title {
    font-size: 1.25em;
    line-height: 1.34;
}

.card--video .card__actions--start {
    padding-top: 1.5em;
}

.card__badge {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    padding: 0 0.5em;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.8;
    text-transform: uppercase;
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-height: 11.3em;
    padding: 1.2em 0.85em 0.6em;
}

.card--event .card__body {
    padding-top: 1.9em;
}

/* "Ready Nak Ride? Klik Sini! ▶" / "Click to View Location ▶" */
.card__chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.67em;
    min-height: 1.42em;
    margin-bottom: 0.9em;
    padding: 0 1em;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.42;
    text-transform: capitalize;
    white-space: nowrap;
}

.card__chip:hover,
.card__chip:focus-visible {
    background: var(--c-white);
    color: var(--c-black);
}

.card__chip-icon {
    width: 0.69em;
    height: 0.75em;
    color: currentColor; /* white like the label; black on hover */
}

.card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.39em;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card__title a:hover {
    color: inherit;
}

/* Stretches the title link over the whole card: one big tap target. */
.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card__date {
    font-family: var(--font-display);
    font-size: 1.02em;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
}

.card__place {
    margin-top: 0.35em;
    color: var(--c-white);
    font-size: 0.83em;
    line-height: 1.2;
    text-transform: capitalize;
}

.card__actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.4em;
    align-self: flex-end;
    margin-top: auto;
    padding-top: 0.6em;
}

.card__actions--start {
    align-self: flex-start;
    padding-top: 1em;
}

.card__action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 1.8em;
    padding: 0;
    color: var(--c-white);
    font-size: 0.91em;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.card__action-button:hover,
.card__action-button:focus-visible {
    color: var(--c-white);
}

.card__action-icon {
    width: 1.6em;
    height: 1.46em;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 0.35em;
    color: var(--c-white);
    font-size: 0.83em;
}

.card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.5em;
    color: var(--c-white);
    font-size: 0.83em;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
    .card {
        border-radius: 7.4px;
        font-size: 16px;
    }

    .card__body {
        min-height: 181px;
        padding: 19px 18px 18px;
    }

    .card--event .card__body {
        padding: 35px 18px 10px;
    }

    .card__chip {
        gap: 8px;
        min-height: 17px;
        margin-bottom: 10px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 17px;
    }

    .card--event .card__chip {
        margin-bottom: 13px;
    }

    .card__chip-icon {
        width: 8px;
        height: 9px;
    }

    .card__title {
        font-size: 24px;
        line-height: 26.7px;
    }

    .card--event .card__title {
        line-height: 25px;
    }

    .card--place .card__title {
        line-height: 26px;
    }

    .card__date {
        font-size: 16px;
        line-height: 25px;
    }

    .card__place {
        margin-top: 7px;
        font-size: 14px;
        line-height: 13px;
    }

    .card--event .card__place {
        margin-top: 8px;
    }

    .card__actions {
        gap: 22px;
        padding-top: 5px;
    }

    .card__actions--start {
        padding-top: 16px;
    }

    .card__action-button {
        gap: 5px;
        min-height: 29px;
        font-size: 14px;
    }

    .card__action-icon {
        width: 25px;
        height: 23px;
    }

    .card__meta,
    .card__excerpt {
        font-size: 14px;
    }
}

/* --- Likes / views row -------------------------------------------------- */
.counts {
    display: flex;
    gap: 1.4em;
    margin-top: 0.9em;
    color: var(--c-white);
    font-size: 0.91em;
    font-weight: 500;
}

.counts__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

/* --- Pagination --------------------------------------------------------- */
.pagination {
    margin-top: var(--sp-12);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.pagination__link,
.pagination__gap {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--sp-2);
    border-radius: 999px;
    font-weight: 600;
}

.pagination__link {
    border: 1px solid var(--c-border);
}

.pagination__link.is-active {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.pagination__link.is-disabled {
    opacity: 0.35;
}

/* --- Empty state -------------------------------------------------------- */
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sp-6);
    padding: var(--sp-16) var(--sp-4);
    border-radius: 15px;
    background: var(--c-grey-900);
    color: var(--c-grey-400);
    text-align: center;
}

/* --- Forms -------------------------------------------------------------- */
/* The design's form look: yellow bold caps labels, square #414141 fields with
   grey placeholders, a solid yellow submit and a yellow-outline alternative. */
.form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 2px;
}

.field__label {
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}

.field__required {
    color: inherit;
}

/* 16px text keeps iOS Safari from zooming into the field on focus. */
.field__control {
    width: 100%;
    min-height: 42px;
    padding: 3px 19px;
    border: 0;
    border-radius: 0;
    background: var(--c-grey-700);
    color: var(--c-white);
    font-size: 16px;
    font-weight: 300;
    transition: outline-color 0.2s var(--ease);
}

.field__control::placeholder {
    color: var(--c-grey-400);
}

.field__control:focus {
    outline: 1px solid var(--c-white);
}

select.field__control:invalid {
    color: var(--c-grey-400);
}

select.field__control option {
    background: var(--c-grey-700);
    color: var(--c-white);
}

.field--invalid .field__control {
    outline: 1px solid #ff5a5a;
}

.field__hint {
    margin-top: 2px;
    color: var(--c-grey-400);
    font-size: 12px;
}

.field__error {
    margin-top: 2px;
    color: #ff8a8a;
    font-size: 13px;
}

.field__select {
    position: relative;
}

.field__select select {
    padding-right: 48px;
    appearance: none;
}

.field__select-icon {
    position: absolute;
    top: 50%;
    right: 19px;
    color: var(--c-grey-400);
    transform: translateY(-50%);
    pointer-events: none;
}

.field--checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.field--checkbox .field__label {
    flex: 1;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
}

.field--checkbox .field__error {
    flex-basis: 100%;
}

/* A thin yellow square; ticked, a yellow tick is drawn past its corner. */
.field__checkbox {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 0 3px 0 0;
    border: 0.9px solid var(--c-white);
    border-radius: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.field__checkbox:checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M1.8 6.2l4.1 4.2L14.6.6' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E") -1px -3px / 15px 13px no-repeat;
}

.field__checkbox:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
}

/* Form buttons: Inter ExtraBold, 54px on desktop. */
.form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 3px 19px;
    border: 1px solid var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.form-button:hover,
.form-button:focus-visible {
    border-color: var(--c-white);
    background: var(--c-white);
    color: var(--c-grey-900);
}

.form-button--outline {
    background: var(--c-grey-900);
    color: var(--c-white);
}

@media (min-width: 768px) {
    .form-button {
        min-height: 54px;
        font-size: 19.1px;
    }
}

/* ==========================================================================
   Page sections (after components, so they can adjust them)
   ========================================================================== */

/* --- Home: hero --------------------------------------------------------- */
/* Anchors such as /#daftar land below the sticky header, not under it. */
[id] {
    scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

/* Phone (393 frame): a 250px photo band with the brand, tagline and rider,
   then the stat boxes and the sign-up card. Desktop (1440 frame): one 855px
   stage with the brand, stats, rider and card placed as in Figma.
   No stacking context here: the photo sits under the yellow band that
   follows, while the chat bubble sits on top of it. */
.hero {
    position: relative;
}

.hero__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 250px;
    overflow: hidden;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s var(--ease);
}

.hero__slide.is-active {
    opacity: 1;
}

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

.hero__grid {
    position: relative;
}

/* Slides stack in one grid cell; the active one fades in. The layers stay
   unpositioned so their absolute parts (desktop) place against .hero__grid. */
.hero__layers {
    display: grid;
}

.hero__layer {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 0s linear 1s;
}

.hero__layer.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s var(--ease);
}

/* Headline slides (Biker Hero 01): big yellow title with a cut-out photo
   standing in front of it, its feet fading into the dark backdrop. */
.hero__layer--headline .hero__intro {
    padding-top: 17px;
}

.hero__headline {
    position: relative;
    left: -5px;
    width: min-content;
    color: var(--c-white); /* white in the TBR Final Flow landing page */
    font-family: var(--font-display);
    font-size: 57px;
    font-weight: 700;
    line-height: 61px;
    text-shadow: 8px 4px 14px rgb(0 0 0 / 25%);
    text-transform: uppercase;
}

@media (max-width: 359px) {
    .hero__headline {
        font-size: 46px;
        line-height: 50px;
    }
}

.hero__layer--headline .hero__rider {
    top: 2px;
    right: 14px;
    width: 221px;
    height: 237px;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: linear-gradient(#000 92%, rgb(0 0 0 / 72%));
    mask-image: linear-gradient(#000 92%, rgb(0 0 0 / 72%));
}

@media (min-width: 768px) and (max-width: 1099px) {
    .hero__layer--headline .hero__intro {
        padding-top: 40px;
    }

    .hero__headline {
        font-size: 100px;
        line-height: 101px;
    }

    .hero__layer--headline .hero__rider {
        top: 10px;
        right: var(--gutter);
        width: 360px;
        height: 410px;
    }
}

@media (min-width: 1100px) {
    /* Sized to clear the stats at y=471 in the shorter Final Flow III hero. */
    .hero__layer--headline .hero__intro {
        top: 56px;
    }

    .hero__headline {
        left: 0;
        font-size: 112px;
        line-height: 113px;
    }

    /* Scaled to the shorter Final Flow III hero (was 646x742 at y=149). */
    .hero__layer--headline .hero__rider {
        top: 93px;
        right: auto;
        left: calc(var(--gutter) + 298px);
        width: 522px;
        height: 600px;
        -webkit-mask-image: linear-gradient(#000 77%, rgb(0 0 0 / 19%));
        mask-image: linear-gradient(#000 77%, rgb(0 0 0 / 19%));
    }
}

.hero__intro {
    min-height: 233px;
    padding-top: 60px;
}

.hero__brand {
    width: 147px;
    height: auto;
}

.hero__title {
    max-width: 163px;
    margin-top: 5px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.21;
    text-transform: none;
}

.hero__rider {
    position: absolute;
    top: 16px;
    right: calc(var(--gutter) + 8px);
    width: 151px;
    height: auto;
    pointer-events: none;
}

.hero__points {
    display: grid;
    gap: 1px;
    margin-top: 17px;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
}

.hero__points li {
    display: flex;
    align-items: center;
    gap: 13px;
}

.hero__point-icon {
    flex-shrink: 0;
    width: 14px;
    height: 13px;
    color: var(--c-white);
}

@media (min-width: 768px) and (max-width: 1099px) {
    .hero__backdrop {
        height: 420px;
    }

    .hero__intro {
        min-height: 400px;
        padding-top: 90px;
    }

    .hero__brand {
        width: 280px;
    }

    .hero__title {
        max-width: 260px;
        font-size: 16px;
    }

    .hero__rider {
        width: 230px;
    }
}

/* TBR Final Flow III (1440 frame, hero from y=82): 1454x724 backdrop, the
   logo at (70,146), tagline at (103,375), stats at (96,471), rider at
   (507,79), sign-up card 459 wide at y=110. */
@media (min-width: 1100px) {
    /* Taller than the Figma 693 so the points under the (longer) sign-up
       card clear the gathering band's torn edge. */
    .hero {
        height: 790px;
    }

    .hero__backdrop {
        height: 821px;
    }

    .hero__slide img {
        position: absolute;
        top: 0;
        left: 50%;
        width: max(100%, 1454px);
        max-width: none;
        transform: translateX(-50%);
    }

    .hero__grid {
        height: 100%;
    }

    .hero__intro {
        position: absolute;
        top: 146px;
        left: calc(var(--gutter) - 24px);
        min-height: 0;
        padding: 0;
    }

    .hero__brand {
        width: 492px;
    }

    /* The logo art has empty space under "ranger"; the tagline tucks into it. */
    .hero__title {
        max-width: 384px;
        margin: -21px 0 0 33px;
        font-size: 23.68px;
        line-height: 1.21;
    }

    /* The cut-out's export includes its soft shadow, 410 wide for a 357 rider. */
    .hero__rider {
        top: 53px;
        right: auto;
        left: calc(var(--gutter) + 387px);
        width: 410px;
    }

    .hero__points {
        gap: 0;
        margin-top: 26px;
        font-size: 14px;
        line-height: 22px;
    }

    .hero__points li {
        gap: 17px;
    }

    .hero__point-icon {
        width: 18px;
        height: 17px;
    }
}

/* Hero slide dots (Final Flow III): under the rider, centred. */
.hero__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
}

.hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-grey-400);
    cursor: pointer;
}

.hero__dot[aria-current="true"] {
    background: var(--c-accent);
}

@media (min-width: 1100px) {
    .hero__dots {
        position: absolute;
        top: 672px;
        left: 50%;
        z-index: 2;
        margin: 0;
        transform: translateX(-50%);
    }
}

/* --- Home: stats row ---------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin: 0 2px;
}

.stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    text-align: center;
}

.stats__value {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.stats__label {
    margin-top: -3px;
    font-family: "Montserrat", var(--font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.22;
    text-transform: uppercase;
}

@media (min-width: 1100px) {
    .stats {
        position: absolute;
        top: 471px;
        left: calc(var(--gutter) + 2px);
        grid-template-columns: 91px 89px 89px 91px;
        gap: 22px;
        margin: 0;
    }

    .stats__item {
        justify-content: flex-start;
        min-height: 98px;
        padding-top: 16px;
    }

    .stats__value {
        font-size: 40px;
        line-height: 1.075;
    }

    .stats__label {
        margin-top: 4px;
        font-size: 14px;
    }
}

/* --- Home: sign-up card ------------------------------------------------- */
/* #242424 panel with square #414141 fields and yellow labels. */
.hero__signup {
    margin-top: 13px;
}

.signup-card {
    padding: 15px 17px 16px 19px;
    border-radius: var(--radius-lg);
    background: var(--c-grey-900);
}

.signup-card__title {
    font-size: 30px;
    line-height: 1;
}

.signup-card__lead {
    margin-top: 12px;
    color: var(--c-white);
    font-size: 8px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.25;
}

.signup-card__form {
    display: grid;
    gap: 10px;
    margin-top: 11px;
}

.signup-card .field {
    gap: 0;
}

.signup-card .field__label {
    margin-bottom: -3px;
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 16px;
    text-transform: uppercase;
}

.signup-card .field__required {
    color: inherit;
}

.signup-card .field__control {
    min-height: 22px;
    padding: 1px 10px;
    border: 0;
    border-radius: 0;
    background: var(--c-grey-700);
    color: var(--c-white);
    font-size: 10px;
    font-weight: 300;
    line-height: 20px;
}

.signup-card .field__control::placeholder {
    color: var(--c-grey-400);
}

.signup-card .field__control:focus {
    outline: 1px solid var(--c-white);
}

.signup-card .field--invalid .field__control {
    outline: 1px solid #ff5a5a;
}

/* No chevron in the design; the empty (invalid) choice reads as a placeholder. */
.signup-card .field__select-icon {
    display: none;
}

.signup-card select.field__control:invalid {
    color: var(--c-grey-400);
}

.signup-card select.field__control option {
    color: var(--c-white);
    background: var(--c-grey-700);
}

.signup-card .field__error {
    margin-top: 4px;
    font-size: 11px;
}

.signup-card__consents {
    display: grid;
    gap: 6px;
    margin: 7px 0 0 15px;
    padding: 0;
    border: 0;
}

.signup-card .field--checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
}

.signup-card .field--checkbox .field__label {
    font-size: 8px;
    font-weight: 400;
    line-height: 11px;
    text-transform: none;
}

/* The design's tick box: a thin yellow square with a tick drawn past it. */
.signup-card .field__checkbox {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin: 0 2px 0 0;
    border: 0.9px solid var(--c-white);
    border-radius: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.signup-card .field__checkbox:checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M1.8 6.2l4.1 4.2L14.6.6' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E") -1px -3px / 15px 13px no-repeat;
    overflow: visible;
}

.signup-card .field__checkbox:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
}

.signup-card__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    margin-top: 6px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    transition: background-color 0.2s var(--ease);
}

.signup-card__submit:hover,
.signup-card__submit:focus-visible {
    background: var(--c-white);
    color: var(--c-grey-900);
}

.signup-card__login {
    margin-top: 2px;
    color: var(--c-white);
    font-size: 11px;
    text-align: center;
}

.signup-card__social {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signup-card__login a {
    font-weight: 700;
}

.signup-card__login a:hover,
.signup-card__login a:focus-visible {
    text-decoration: underline;
}

.signup-card__status {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--c-accent);
    background: rgba(2, 129, 80, 0.18);
    font-size: 14px;
    font-weight: 600;
}

.signup-card__status--error {
    border-left-color: #ff5a5a;
    background: rgba(255, 90, 90, 0.12);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .signup-card__lead {
        font-size: 12px;
    }

    .signup-card .field__label {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 21px;
    }

    .signup-card .field--checkbox .field__label {
        font-size: 12px;
        line-height: 14px;
    }

    .signup-card__submit {
        font-size: 14px;
    }
}

@media (min-width: 1100px) {
    /* TBR Final Flow III: 459 wide card at y=110 (x=852), radius 10. */
    .hero__signup {
        position: absolute;
        top: 110px;
        right: calc(var(--gutter) + 35px);
        /* Above the gathering band (z-index 1), whose torn top edge would
           otherwise cover "Log masuk" when error messages lengthen the card. */
        z-index: 2;
        width: 459px;
        margin: 0;
    }

    .signup-card {
        min-height: 494px;
        padding: 24px 41px 25px 33px;
        border-radius: 10px;
    }

    .signup-card__title {
        max-width: 362px;
        font-size: 40px;
        line-height: 1;
    }

    .signup-card__lead {
        margin-top: 10px;
        font-weight: 700;
    }

    .signup-card__form {
        gap: 10px;
        margin-top: 22px;
    }

    .signup-card .field__control {
        max-width: 385px;
        min-height: 28px;
        padding: 2px 13px;
        font-size: 14px;
        line-height: 24px;
    }

    .signup-card__consents {
        gap: 8px;
        margin: 7px 0 0 6px;
    }

    .signup-card .field--checkbox {
        gap: 12px;
    }

    .signup-card .field__checkbox {
        width: 12px;
        height: 12px;
        margin-right: 3px;
    }

    .signup-card__submit {
        max-width: 385px;
        min-height: 36px;
        margin-top: 2px;
    }

    .hero__signup .hero__points {
        margin-top: 18px;
        margin-left: 34px;
    }
}

/* --- Home: gathering band ----------------------------------------------- */
/* Dark #242424 band. Its torn top edge is part of the texture image; the
   black torn strip at the bottom is ripped-edge.svg. */
.gathering {
    position: relative;
    z-index: 1;
    margin-top: 11px;
    padding: 45px 0 70px;
    background: url("../img/texture-band.webp") center top / auto 100% no-repeat;
    color: var(--c-white);
    text-align: center;
}

.gathering::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    /* The SVG's shape ends at y=251 of 283; the transparent tail is cut. */
    aspect-ratio: 1440 / 251;
    background: url("../img/ripped-edge.svg?v=2") center top / 100% auto no-repeat;
    pointer-events: none;
}

.gathering > .container {
    position: relative;
    z-index: 1;
}

.gathering__title {
    font-size: 22px;
    line-height: 1.04;
    text-wrap: nowrap;
}

.gathering__highlight {
    display: block;
    width: fit-content;
    margin: 5px auto 0;
    padding: 8px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 30px;
    line-height: 0.99;
}

.gathering__features {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 308px;
    margin: 13px auto 0;
    text-align: left;
}

.gathering__feature {
    display: flex;
    align-items: center;
    filter: drop-shadow(4.5px 5.4px 2.8px rgba(0, 0, 0, 0.4));
}

.gathering__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    margin-right: -27px;
}

.gathering__icon img {
    width: 100%;
    height: 100%;
}

/* Up to 259px wide, as in the 393 frame; shrinks on narrower phones. */
.gathering__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 259px;
    min-height: 73px;
    padding: 8px 12px 8px 47px;
    border-radius: 6px;
    background: var(--c-grey-700);
}

.gathering__feature-title {
    color: var(--c-white);
    font-size: 15px;
    line-height: 1.4;
}

.gathering__feature p {
    margin-top: 4px;
    color: var(--c-white);
    font-size: 9px;
    line-height: 12px;
}

@media (min-width: 768px) {
    .gathering {
        min-height: 675px;
        padding: 130px 0 120px;
        background-size: 100% 652px;
    }

    /* The SVG carries 24px of drop-shadow above the torn shape. */
    .gathering::after {
        top: 510px;
        bottom: auto;
    }

    .gathering__title {
        font-size: 36px;
        line-height: 1.27;
    }

    .gathering__highlight {
        margin-top: 10px;
        padding: 13px 28px;
        font-size: 58px;
        line-height: 60px;
    }

    .gathering__features {
        width: fit-content;
        max-width: none;
        gap: 14px;
        margin-top: 44px;
    }

    .gathering__icon {
        width: 121px;
        height: 118px;
        margin-right: -64px;
    }

    .gathering__body {
        max-width: none;
        min-width: 380px;
        min-height: 104px;
        padding: 13px 22px 13px 86px;
        border-radius: 9.8px;
    }

    .gathering__feature:last-child .gathering__body {
        min-width: 412px;
        padding-left: 80px;
    }

    .gathering__feature-title {
        font-size: 24px;
        line-height: 1.08;
    }

    .gathering__feature p {
        max-width: 295px;
        margin-top: 9px;
        font-size: 14px;
        font-weight: 300;
        line-height: 18.8px;
    }
}

/* Side by side only where both cards fit (they need about 920px). */
@media (min-width: 1100px) {
    .gathering__features {
        grid-template-columns: auto auto;
    }
}

/* The hero's photo runs 81px under the band's torn top edge. */
@media (min-width: 1100px) {
    .gathering {
        margin-top: 0;
    }
}

/* --- Banner carousel ---------------------------------------------------- */
/* One 1064x378 slide at a time (337x230 on phones), dots underneath. */
.banner-carousel {
    width: calc(100% - var(--gutter) * 2);
    max-width: 1064px;
    margin: 64px auto 24px;
}

.banner-carousel--home {
    position: relative;
    z-index: 2;
    margin-top: 5px;
    margin-bottom: 0;
}

.banner-carousel__viewport {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.banner-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.banner-carousel__track::-webkit-scrollbar {
    display: none;
}

.banner-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.banner-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.banner-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-grey-400);
}

.banner-carousel__dot[aria-current="true"] {
    background: var(--c-accent);
}

@media (min-width: 768px) {
    .banner-carousel {
        margin-top: 97px;
        margin-bottom: 76px;
    }

    .banner-carousel--home {
        margin-top: 0;
        margin-bottom: 0;
    }

    .banner-carousel__viewport {
        border-radius: 23px;
    }

    .banner-carousel__dots {
        gap: 7px;
        margin-top: 23px;
    }

    .banner-carousel__dot {
        width: 11px;
        height: 11px;
    }
}

.promo-banner {
    display: flex;
    height: 100%;
    min-height: 230px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.promo-banner--artwork {
    display: block;
    background: #00d2d3;
}

.promo-banner--artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-banner--yellow {
    background: var(--c-grey-900);
    color: var(--c-white);
}

.promo-banner--teal {
    background: #197c39;
    color: var(--c-white);
}

.promo-banner--social {
    background: var(--c-grey-900);
    color: var(--c-white);
}

.promo-banner--social .promo-banner__title {
    max-width: 300px;
}

.promo-banner__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.promo-banner__social {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 8px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* The global a:hover turns text green, which vanished on these green buttons. */
.promo-banner__social:hover,
.promo-banner__social:focus-visible {
    color: var(--c-on-accent);
}

.promo-banner__social[href]:hover,
.promo-banner__social[href]:focus-visible {
    background: var(--c-white);
    color: var(--c-grey-900);
}

.promo-banner__social-icon {
    width: 12px;
    height: 12px;
}

@media (min-width: 768px) {
    .promo-banner__socials {
        gap: 9px;
        margin-top: 22px;
    }

    .promo-banner__social {
        min-height: 25px;
        padding: 0 9px;
        font-size: 14px;
    }

    .promo-banner__social-icon {
        width: 15px;
        height: 15px;
    }
}

.promo-banner__media {
    position: relative;
    flex: 0 0 49.5%;
}

.promo-banner--teal .promo-banner__media {
    flex-basis: 44.2%;
}

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

/* Teal banner: the photo fades into the background colour. In Figma the fade
   runs x=405..590 of the 677px photo, then solid teal to the photo's edge. */
.promo-banner--teal .promo-banner__media::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 40.2%;
    background: linear-gradient(90deg, rgba(25, 124, 57, 0) 0%, #197c39 68%, #197c39 100%);
}

.promo-banner__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 13px 15px 14px;
}

.promo-banner--teal .promo-banner__body {
    padding-top: 17px;
    padding-right: 40px;
    padding-left: 8px;
}

/* Plain wrapping: the global balanced wrap breaks the lines differently
   from the design ("Moh Lepak Sama / Geng The Bikers / Ranger"). */
.promo-banner__title {
    font-size: 15px;
    line-height: 1.2;
    text-wrap: wrap;
}

.promo-banner__text {
    margin-top: 13px;
    font-size: 10px;
    line-height: 13px;
}

.promo-banner__cta {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-top: auto;
    padding: 0 11px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
}

.promo-banner--yellow .promo-banner__cta {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.promo-banner--teal .promo-banner__cta {
    background: #af1712;
    color: var(--c-white);
}

/* Hover keeps each scheme's text colour: "inherit" here picked up the
   banner's black text and hid the label on the black button. */
.promo-banner--yellow .promo-banner__cta:hover,
.promo-banner--yellow .promo-banner__cta:focus-visible {
    background: var(--c-white);
    color: var(--c-grey-900);
}

.promo-banner--teal .promo-banner__cta:hover,
.promo-banner--teal .promo-banner__cta:focus-visible {
    background: #8c120e;
    color: var(--c-white);
}

@media (min-width: 768px) {
    .promo-banner {
        min-height: 378px;
        border-radius: 23px;
    }

    .promo-banner__media {
        flex-basis: 54.4%;
    }

    .promo-banner--teal .promo-banner__media {
        flex-basis: 63.6%;
    }

    .promo-banner--teal .promo-banner__media::after {
        background: linear-gradient(90deg, rgba(25, 124, 57, 0) 0%, #197c39 68%, #197c39 100%);
    }

    .promo-banner__body {
        padding: 26px 36px 32px 41px;
    }

    .promo-banner--teal .promo-banner__body {
        margin-left: -87px;
        padding: 55px 59px 32px 0;
    }

    .promo-banner__title {
        font-size: 45px;
        line-height: 50px;
    }

    .promo-banner__text {
        margin-top: 25px;
        font-size: 14px;
        line-height: 20px;
    }

    .promo-banner--teal .promo-banner__text {
        margin-top: 31px;
    }

    .promo-banner__cta {
        min-height: 38px;
        padding: 0 22px;
        font-size: 20px;
        line-height: 50px;
    }
}

/* --- Home sections: spacing between them, from the Figma frames --------- */
.section--highlights {
    padding: 17px 0 0;
}

.section--port-rider {
    padding: 45px 0 0;
}

.section--feature {
    padding: 55px 0 0;
}

.section--feature + .section--feature {
    padding: 40px 0 48px;
}

@media (min-width: 768px) {
    .section--highlights {
        padding-top: 51px;
    }

    .section--port-rider {
        padding-top: 46px;
    }

    .section--feature {
        padding-top: 52px;
    }

    .section--feature .section-heading {
        margin-bottom: 34px;
    }

    .section--feature + .section--feature .section-heading {
        margin-bottom: 45px;
    }

    /* Figma: 98px from the Panas Atas Jalan card down to the footer. */
    .section--feature + .section--feature {
        padding: 98px 0;
    }
}

/* --- Rail: card carousel ------------------------------------------------- */
/* Phone: one row of 192px cards that swipes, arrows either side of dots.
   Desktop: two rows of four 285px cards per page, arrows bottom right. */
.rail__track {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rail__page {
    display: contents;
}

.rail__page > * {
    flex: 0 0 192px;
    scroll-snap-align: start;
}

.rail__track::-webkit-scrollbar {
    display: none;
}

.rail__track:focus-visible {
    outline-offset: 4px;
}

.rail__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 41px;
    margin-top: 21px;
}

.rail__arrow {
    display: block;
    width: 43px;
    padding: 0;
    border-radius: 50%;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.rail__arrow:hover:not(:disabled) {
    transform: scale(1.06);
}

.rail__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.rail__arrow img {
    width: 100%;
    height: auto;
}

.rail__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    min-width: 0;
}

/* Long lists (e.g. 24 Port Rider cards, one dot each on phones): tighter. */
@media (max-width: 767px) {
    .rail__nav {
        gap: 16px;
    }

    .rail__arrow {
        flex-shrink: 0;
    }
}

.rail__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-grey-400);
}

.rail__dot[aria-current="true"] {
    background: var(--c-accent);
}

/* Phones: no dots or arrows when everything fits. The desktop design always
   shows the arrows, so they stay (disabled) there. */
.rail:not(.is-paged) .rail__nav {
    display: none;
}

@media (min-width: 768px) {
    .rail:not(.is-paged) .rail__nav {
        display: flex;
    }
}

@media (min-width: 768px) {
    .rail__track {
        gap: 35px;
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    .rail__page {
        display: grid;
        flex: 0 0 100%;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 35px;
        scroll-snap-align: start;
    }

    .section--port-rider .rail__page {
        row-gap: 35px;
    }

    .rail--rewards .rail__page {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 28px;
    }

    .rail__page > * {
        scroll-snap-align: none;
    }

    .rail__nav {
        justify-content: flex-end;
        gap: 19px;
        margin-top: 51px;
    }

    .section--port-rider .rail__nav {
        margin-top: 36px;
    }

    .rail__arrow {
        width: 60px;
    }

    .rail__dots {
        display: none;
    }
}

/* Older listing grids (not yet carousels) use the design's card sizes. */
.grid {
    display: grid;
    gap: 20px 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}

.grid--videos {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

@media (min-width: 768px) {
    .grid {
        gap: 35px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    }
}

@media (min-width: 1100px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--videos {
        grid-template-columns: repeat(3, 1fr);
        gap: 75px 43px;
    }
}

/* --- Feature block (image + panel) --------------------------------------- */
.feature {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--c-grey-900);
}

/* contain: the photo fills the row instead of setting its height. */
.feature__media {
    aspect-ratio: 335 / 264;
    background: var(--c-black);
    contain: size;
}

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

/* Hall of Fame: the "BIKER HERO 01" lettering runs down the photo's left
   edge, so trim the right side instead when the frame is narrower. */
.feature:not(.feature--reverse) .feature__media img {
    object-position: left center;
}

.feature__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 18px;
}

/* Heart and share circles; on phones they sit on the photo's bottom edge. */
.feature__badges {
    position: absolute;
    top: calc(100% * 0 + (100vw - var(--gutter) * 2) * 264 / 335 - 23px);
    right: 17px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.feature__circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2.3px solid var(--c-white);
    border-radius: 50%;
    background: var(--c-grey-900);
    color: var(--c-white);
}

button.feature__circle:hover,
button.feature__circle:focus-visible {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.feature__circle-icon {
    width: 17px;
    height: 16px;
}

.feature__count {
    position: absolute;
    top: -4px;
    right: -9px;
    min-width: 24px;
    padding: 0 3px;
    border-radius: 25px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 9px;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
}

.feature__title {
    font-size: 15px;
    line-height: 1;
}

.feature__text {
    margin-top: 12px;
    font-size: 9px;
    line-height: 12px;
}

.feature__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 19px;
    margin-top: 20px;
    padding: 0 9px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 8.4px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.feature__link:hover,
.feature__link:focus-visible {
    background: var(--c-white);
    color: var(--c-black);
}

.feature__link-icon {
    width: 5px;
    height: 6px;
    color: currentColor; /* white like the label; black on hover */
}

@media (min-width: 768px) {
    .feature {
        grid-template-columns: 614fr 638fr;
        min-height: 535px;
    }

    .feature--reverse {
        grid-template-columns: 636fr 616fr;
    }

    .feature--reverse .feature__media {
        order: 2;
    }

    .feature__media {
        aspect-ratio: auto;
    }

    .feature__card {
        justify-content: flex-end;
        padding: 40px 40px 29px 63px;
    }

    .feature__badges {
        position: static;
        gap: 5px;
        margin-bottom: 21px;
    }

    .feature__circle {
        width: 66px;
        height: 66px;
        border-width: 4px;
    }

    .feature__circle-icon {
        width: 30px;
        height: 27px;
    }

    .feature__circle--share .feature__circle-icon {
        width: 28px;
        height: 26px;
        stroke-width: 1.7;
    }

    .feature__count {
        top: -8px;
        right: -14px;
        min-width: 42px;
        padding: 0 6px;
        font-size: 15.7px;
        line-height: 21px;
    }

    .feature__title {
        font-size: 26px;
        line-height: 23px;
    }

    .feature__text {
        max-width: 497px;
        margin-top: 30px;
        font-size: 16px;
        line-height: 21px;
    }

    .feature__link {
        gap: 10px;
        min-height: 33px;
        margin-top: 35px;
        padding: 0 15px;
        font-size: 22px;
        line-height: 1;
    }

    .feature__link-icon {
        width: 10px;
        height: 11px;
    }
}

/* --- Aktiviti TBR pages (Event, Galeri, Peraduan, Pemenang) -------------- */
.section--hub {
    padding: 38px 0 0;
}

.section--hub + .banner-carousel {
    margin-top: 50px;
}

/* Phone: title sits 4px under the chip, then 12px to the tabs. */
.section--hub .section-heading {
    margin-bottom: 12px;
}

.section--hub .section-heading__title {
    margin-top: 4px;
}

.tabs--hub {
    margin-bottom: 37px;
}

/* Hub tabs: a touch smaller than the home ones, on a taller #f3bb30 block. */
.tabs--hub .tabs__list {
    gap: 9px;
}

.tabs--hub .tabs__link {
    padding: 0 5px;
}

.tabs--hub .tabs__link.is-active {
    background: linear-gradient(var(--c-accent), var(--c-accent)) center / 100% 18px no-repeat;
    color: var(--c-on-accent);
}

@media (min-width: 768px) {
    .section--hub {
        padding-top: 75px;
    }

    .section--hub .section-heading {
        margin-bottom: 39px;
    }

    .section--hub .section-heading__title {
        margin-top: 8px;
    }

    .section--hub + .banner-carousel {
        margin-top: 60px;
    }

    .tabs--hub {
        margin-bottom: 45px;
    }

    .tabs--hub .tabs__list {
        gap: 30px;
    }

    .tabs--hub .tabs__link {
        font-size: 17.2px;
        line-height: 32.4px;
    }

    .tabs--hub .tabs__link.is-active {
        background-size: 100% 28px;
    }
}

/* Poster cards: 380 wide, poster 367 tall, 194 tall body; 299 wide with a
   276 tall poster on phones. Text is sized in em from the card's font size. */
.card--post {
    border-radius: 7.2px;
    font-size: 10px;
}

.card--post .card__media {
    aspect-ratio: 299 / 276;
}

.card--post .card__body {
    padding: 0.4em 2.1em 1.2em;
}

.card__kicker {
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 0.875em;
    font-weight: 700;
    line-height: 2.14;
    text-transform: uppercase;
}

.card--post .card__title {
    font-size: 1.5em;
    line-height: 1.8;
    -webkit-line-clamp: 1;
}

.card--post .card__kicker + .card__title {
    margin-top: -0.25em;
}

.card--post .card__excerpt {
    max-width: 18em;
    margin-top: 0;
    color: var(--c-white);
    font-size: 0.875em;
    line-height: 1.25;
}

.card--post .card__actions--start {
    padding-top: 1.05em;
}

.card--winner .card__body {
    padding-top: 2.6em;
}

.card--winner .card__kicker {
    font-size: 3em;
    line-height: 0.625;
}

.card--winner .card__title,
.card--winner .card__kicker + .card__title {
    margin-top: 0.55em;
    font-size: 2.375em;
    line-height: 1.14;
}

.rail--posters .rail__page > * {
    flex-basis: 299px;
}

@media (min-width: 768px) {
    .card--post {
        border-radius: 9.6px;
        font-size: 16px;
    }

    .card--post .card__media {
        aspect-ratio: 380 / 367;
    }

    .card--post .card__body {
        min-height: 12.1em;
        padding: 2em 1.8em 1.3em;
    }

    .rail--posters .rail__page {
        grid-template-columns: repeat(3, 1fr);
        gap: 56px;
    }

    .rail--posters .rail__track {
        gap: 56px;
    }

    .rail--posters .rail__nav {
        margin-top: 45px;
    }
}

@media (min-width: 768px) {
    .section--videos .section-heading {
        margin-bottom: 71px;
    }
}

/* Pemenang: the big two-colour "Tahniah / Semua Pemenang!" line. */
.winners-hub__title {
    margin: 10px 0 30px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.winners-hub__title span {
    display: block;
    color: var(--c-white);
}

@media (min-width: 768px) {
    .winners-hub__title {
        margin: 61px 0 75px;
        font-size: 100px;
        line-height: 120px;
    }
}

/* --- Listing pages ------------------------------------------------------ */
.results-summary {
    margin-bottom: var(--sp-6);
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

/* --- Error pages -------------------------------------------------------- */
.error-page {
    padding-block: var(--sp-24);
    text-align: center;
}

.error-page p {
    margin-block: var(--sp-4) var(--sp-8);
    color: var(--c-muted);
}

/* --- Auth pages (login, password reset) --------------------------------- */
/* A wide #242424 panel (1028 wide on desktop) with the Oswald title, yellow
   italic lead and the design's form fields. */
.auth {
    padding: 38px var(--gutter) 60px;
}

.auth-card {
    width: 100%;
    max-width: 1028px;
    margin-inline: auto;
    padding: 32px 24px;
    border-radius: 0 0 8.9px 8.9px;
    background: var(--c-grey-900);
}

.auth-card__title {
    font-size: 36px;
    line-height: 1.2;
}

.auth-card__lead {
    margin: 4px 0 24px;
    color: var(--c-white);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

.auth-card__link {
    justify-self: end;
    margin-top: -8px;
    color: var(--c-white);
    font-size: 14px;
}

.auth-card__footer {
    margin-top: 24px;
    color: var(--c-grey-400);
    font-size: 14px;
    text-align: center;
}

.auth-card__footer a {
    color: var(--c-white);
    font-weight: 700;
}

@media (min-width: 768px) {
    .auth {
        padding: 75px var(--gutter) 97px;
    }

    .auth-card {
        padding: 115px 111px 86px;
    }

    .auth-card .form {
        gap: 25px;
    }

    .auth-card__title {
        font-size: 57.3px;
        line-height: 1.5;
    }

    .auth-card__lead {
        margin: 4px 0 40px;
        font-size: 15.3px;
    }

    .auth-card .field__label {
        font-size: 19.1px;
    }

    .auth-card .field__control {
        font-size: 19.1px;
    }

    .auth-card__submit {
        margin-top: 15px;
    }
}

.auth-card__buttons {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.auth-card__lead--center {
    text-align: center;
}

.auth-card__note {
    margin-top: 18px;
    color: var(--c-grey-400);
    font-size: 13px;
}

.auth-card__note a {
    color: var(--c-white);
    text-decoration: underline;
}

/* Password login, folded away under the email-link form. */
.auth-card__alt {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--c-grey-700);
}

.auth-card__alt > summary {
    color: var(--c-grey-400);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.auth-card__alt[open] > summary {
    margin-bottom: 20px;
}

/* TBR Final Flow "Successfully Registered": 1028px #242424 card, radius 10,
   two 334px buttons (green, then green outline). */
.auth-card--welcome {
    border-radius: 10px;
    text-align: center;
}

.auth-card__subtitle {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.auth-card__actions {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 334px;
    margin: 32px auto 0;
}

.auth-card__actions .form-button {
    min-height: 48px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .auth--welcome {
        padding-top: 122px;
        padding-bottom: 150px;
    }

    .auth-card--welcome {
        padding: 50px 38px 52px;
    }

    .auth-card--welcome .auth-card__title {
        font-size: 57.26px;
        line-height: 1;
    }

    .auth-card__subtitle {
        margin-top: 16px;
        font-size: 40px;
        line-height: 1;
    }

    .auth-card__actions {
        gap: 40px;
        margin-top: 44px;
    }

    .auth-card__actions .form-button {
        min-height: 54px;
        font-size: 19.09px;
        font-weight: 800;
    }
}

/* --- Account settings --------------------------------------------------- */
/* One card: the photo across the top with "Upload Profile" on it, then the
   form on #242424, as in the design's Setting page. */
.settings-page {
    padding: 38px 0 60px;
}

.settings {
    max-width: calc(1028px + var(--gutter) * 2);
}

.settings__card {
    overflow: hidden;
    border-radius: 0 0 8.9px 8.9px;
    background: var(--c-grey-900);
}

.settings__avatar {
    position: relative;
}

.settings__avatar-label {
    position: relative;
    display: block;
    cursor: pointer;
}

.settings__avatar-image {
    width: 100%;
    aspect-ratio: 1028 / 520;
    object-fit: cover;
    background: var(--c-grey-800);
}

.settings__avatar-image--empty {
    padding: 8% 0 18%;
    object-fit: contain;
}

.settings__avatar-caption {
    position: absolute;
    right: 0;
    bottom: 12%;
    left: 0;
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

.settings__avatar-label:hover .settings__avatar-caption,
.settings__avatar input:focus-visible + .settings__avatar-hint {
    color: var(--c-accent);
}

.settings__avatar input:focus-visible ~ .settings__avatar-label,
.settings__avatar-label:focus-within {
    outline: 3px solid var(--c-white);
}

.settings__avatar-hint {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.settings__avatar noscript .form-button {
    margin: 12px 0 0;
}

.settings__form {
    padding: 32px 24px;
}

.settings__title {
    font-size: 36px;
    line-height: 1.2;
}

.settings__lead {
    margin-top: 4px;
    color: var(--c-white);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

.settings__password {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings__legend {
    margin-bottom: 12px;
    padding: 0;
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .settings-page {
        padding: 53px 0 97px;
    }

    .settings__avatar-caption {
        font-size: 40px;
    }

    .settings__form {
        padding: 72px 111px 86px;
    }

    .settings__form.form {
        gap: 25px;
    }

    .settings__title {
        font-size: 57.3px;
        line-height: 1.5;
    }

    .settings__lead {
        font-size: 15.3px;
    }

    .settings__form .field__label,
    .settings__form .field__control {
        font-size: 19.1px;
    }

    .settings__legend {
        font-size: 28px;
    }
}

/* --- Port Rider location pop-up --------------------------------------- */
/* margin: auto restores the <dialog> centring that the reset removes. */
.place-dialog {
    width: min(1113px, calc(100% - 16px));
    margin: auto;
    max-height: calc(100dvh - 16px);
    /* Room for the close button that overhangs the panel's corner. */
    padding: 24px 16px;
    border: 0;
    background: transparent;
    color: var(--c-white);
    overflow-y: auto;
    scrollbar-width: none;
}

/* The panel; the promo banner sits under it (TBR Final Flow pop-ups). */
.place-dialog__panel {
    position: relative;
    padding: 14px 14px 20px;
    border-radius: 13px;
    background: var(--c-grey-900);
}

.place-dialog .banner-carousel {
    width: 100%;
    margin: 24px auto 0;
}

.place-dialog__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 18px;
    padding: 0 20px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.place-dialog__cta:hover,
.place-dialog__cta:focus-visible {
    background: var(--c-white);
    color: var(--c-grey-900);
}

.place-dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.place-dialog__close {
    position: absolute;
    top: -18px;
    right: -12px;
    width: 40px;
    padding: 0;
}

.place-dialog__close img {
    width: 100%;
    height: auto;
}

.place-dialog__image {
    width: 100%;
    aspect-ratio: 1012 / 574;
    object-fit: cover;
    background: var(--c-black);
}

.place-dialog__facts {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.place-dialog__facts > div + div {
    margin-top: 6px;
}

.place-dialog__facts dt,
.place-dialog__direction {
    display: inline;
    color: var(--c-white);
    font-weight: 700;
    text-transform: uppercase;
}

.place-dialog__facts dd {
    display: inline;
    margin: 0;
}

.place-dialog__direction {
    display: block;
    margin-top: 6px;
    font-size: 16px;
}

.place-dialog__apps {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.place-dialog__apps a {
    display: block;
    width: 36px;
    transition: transform 0.2s var(--ease);
}

.place-dialog__apps a:hover,
.place-dialog__apps a:focus-visible {
    transform: scale(1.08);
}

.place-dialog__apps img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .place-dialog {
        padding: 40px 24px;
    }

    .place-dialog__panel {
        padding: 31px 26px 35px;
        border-radius: 23px;
    }

    .place-dialog__text {
        padding-left: 32px;
    }

    .place-dialog__close {
        top: -20px;
        right: -16px;
        width: 44px;
    }

    .place-dialog .banner-carousel {
        margin-top: 39px;
    }

    .place-dialog__cta {
        min-height: 50px;
        margin-top: 26px;
        padding: 0 26px;
        font-size: 20px;
    }

    .place-dialog__facts {
        margin-top: 35px;
        font-size: 24.8px;
        line-height: 40px;
    }

    .place-dialog__facts > div + div {
        margin-top: 18px;
    }

    .place-dialog__direction {
        margin-top: 19px;
        font-size: 24.8px;
        line-height: 40px;
    }

    .place-dialog__apps {
        gap: 17px;
        margin-top: 3px;
    }

    .place-dialog__apps a {
        width: 50px;
    }
}

/* TBR Final Flow III pop-ups: details on the left, photo on the right. */
.place-dialog__panel {
    display: grid;
    gap: 16px;
}

.place-dialog__panel .place-dialog__image {
    order: -1;
}

.place-dialog__name {
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.place-dialog__description {
    margin-bottom: 12px;
    font-size: 15px;
    font-style: italic;
}

.place-dialog__description:empty,
.place-dialog__facts [hidden] {
    display: none;
}

@media (min-width: 768px) {
    /* Scaled down from the Figma pop-up, which fills most of a 1440 screen. */
    .place-dialog {
        width: min(900px, calc(100% - 16px));
    }

    .place-dialog__panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 28px;
        padding: 30px 30px 30px 36px;
    }

    .place-dialog__panel .place-dialog__image {
        order: 0;
        height: 100%;
        min-height: 240px;
        border-radius: 10px;
    }

    .place-dialog__text {
        padding-left: 0;
    }

    .place-dialog__name {
        font-size: 22px;
        line-height: 1.15;
    }

    .place-dialog__description {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 1.3;
    }

    .place-dialog__facts {
        margin-top: 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .place-dialog__facts > div + div {
        margin-top: 8px;
    }

    .place-dialog__direction {
        margin-top: 14px;
        font-size: 16px;
        line-height: 1.5;
    }

    .place-dialog__apps {
        gap: 12px;
        margin-top: 6px;
    }

    .place-dialog__apps a {
        width: 40px;
    }

    .place-dialog__cta {
        min-height: 40px;
        margin-top: 20px;
        padding: 0 20px;
        font-size: 16px;
    }

    .place-dialog__close {
        top: -16px;
        right: -14px;
        width: 36px;
    }

    .place-dialog .banner-carousel {
        margin-top: 24px;
    }

    /* Smaller than the 891px Figma frame so the pop-up stays the focus. */
    .place-dialog .banner-carousel {
        max-width: 640px;
    }

    .place-dialog .promo-banner {
        min-height: 250px;
        border-radius: 16px;
    }

    .place-dialog .promo-banner__body {
        padding: 20px 24px 22px 26px;
    }

    .place-dialog .promo-banner__title {
        font-size: 30px;
        line-height: 34px;
    }

    .place-dialog .promo-banner__text {
        margin-top: 14px;
        font-size: 12px;
        line-height: 17px;
    }

    .place-dialog .promo-banner__cta {
        min-height: 30px;
        padding: 0 16px;
        font-size: 15px;
        line-height: 30px;
    }

    .place-dialog .promo-banner__socials {
        margin-top: 14px;
    }

    .place-dialog .promo-banner__social {
        font-size: 11px;
    }
}

/* --- Like button (Port Rider cards) ------------------------------------- */
/* Styled as a card action; once liked, the heart turns white. */
.like-form {
    display: contents;
}

/* Feature heart: green once liked. */
.feature__circle--heart.like-button {
    cursor: pointer;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.feature__circle--heart.like-button:hover,
.feature__circle--heart.like-button:focus-visible,
.feature__circle--heart.like-button[aria-pressed="true"] {
    border-color: var(--c-accent);
    background: var(--c-accent);
}

.feature__count[hidden] {
    display: none;
}

/* Keeps the green count badge distinct from the green (liked) circle. */
.feature__circle--heart.like-button .feature__count {
    box-shadow: 0 0 0 2px var(--c-grey-900);
}

.like-button[aria-pressed="true"] .card__action-icon--heart {
    color: var(--c-white);
}

.like-button:disabled {
    opacity: 0.6;
}

/* --- Pit stop: single stop page ----------------------------------------- */
/* The design's event pop-up: poster left, #242424 panel right. */
.event-hero__grid {
    display: grid;
    overflow: hidden;
    border-radius: 9.5px;
    background: var(--c-grey-900);
}

.event-hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 573 / 556;
    object-fit: cover;
}

.event-hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 16px;
}

.event-hero__title {
    font-size: 20px;
    line-height: 1.6;
}

.event-hero__facts {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    color: var(--c-white);
    font-size: 14px;
}

.event-hero__facts li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-hero__facts a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.event-hero__description {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.event-hero__cta {
    margin: 20px 0 0;
}

.event-hero__note,
.event-hero__closed {
    margin-top: 10px;
    color: var(--c-grey-400);
    font-size: 13px;
}

.event-hero__more {
    margin-top: 10px;
    color: var(--c-white);
    text-decoration: underline;
}

.event-hero__actions {
    margin-top: auto;
    padding-top: 20px;
}

@media (min-width: 768px) {
    .event-hero .section-heading {
        margin-bottom: 48px;
    }

    .event-hero__grid {
        grid-template-columns: 573fr 653fr;
        min-height: 556px;
    }

    .event-hero__body {
        padding: 40px 47px 29px 34px;
    }

    .event-hero__title {
        font-size: 23.1px;
        line-height: 43.3px;
    }

    .event-hero__facts {
        font-size: 16px;
    }

    .event-hero__description {
        margin-top: 8px;
        font-size: 16px;
        line-height: 22px;
    }
}

/* --- Pit stop: registration and confirmation ---------------------------- */
/* Same wide #242424 panel and form look as the login page. */
.register {
    display: grid;
    gap: var(--sp-8);
    max-width: calc(1028px + var(--gutter) * 2);
}

.register-card {
    padding: 32px 24px;
    border-radius: 0 0 8.9px 8.9px;
    background: var(--c-grey-900);
}

.register-card__title {
    font-size: 36px;
    line-height: 1.1;
    text-wrap: wrap;
}

.register-card__lead {
    margin: 12px 0 24px;
    color: var(--c-white);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

.register-card__actions {
    display: grid;
    gap: 16px;
}

.register-card__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--c-grey-400);
    font-size: 13px;
}

.register-card__contact .icon {
    color: var(--c-white);
}

.register-card__contact strong {
    color: var(--c-white);
}

.register-card__contact a {
    color: var(--c-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.register-card .field--checkbox {
    justify-content: center;
}

.register-card .field--checkbox .field__label {
    flex: 0 1 auto;
    color: var(--c-white);
    font-size: 12px;
}

.register-card > .form > .field__hint {
    text-align: center;
}

@media (min-width: 768px) {
    .register-card {
        padding: 99px 111px 76px;
    }

    .register-card__title {
        font-size: 57.3px;
        line-height: 1.1;
    }

    .register-card__lead {
        margin: 24px 0 30px;
        font-size: 15.3px;
    }

    .register-card .form {
        gap: 25px;
    }

    .register-card .field__label {
        font-size: 19.1px;
    }

    .register-card .field__control {
        font-size: 19.1px;
    }

    .register-card .field--checkbox .field__label {
        font-size: 15.3px;
    }

    .register-card__actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* TBR Final Flow pit stop form: account details shown read-only, a white
   event picker, then "Pilih peranan" and "Kenalan kecemasan" sections
   under grey headings with a rule above. */
.register-card {
    border-radius: 10px;
}

.register-form .field__control[readonly] {
    color: var(--c-grey-400);
    cursor: default;
}

.register-form .field__hint a {
    color: var(--c-white);
    text-decoration: underline;
}

.register-form select.field__control {
    max-width: 481px;
    background-color: var(--c-white);
    color: var(--c-grey-900);
}

.register-form .field__select-icon {
    color: var(--c-grey-900);
}

.register-form__group {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin: 8px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--c-grey-700);
}

.register-form__legend {
    float: left;
    width: 100%;
    margin-bottom: 4px;
    color: var(--c-grey-400);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.register-form__legend small {
    font-size: 0.6em;
    font-weight: 500;
}

.register-card .register-form__group .field--checkbox {
    justify-content: flex-start;
}

.register-card .register-form__group .field--checkbox .field__label {
    font-size: 16px;
    font-weight: 800;
}

.register-form__group .field__checkbox {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 2px;
    background-color: var(--c-grey-500);
}

/* "Siapa yang rekomen event ni?": Marshal / Pit Crew Member, each with its
   name dropdown underneath (side by side from tablet up). */
.register-form__question {
    clear: both;
    padding-top: 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.register-form__roles {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.register-form__role {
    display: grid;
    align-content: start;
    gap: 8px;
}

.register-form__reveal {
    margin: 0;
}

.register-form__reveal[hidden] {
    display: none;
}

.register-form__contacts {
    display: grid;
    gap: 28px;
}

.register-form__contact {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .register-form__legend {
        font-size: 19.09px;
    }

    .register-card .register-form__group .field--checkbox .field__label {
        font-size: 19.09px;
    }

    .register-form__question {
        font-size: 19.09px;
    }

    .register-form__roles {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .register-form__role .field__select {
        max-width: 280px;
    }

    .register-form__contacts {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .register-form__contact {
        max-width: 280px;
    }

    .register-form__contact + .register-form__contact {
        padding-left: 82px;
        border-left: 1px solid var(--c-grey-700);
        max-width: none;
    }

    .register-form__contact + .register-form__contact .field {
        max-width: 280px;
    }
}

.register-card--done {
    text-align: center;
}

.register-card--done .register-card__actions {
    justify-content: center;
}

.register-card__tick {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-6);
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.register-card__tick .icon {
    width: 32px;
    height: 32px;
}

.summary {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    padding: var(--sp-6);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-align: left;
}

.summary div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--sp-4);
}

.summary dt {
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

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

/* --- Pit stop: booking details (TBR Final Flow "Butiran Pit Stop Event") - */
/* 1028px #242424 card; "LABEL: value" rows at 24.76px with grey section
   headings between rules; roles as read-only tick boxes. */
.booking__container {
    max-width: calc(1028px + var(--gutter) * 2);
}

.booking__page-title {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 1;
}

.booking__card {
    padding: 28px 22px 36px;
    border-radius: 10px;
    background: var(--c-grey-900);
}

.booking__number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 18px;
}

.booking__number strong,
.booking__row strong {
    font-weight: 700;
    text-transform: uppercase;
}

.booking__section {
    margin: 24px 0 18px;
    padding: 18px 0;
    border-block: 1px solid var(--c-grey-700);
    color: var(--c-grey-400);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.booking__row {
    font-size: 16px;
    line-height: 1.3;
}

.booking__row + .booking__row {
    margin-top: 14px;
}

.booking__assembly {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
}

.booking__apps {
    display: flex;
    gap: 16px;
}

.booking__apps img {
    width: 44px;
    height: 44px;
}

.booking__roles {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 800;
}

.booking__roles li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking__box {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: var(--c-grey-500);
}

.booking__roles .is-on .booking__box {
    background: var(--c-grey-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.3 3.2L11 1' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E") center / 12px 9px no-repeat;
}

.booking__contact + .booking__contact {
    margin-top: 32px;
}

.booking__subtitle {
    margin: 36px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--c-grey-700);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking__notes {
    display: grid;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
}

.booking__notes li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking__note-icon {
    flex-shrink: 0;
    width: 15px;
    height: 14px;
    color: var(--c-white);
}

.booking__guide {
    font-size: 15px;
    line-height: 1.45;
}

.booking__actions {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 334px;
    margin: 44px auto 0;
}

.booking__actions .form-button {
    min-height: 48px;
    text-transform: uppercase;
}

.booking__actions-row {
    position: relative;
}

.booking__download {
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #f3f3f3;
    transform: translateY(-50%);
    cursor: pointer;
}

.booking__download-icon {
    width: 24px;
    height: 24px;
}

@media (max-width: 459px) {
    .booking__actions-row {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .booking__download {
        position: static;
        flex-shrink: 0;
        transform: none;
    }
}

@media (min-width: 768px) {
    .booking__page-title {
        margin-bottom: 64px;
        font-size: 57.3px;
        line-height: 1.07;
    }

    .booking__card {
        padding: 63px 166px 80px 161px;
    }

    .booking__number {
        font-size: 24.76px;
    }

    .booking__section {
        margin: 26px 0 37px;
        font-size: 19.09px;
    }

    .booking__row {
        font-size: 24.76px;
        line-height: 30px;
    }

    .booking__row + .booking__row {
        margin-top: 21px;
    }

    .booking__roles {
        font-size: 19.09px;
    }

    .booking__subtitle {
        margin-top: 48px;
        font-size: 24.76px;
    }

    .booking__notes {
        font-size: 14px;
    }

    .booking__guide {
        font-size: 20px;
    }

    .booking__actions {
        gap: 40px;
        margin-top: 76px;
    }

    .booking__actions .form-button {
        min-height: 54px;
        font-size: 19.09px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .chat-button,
    .promo-section,
    .booking__actions {
        display: none !important;
    }

    .booking__card {
        background: none;
        color: #000;
    }
}

.register__history {
    text-align: center;
}

.register__history a {
    color: var(--c-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Marshal & Pit Crew application (TBR Final Flow III) --------------- */
.crew-intro {
    display: grid;
    gap: 12px;
    margin: 16px 0 28px;
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.45;
}

.crew-intro strong {
    font-weight: 800;
}

.crew-form select.field__control {
    max-width: 160px;
}

.crew-form__roles {
    margin: 0;
    padding: 0;
    border: 0;
}

.crew-form__roles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 6px;
}

.register-card .crew-form__roles .field--checkbox {
    justify-content: flex-start;
}

.register-card .crew-form__roles .field--checkbox .field__label {
    font-size: 16px;
    font-weight: 800;
}

.crew-done {
    display: grid;
    gap: 14px;
    max-width: 520px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .crew-intro {
        font-size: 15.3px;
    }

    .register-card .crew-form__roles .field--checkbox .field__label {
        font-size: 19.09px;
    }
}

/* --- Sejarah Pendaftaran: "Rekod Pit Stop Event" table ------------------ */
.history__title {
    margin-bottom: 28px;
    font-size: 36px;
    line-height: 1.05;
}

.history__wrap {
    overflow-x: auto;
}

.history__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 14px;
}

.history__table th {
    padding: 6px 12px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.history__table td {
    padding: 10px 12px;
    background: var(--c-grey-900);
    text-align: center;
    vertical-align: middle;
}

.history__table td + td {
    border-left: 1px solid var(--c-grey-700);
}

.history__table a {
    color: var(--c-white);
    font-weight: 700;
    text-transform: uppercase;
}

.history__table a:hover,
.history__table a:focus-visible {
    text-decoration: underline;
}

.history__meta {
    display: block;
    margin-top: 2px;
    color: var(--c-grey-400);
    font-size: 12px;
}

@media (min-width: 768px) {
    .history {
        padding-top: 64px;
        min-height: 640px;
    }

    .history__title {
        margin-bottom: 72px;
        font-size: 54.6px;
    }

    .history__table {
        font-size: 16px;
    }
}

/* --- Bike Shop & Pitstop: state tabs + "Kategori" -------------------- */
.bike-shop__states {
    margin-bottom: 14px;
}

/* Six states: wrap onto a second row on phones so the active one stays in view. */
.bike-shop__states .tabs__list {
    flex-wrap: wrap;
    width: auto;
    row-gap: 6px;
}

.bike-shop__categories {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin-bottom: 18px;
    font-size: 12px;
}

.bike-shop__categories-label {
    font-weight: 700;
}

.bike-shop__category {
    color: var(--c-grey-400);
}

.bike-shop__category.is-active,
.bike-shop__category:hover,
.bike-shop__category:focus-visible {
    color: var(--c-white);
    font-weight: 700;
}

@media (min-width: 768px) {
    .bike-shop__categories {
        gap: 6px 29px;
        margin-bottom: 30px;
        font-size: 14px;
    }
}

/* --- Visitor landing (guest on a members-only page) ---------------------- */
.visitor-landing {
    padding: 8px 0 72px;
    text-align: center;
}

.visitor-landing__title {
    font-size: 30px;
    line-height: 1.1;
}

.visitor-landing__lead {
    margin-top: 10px;
    font-size: 12px;
    font-style: italic;
}

.visitor-landing__actions {
    display: grid;
    gap: 14px;
    max-width: 280px;
    margin: 24px auto 0;
}

.visitor-landing__actions .form-button {
    text-transform: uppercase;
}

.visitor-landing__points {
    display: grid;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 12px;
    font-weight: 600;
}

.visitor-landing__points li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.visitor-landing__icon {
    width: 14px;
    height: 13px;
}

@media (min-width: 768px) {
    /* Clears the gathering band's ripped edge, which hangs below the band. */
    .visitor-landing {
        padding: 110px 0 130px;
    }

    .visitor-landing__title {
        font-size: 55px;
    }

    .visitor-landing__lead {
        margin-top: 14px;
        font-size: 15px;
    }

    .visitor-landing__actions {
        grid-template-columns: 330px 330px;
        justify-content: center;
        gap: 20px;
        max-width: none;
        margin-top: 30px;
    }

    .visitor-landing__points {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 48px;
        margin-top: 34px;
        font-size: 14px;
    }
}

/* --- Profile area (TBR Final Flow III) --------------------------------- */
/* Round photo + "Upload Profile", then a #242424 card with the tabs on its
   left edge (green when active) and the tab's content. */
.profile__container {
    max-width: calc(1224px + var(--gutter) * 2);
}

.profile__avatar {
    display: grid;
    justify-items: center;
    margin-bottom: 24px;
}

.profile__avatar-label {
    display: grid;
    justify-items: center;
    gap: 10px;
    cursor: pointer;
}

.profile__avatar-image {
    width: 110px;
    height: 110px;
    border: 4px solid var(--c-grey-500);
    border-radius: 50%;
    object-fit: cover;
}

.profile__avatar-image--empty {
    display: grid;
    place-items: center;
    background: var(--c-grey-900);
    color: var(--c-grey-500);
}

.profile__avatar-icon {
    width: 64%;
    height: 64%;
}

.profile__avatar-caption {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile__avatar-label:hover .profile__avatar-caption,
.profile__avatar input:focus-visible + .profile__avatar-label .profile__avatar-caption {
    text-decoration: underline;
}

.profile__card {
    display: grid;
}

.profile__tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.profile__tab {
    display: block;
    padding: 8px 12px;
    background: var(--c-grey-900);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile__tab.is-active {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.profile__body {
    padding: 28px 22px 36px;
    border-radius: 10px;
    background: var(--c-grey-900);
}

.profile__title {
    font-size: 32px;
    line-height: 1.1;
}

.profile__lead {
    margin: 10px 0 24px;
    font-size: 12px;
    font-style: italic;
}

.profile__form {
    display: grid;
    gap: 18px;
    max-width: 806px;
}

.profile__roles {
    margin: 0;
    padding: 0;
    border: 0;
}

.profile__roles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 6px;
}

.profile__role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    cursor: pointer;
}

.profile__role .field__checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: var(--c-grey-500);
    appearance: none;
}

.profile__role .field__checkbox:checked {
    background: var(--c-grey-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.3 3.2L11 1' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E") center / 11px 8px no-repeat;
}

.profile__role .field__checkbox:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
}

.profile__crew-link {
    margin-top: 10px;
    font-size: 11px;
    text-transform: uppercase;
}

.profile__crew-link a {
    font-weight: 800;
    text-decoration: underline;
}

.profile__empty {
    margin-top: 20px;
    color: var(--c-grey-400);
}

.profile__empty a {
    color: var(--c-white);
    text-decoration: underline;
}

.profile .history__wrap {
    margin-top: 24px;
}

.card--reward .card__body {
    background: var(--c-black);
}

@media (min-width: 768px) {
    .profile {
        padding-top: 64px;
    }

    .profile__avatar {
        margin-bottom: 52px;
    }

    .profile__avatar-image {
        width: 150px;
        height: 150px;
    }

    .profile__avatar-caption {
        font-size: 32px;
    }

    .profile__card {
        grid-template-columns: 199px minmax(0, 1fr);
        align-items: start;
    }

    .profile__tabs ul {
        display: grid;
        gap: 0;
        margin: 0;
        border-radius: 6px 0 0 6px;
        background: var(--c-grey-900);
        overflow: hidden;
    }

    .profile__tab {
        padding: 13px 20px;
        font-size: 17px;
        line-height: 1.15;
    }

    .profile__body {
        min-height: 640px;
        padding: 112px 112px 110px;
        border-radius: 0 10px 10px 10px;
    }

    .profile__title {
        font-size: 54.6px;
    }

    .profile__lead {
        margin: 24px 0 48px;
        font-size: 14px;
    }

    .profile__crew-link {
        font-size: 12px;
    }
}

/* --- My registrations list ---------------------------------------------- */
.my-registrations__title {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xl);
}

.my-registrations__list {
    display: grid;
    gap: var(--sp-3);
}

.my-registrations__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.my-registrations__event {
    font-weight: 700;
}

.my-registrations__meta {
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.status {
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status--pending {
    background: rgba(255, 255, 255, 0.1);
}

.status--approved {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.status--rejected {
    background: rgba(255, 90, 90, 0.18);
    color: #ff8a8a;
}

/* --- Detail pages: shared bits ------------------------------------------ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-6);
    color: var(--c-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lead-text {
    max-width: 65ch;
    margin-bottom: var(--sp-8);
    color: var(--c-muted);
    font-size: var(--fs-lg);
}

/* --- Photo grid + lightbox ---------------------------------------------- */
/* Album: square photos in a #242424 panel, four across on desktop. */
.photo-panel {
    padding: 20px 16px;
    border-radius: 15px;
    background: var(--c-grey-900);
}

.photo-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
    .photo-panel {
        padding: 98px 77px 88px 79px;
    }

    .photo-grid {
        gap: 39px;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .tabs--albums {
        margin-bottom: 52px;
    }

    .tabs--albums .tabs__list {
        gap: 50px;
    }

    .tabs--albums .tabs__link.is-active {
        background-color: transparent;
        background-image: linear-gradient(var(--c-accent), var(--c-accent));
        background-size: 100% 23px;
    }
}

.photo-tile {
    margin: 0;
}

.photo-tile__link {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--c-grey-800);
}

.photo-tile__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease);
}

.photo-tile__link:hover img,
.photo-tile__link:focus-visible img {
    transform: scale(1.04);
}

.photo-tile__caption {
    margin-top: var(--sp-2);
    color: var(--c-muted);
    font-size: var(--fs-xs);
}

/* margin: auto restores the browser's centring, which the global reset removes. */
.lightbox {
    margin: auto;
    width: min(100% - var(--sp-8), 1100px);
    max-height: calc(100dvh - var(--sp-8));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--c-black);
    color: var(--c-white);
    overflow: hidden;
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.lightbox__stage img {
    width: 100%;
    max-height: calc(100dvh - 8rem);
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.lightbox__stage iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
}

.lightbox__caption {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
}

/* Inside the dialog's corner so it is always on screen, whatever the media size. */
.lightbox__close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 16, 16, 0.75);
    color: var(--c-white);
}

/* --- Peraduan detail ---------------------------------------------------- */
/* Prize poster left, details right, in one #242424 panel. */
.contest__dates {
    margin-top: 4px;
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.contest-panel {
    display: grid;
    overflow: hidden;
    border-radius: 8px;
    background: var(--c-grey-900);
}

.contest-panel__media img {
    width: 100%;
    height: auto;
}

/* The poster keeps its own ratio, shows in full and sits at the top of the
   panel, however tall the sign-up form makes the details column. */
@media (min-width: 768px) {
    .contest-panel {
        align-items: start;
    }

    .contest-panel__media img {
        display: block;
        height: auto;
    }
}

.contest-panel__body {
    padding: 20px;
}

.contest-panel__title {
    font-size: 20px;
    line-height: 1.6;
}

.contest-panel__tagline {
    font-size: 12px;
    line-height: 1.45;
}

.contest-details {
    margin: 24px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.contest-details dt {
    color: var(--c-white);
    font-weight: 700;
}

.contest-details dd {
    margin: 0 0 1.6em;
}

.contest-details dd:last-child {
    margin-bottom: 0;
}

.contest-details__prizes {
    padding-left: 1.4em;
    list-style: disc;
}

.contest-details__prizes ul {
    padding-left: 1.4em;
    list-style: disc;
}

.contest-details__steps {
    display: grid;
    gap: 1.2em;
    padding: 0;
    counter-reset: step;
}

.contest-details__steps li {
    counter-increment: step;
}

.contest-details__steps li::before {
    content: counter(step) " — ";
    font-weight: 700;
}

.contest-panel__cta {
    margin-top: 24px;
}

.pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 205px;
    min-height: 26px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.pill-button:hover,
.pill-button:focus-visible {
    background: var(--c-white);
    color: var(--c-black);
}

.contest__note {
    color: var(--c-grey-400);
    font-size: 14px;
}

/* Peraduan sign-up: "Daftar Peraduan" form under the details (Final Flow III). */
.contest-signup {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--c-grey-700);
}

.contest-signup__title {
    font-size: 24px;
    line-height: 1.1;
}

.contest-signup__lead {
    margin: 4px 0 14px;
    font-size: 12px;
    font-style: italic;
}

.contest-signup > summary {
    cursor: pointer;
    list-style: none;
}

.contest-signup > summary::-webkit-details-marker {
    display: none;
}

.contest-signup[open] > summary {
    display: none;
}

.contest-signup__form {
    display: grid;
    gap: 12px;
    max-width: 420px;
}

.contest-signup__form .field__hint {
    margin-top: -4px;
    color: var(--c-grey-400);
    font-size: 12px;
}

.contest-signup__done {
    padding: 12px 16px;
    border-left: 4px solid var(--c-accent);
    background: rgb(255 255 255 / 6%);
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .section--contest .section-heading {
        margin-bottom: 55px;
    }

    .contest__dates {
        margin: 0 0 0 6px;
        font-size: 16px;
        line-height: 1.9;
    }

    .contest-panel {
        grid-template-columns: 573px 1fr;
    }

    .contest-panel__body {
        padding: 44px 35px 54px 34px;
    }

    .contest-panel__title {
        font-size: 24px;
        line-height: 43.3px;
    }

    .contest-panel__tagline {
        max-width: 567px;
        margin-top: -10px;
        font-size: 14px;
        line-height: 17.5px;
    }

    .contest-details {
        margin-top: 48px;
        font-size: 14px;
        line-height: 20px;
    }

    .contest-details dd {
        margin-bottom: 20px;
    }

    .contest-panel__cta {
        margin-top: 17px;
    }
}

/* --- Winners page ------------------------------------------------------ */
/* Yellow band with torn edges; each podium winner gets a dark prize banner
   (medal, rank, value, prize) beside the prize photo, sides alternating. */
.winners__kicker {
    display: block;
    color: var(--c-white);
}

.winners-hub__title--page {
    margin-bottom: 10px;
}

/* TBR Final Flow: one #242424 card (1135 wide, radius 10) instead of the
   first design's yellow torn band. */
.winners-band {
    width: calc(100% - var(--gutter) * 2);
    max-width: 1135px;
    margin: 24px auto 0;
    padding: 40px 0 56px;
    border-radius: 10px;
    background: var(--c-grey-900);
}

.winners-band .winners-hub__title--page {
    margin: 0 0 40px;
}

.prize-rows {
    display: grid;
    gap: 48px;
}

.prize-row {
    display: grid;
    justify-items: center;
    gap: 16px;
    color: var(--c-white);
    text-align: center;
}

.prize-row__banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 750px;
    min-height: 110px;
    padding: 8px 20px 8px 0;
    border-radius: 100px 42px 42px 100px;
    background: linear-gradient(90deg, #42433d, #191919);
    box-shadow: inset 0 0 0 6px transparent;
    text-align: left;
}

.prize-row__banner::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid #8a795d;
    border-radius: inherit;
    pointer-events: none;
}

.prize-row__medal {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    margin: -4px 12px -4px -8px;
}

.prize-row__rank {
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.prize-row__value {
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.prize-row__prize {
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.prize-row__photo {
    width: min(100%, 320px);
    height: auto;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.prize-row__winner {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
}

.prize-row__name {
    font-size: 22px;
}

.consolation {
    margin-top: 64px;
}

.consolation__title {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto -24px;
    padding: 4px 32px;
    border: 2px solid #8a795d;
    border-radius: 100px 42px 42px 100px;
    background: linear-gradient(90deg, #42433d, #191919);
    color: var(--c-white);
    font-size: 28px;
    line-height: 1.3;
}

.consolation__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.consolation__table thead th {
    padding: 44px 8px 20px;
    background: #1e1e1e;
    color: var(--c-white);
    font-size: 18px;
}

.consolation__table thead th:first-child {
    border-radius: 60px 0 0 9.6px;
}

.consolation__table thead th:last-child {
    border-radius: 0 60px 9.6px 0;
}

.consolation__table td {
    padding: 14px 8px;
    color: var(--c-white);
    font-size: 16px;
}

@media (min-width: 768px) {
    .winners-hub__title--page {
        margin: 45px 0 0;
    }

    .winners-band {
        margin-top: 50px;
        padding: 70px 0 110px;
    }

    .winners-band .winners-hub__title--page {
        margin: 0 0 90px;
    }

    .prize-rows {
        gap: 0;
    }

    .prize-row {
        grid-template-columns: 750px 1fr;
        grid-template-areas:
            "banner photo"
            "winner photo";
        align-items: start;
        justify-items: start;
        gap: 0;
        min-height: 492px;
        text-align: center;
    }

    .prize-row--reverse {
        grid-template-columns: 1fr 750px;
        grid-template-areas:
            "photo banner"
            "photo winner";
        justify-items: end;
    }

    .prize-row__banner {
        grid-area: banner;
        min-height: 206px;
        margin-top: 53px;
        padding: 12px 40px 12px 0;
    }

    .prize-row--reverse .prize-row__banner {
        flex-direction: row-reverse;
        padding: 12px 0 12px 60px;
        border-radius: 42px 100px 100px 42px;
        background: linear-gradient(270deg, #42433d, #191919);
        text-align: left;
    }

    .prize-row__banner::before {
        inset: 10px 12px;
        border-width: 3px;
    }

    .prize-row__medal {
        width: 229px;
        height: 229px;
        margin: -12px 34px -12px -78px;
    }

    .prize-row--reverse .prize-row__medal {
        margin: -12px -78px -12px 34px;
    }

    .prize-row__rank {
        font-size: 64px;
        line-height: 1.2;
    }

    .prize-row__value {
        font-size: 48px;
        line-height: 1.1;
    }

    .prize-row__prize {
        font-size: 24px;
    }

    .prize-row__photo {
        grid-area: photo;
        align-self: start;
        width: 473px;
    }

    .prize-row__winner {
        grid-area: winner;
        justify-self: stretch;
        margin-top: 11px;
        font-size: 36px;
        line-height: 55px;
    }

    .prize-row__name {
        font-size: 48px;
    }

    .consolation {
        max-width: 1226px;
        margin: 80px auto 0;
    }

    .consolation__title {
        margin-bottom: -48px;
        padding: 0 94px;
        font-size: 64px;
        line-height: 95px;
    }

    .consolation__table thead th {
        padding: 77px 8px 5px;
        font-size: 36px;
        line-height: 62px;
    }

    .consolation__table thead th:first-child {
        border-radius: 100px 0 0 9.6px;
    }

    .consolation__table thead th:last-child {
        border-radius: 0 100px 9.6px 0;
    }

    .consolation__table td {
        padding: 20px 8px;
        font-size: 24px;
        line-height: 62px;
    }
}

/* --- Hall of Fame profile ----------------------------------------------- */
/* Tabs are the home-page size here (Inter 20, 23px yellow block). */
.tabs--profile {
    margin-bottom: 25px;
}

@media (min-width: 768px) {
    .tabs--profile {
        margin-bottom: 60px;
    }
}

/* The yellow label bars: "Pendidikan", "Kerjaya". */
.bar-heading {
    display: inline-block;
    min-width: 218px;
    margin: 0;
    padding: 0 16px;
    background: linear-gradient(var(--c-accent), var(--c-accent)) center / 100% 23px no-repeat;
    color: var(--c-on-accent);
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: 32.4px;
    text-align: center;
}

.hof-bio {
    display: grid;
    gap: 35px;
}

.hof-bio__media {
    overflow: hidden;
    border-radius: 13px;
}

.hof-bio__media img {
    width: 100%;
    aspect-ratio: 692 / 502;
    object-fit: cover;
    object-position: left center; /* the "BIKER HERO" lettering is on the left */
}

.facts {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.facts > div + div {
    margin-top: 12px;
}

.facts dt {
    display: inline;
    color: var(--c-white);
    font-weight: 700;
    text-transform: uppercase;
}

.facts dd {
    display: inline;
    margin: 0;
}

.hof-bio__facts .bar-heading {
    margin: 35px 0 14px;
}

.bar-heading--kerjaya {
    margin: 38px 0 35px;
}

.hof-table {
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--c-white);
}

.hof-table__row {
    padding: 17px 0;
}

.hof-table__row + .hof-table__row {
    border-top: 1px solid var(--c-white);
}

.hof-table dt {
    color: var(--c-white);
    font-size: 23.1px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.hof-table dd {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 25px;
}

.hof-follow__title {
    margin: 39px 0 8px;
    font-size: 26.5px;
    line-height: 54.7px;
}

.hof-follow {
    display: grid;
    gap: 29px;
    margin-bottom: 48px; /* no banner on this page: the footer follows */
}

.hof-follow__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    min-height: 46px;
    padding: 0 17px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

a.hof-follow__link:hover,
a.hof-follow__link:focus-visible {
    background: var(--c-white);
    color: var(--c-black);
}

.hof-follow__icon {
    width: 27px;
    height: 27px;
}

@media (min-width: 768px) {
    .hof-bio {
        grid-template-columns: 692fr 516fr;
        gap: 47px;
        align-items: start;
    }

    .hof-bio__media {
        border-radius: 23px;
    }

    .hof-bio__media img {
        aspect-ratio: 692 / 502;
    }

    .hof-bio__facts {
        padding-top: 55px;
    }

    .facts {
        font-size: 23.1px;
        line-height: 1.3;
    }

    .facts > div + div {
        margin-top: 20px;
    }

    .hof-bio__facts .bar-heading {
        min-width: 226px;
        margin: 42px 0 13px;
    }

    .bar-heading--kerjaya {
        min-width: 226px;
        margin: 40px 0 38px;
    }

    .hof-table {
        padding: 0 36px;
    }

    .hof-table__row {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 11px;
        align-items: center;
        min-height: 98px;
        padding: 15px 0;
    }

    .hof-table dd {
        margin: 0;
        font-size: 23.1px;
        line-height: 34px;
    }

    .hof-follow__title {
        margin-top: 44px;
    }

    /* Figma: 384 / 401 / 355 wide buttons spread across the 1204 row. */
    .hof-follow {
        display: grid;
        grid-template-columns: 384fr 401fr 355fr;
        gap: 32px;
        margin-bottom: 79px;
    }
}


/* --- TBR IV home hero: four banners + pop-up forms (Phase 1) --------------- */
/* Banner 1 keeps the brand / stats / sign-up layout above; banners 2-4 are a
   full photo with a big headline. Their pop-ups slide in on the right (a
   sheet over the page on phones). */
.hero__slide--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 10%) 60%, rgb(0 0 0 / 0%) 100%);
}

.hero.has-panel .hero__slide--photo::after {
    background: rgb(0 0 0 / 55%);
}

.hero__layer--banner {
    position: relative;
    min-height: 330px;
    padding-top: 34px;
}

.hero__layer--banner .hero__headline {
    left: 0;
    width: auto;
    font-size: 44px;
    line-height: 46px;
}

.hero__sub {
    margin-top: 10px;
    max-width: 330px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgb(0 0 0 / 50%);
}

.hero__sub em {
    font-style: italic;
}

.hero__cats {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.hero__cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    min-height: 68px;
    padding: 6px 4px;
    border-radius: 8px;
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

.hero__cat img {
    width: 30px;
    height: 26px;
    object-fit: contain;
}

.hero__cat:hover,
.hero__cat:focus-visible {
    color: var(--c-white);
    transform: translateY(-3px);
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 14px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 13px;
    font-weight: 700;
}

.hero__cta:hover,
.hero__cta:focus-visible {
    color: var(--c-white);
}

/* Green buttons breathe so people can tell they're clickable. */
.cta-pulse {
    transition: transform 0.2s var(--ease);
    animation: cta-pulse 2.2s ease-out infinite;
}

@keyframes cta-pulse {
    0% { box-shadow: 0 0 0 0 rgb(2 129 80 / 70%); }
    70% { box-shadow: 0 0 0 12px rgb(2 129 80 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(2 129 80 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
    .cta-pulse {
        animation: none;
    }
}

/* Phase 2 voucher page: shown, but grey and not clickable yet. */
.hero__voucher {
    position: absolute;
    top: 14px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--c-grey-500);
    color: var(--c-grey-400);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    cursor: not-allowed;
    filter: grayscale(1);
}

.hero__voucher img {
    width: 26px;
    height: auto;
    opacity: 0.6;
}

.stats__note {
    margin-top: 8px;
    font-size: 9px;
    font-weight: 700;
}

.signup-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.signup-card__badge {
    flex-shrink: 0;
    width: 70px;
    height: auto;
}

/* Pop-up panel: a sheet over the page on phones. */
.hero-panel {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    max-height: 88vh;
    padding: 22px 20px 24px;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    background: #2b2b2b;
    box-shadow: 0 -10px 40px rgb(0 0 0 / 50%);
    color: var(--c-white);
}

.hero-panel[hidden] {
    display: none;
}

.hero-panel__close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.hero-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 30px;
}

.hero-panel__head img {
    flex-shrink: 0;
    width: 78px;
    height: auto;
}

.hero-panel__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
}

.hero-panel__lead {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.4;
}

.hero-panel__thanks {
    text-align: center;
}

.hero-panel__thanks .hero-panel__head {
    justify-content: center;
}

.hero-panel__thanks p:not(.hero-panel__title) {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.hero-panel__form {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.hero-field {
    display: grid;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-field input:not([type=file]),
.hero-field select,
.hero-field textarea,
.hero-check__other {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: var(--c-grey-700);
    color: var(--c-white);
    font: 500 13px var(--font-body);
    text-transform: none;
}

.hero-field select {
    appearance: auto;
}

.hero-field input[type=file] {
    font: 500 12px var(--font-body);
    text-transform: none;
}

.hero-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.hero-field__row input {
    flex: 1 1 180px;
}

.hero-field__link {
    padding: 0;
    background: none;
    color: var(--c-white);
    font: 600 12px var(--font-body);
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
}

.hero-field__hint {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
}

.hero-checks {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
}

.hero-checks legend {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-checks legend em {
    font-weight: 500;
    text-transform: none;
}

.hero-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.hero-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--c-accent);
}

.hero-check input:disabled + span {
    opacity: 0.45;
}

.hero-check__other[hidden] {
    display: none;
}

.hero-panel__submit {
    min-height: 40px;
    margin-top: 6px;
    border-radius: 0;
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.hero-panel__submit:disabled {
    opacity: 0.6;
}

.hero-panel .field__error {
    margin-top: -4px;
}

.hero-panel--thanks {
    text-align: left;
}

.hero-panel__member {
    width: 90px;
    height: auto;
}

.hero-panel--thanks .hero-panel__title {
    margin-top: 10px;
    font-size: 26px;
}

.hero-socials {
    margin-top: 16px;
}

.hero-socials__label {
    margin-left: 92px;
    font-size: 11px;
    font-weight: 700;
}

.hero-socials__row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}

.hero-socials__row img {
    width: 78px;
    height: 44px;
    object-fit: contain;
}

.hero-socials__row a {
    color: var(--c-white);
}

.hero-socials__row a:hover,
.hero-socials__row a:focus-visible {
    color: var(--c-accent);
}

.hero-socials__icon {
    width: 30px;
    height: 30px;
}

@media (min-width: 768px) {
    .hero__layer--banner {
        min-height: 420px;
        padding-top: 70px;
    }

    .hero__layer--banner .hero__headline {
        font-size: 76px;
        line-height: 78px;
    }

    .hero__sub {
        max-width: 420px;
        font-size: 15px;
    }

    .hero__cat {
        width: 96px;
        min-height: 90px;
        font-size: 14px;
    }

    .hero__cat img {
        width: 46px;
        height: 36px;
    }

    .hero__voucher {
        top: 40px;
        font-size: 16px;
    }

    .hero-panel {
        position: absolute;
        inset: 30px var(--gutter) auto auto;
        z-index: 5;
        width: 460px;
        max-height: none;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgb(0 0 0 / 50%);
    }
}

/* Desktop (1440 frame, hero from y=82): headline at (96,91) 112px Oswald,
   category buttons 104x98 at y=414, pop-up 460 wide on the right. */
@media (min-width: 1100px) {
    .hero__layer--banner {
        position: absolute;
        top: 0;
        left: var(--gutter);
        right: var(--gutter);
        min-height: 0;
        padding-top: 90px;
    }

    .hero__layer--banner .hero__headline {
        font-size: 112px;
        line-height: 113px;
    }

    .hero__sub {
        margin-top: 14px;
        max-width: 520px;
        font-size: 17px;
    }

    .hero__sub--long {
        max-width: 560px;
    }

    .hero__cats {
        gap: 15px;
        margin-top: 26px;
    }

    .hero__cat {
        width: 104px;
        min-height: 98px;
        font-size: 15px;
    }

    .hero__cta {
        min-height: 36px;
        margin-top: 22px;
        padding: 0 22px;
        font-size: 15px;
    }

    .hero__voucher {
        top: 91px;
        right: 110px;
        padding: 10px 16px;
        font-size: 19px;
    }

    .hero__voucher img {
        width: 43px;
    }

    .hero-panel {
        top: 38px;
        right: calc(var(--gutter) - 56px);
        width: 451px;
        padding: 26px 36px 30px;
    }

    .hero-panel__title {
        font-size: 30px;
    }

    .hero-panel__lead {
        font-size: 13px;
    }

    .stats__note {
        position: absolute;
        top: 585px;
        left: calc(var(--gutter) + 2px);
        margin: 0;
        font-size: 11px;
    }

    .signup-card__badge {
        width: 106px;
    }

    /* Banner 1's stats, card and its note belong to that banner only. */
    .hero:not([data-active="0"]) [data-hero-slide-only="0"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    [data-hero-slide-only] {
        transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
    }

    .hero[data-active="0"] [data-hero-slide-only="0"] {
        transition: opacity 0.6s var(--ease);
    }

    .hero.has-panel .hero__signup {
        opacity: 0;
        visibility: hidden;
    }
}

/* Phones/tablets: banners 2-4 need more room than the brand banner's photo
   band, so the band and the brand banner grow to match. */
@media (max-width: 767px) {
    .hero--banners .hero__backdrop {
        height: 330px;
    }

    .hero--banners .hero__intro {
        min-height: 330px;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .hero--banners .hero__intro {
        min-height: 420px;
    }
}

/* --- TBR IV: section subtitle + green rule (under the badge headings) ------ */
.section-lead {
    max-width: 610px;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-accent);
    color: var(--c-white);
    font-size: 11px;
    font-weight: 700;
}

.section-lead--rule {
    margin-top: 0;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .section-lead {
        margin-top: 12px;
        padding-bottom: 14px;
        font-size: 14px;
    }
}

/* --- Bike Shop "Lai Turun Padang": arrows to the next five states ----------- */
.bike-shop__arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 100%;
    min-height: 24px;
    color: var(--c-accent);
}

.bike-shop__arrow-icon {
    width: 12px;
    height: 14px;
}

.bike-shop__arrow-icon--prev {
    transform: scaleX(-1);
}

.bike-shop__arrow:hover,
.bike-shop__arrow:focus-visible {
    color: var(--c-white);
}

/* --- Gathering band: three cards on desktop (TBR IV) ----------------------- */
@media (min-width: 1100px) {
    .gathering__features {
        grid-template-columns: repeat(3, auto);
        gap: 20px;
    }

    .gathering__icon {
        width: 92px;
        height: 92px;
        margin-right: -44px;
    }

    .gathering__body,
    .gathering__feature:last-child .gathering__body {
        min-width: 0;
        width: 300px;
        min-height: 80px;
        padding: 10px 16px 10px 58px;
    }

    .gathering__feature-title {
        font-size: 19px;
    }

    .gathering__feature p {
        margin-top: 6px;
        font-size: 12px;
        line-height: 16px;
    }

    .gathering__highlight {
        font-size: 42px;
        line-height: 48px;
    }
}

/* --- "Coming soon" band (Phase 1): slogan + programme logos ---------------- */
.coming-soon {
    position: relative;
    margin: 30px 0 0;
    padding: 70px 0 80px;
    background: url("../img/texture-band.webp") center top / cover no-repeat;
}

.coming-soon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    aspect-ratio: 1440 / 251;
    background: url("../img/ripped-edge.svg?v=2") center top / 100% auto no-repeat;
    pointer-events: none;
}

.coming-soon__inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 26px;
    text-align: center;
}

.coming-soon__slogan {
    display: inline-block;
    padding: 6px 14px;
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.coming-soon__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
}

.coming-soon__logos img {
    width: 140px;
    height: auto;
}

@media (min-width: 768px) {
    .coming-soon {
        margin-top: 60px;
        padding: 120px 0 170px;
    }

    .coming-soon__slogan {
        padding: 8px 20px;
        font-size: 48px;
    }

    .coming-soon__logos {
        gap: 20px 40px;
    }

    .coming-soon__logos img {
        width: 300px;
    }

    .coming-soon--inline .coming-soon__inner {
        grid-auto-flow: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .coming-soon--inline .coming-soon__logos img {
        width: 320px;
    }
}

.section--hof-soon {
    padding-bottom: 0;
}

/* --- Support pages (TBR IV): T&C / Dasar Privasi card, FAQ accordion ------- */
.support-page__title {
    margin-bottom: 20px;
    font-size: 32px;
    text-align: center;
}

.support-page__subtitle {
    margin: -8px 0 22px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.support-page__card {
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 22px;
    border-radius: 10px;
    background: var(--c-grey-900);
    font-size: 13px;
    line-height: 1.6;
}

.support-page__card p + p {
    margin-top: 14px;
}

.support-page__card strong {
    font-weight: 700;
}

.faq {
    display: grid;
    gap: 8px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq__item {
    background: var(--c-grey-900);
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__sign {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 12px;
    height: 2px;
    background: var(--c-accent);
}

.faq__sign::after {
    transform: rotate(90deg);
    transition: transform 0.2s var(--ease);
}

.faq__item[open] .faq__sign::after {
    transform: rotate(0deg);
}

.faq__answer {
    padding: 12px 16px 16px;
    background: #ececec;
    color: #111;
    font-size: 13px;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .support-page__title {
        font-size: 48px;
    }

    .support-page__card {
        padding: 34px 40px;
        font-size: 14px;
    }

    .faq {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* --- Auth pages: "Member" badge beside the title (TBR IV) ------------------- */
.auth-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.auth-card__badge {
    width: 120px;
    height: auto;
}

.auth--welcome .auth-card__badge,
.auth-card > .auth-card__badge {
    display: block;
    margin: 0 auto 10px;
}

@media (min-width: 768px) {
    .auth-card__badge {
        width: 160px;
    }
}

/* --- Profile: "Member" badge over the tabs; Phase 2 tabs greyed ----------- */
.profile__badge {
    display: block;
    width: 150px;
    height: auto;
    margin-bottom: 10px;
}

.profile__tab--soon {
    color: var(--c-grey-500);
    cursor: not-allowed;
}

.profile__role input:disabled + span {
    opacity: 1;
}

/* --- Crew form header: Marshal and Pit Crew badges either side ------------- */
.crew-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.crew-head img {
    width: 70px;
    height: auto;
}

@media (min-width: 768px) {
    .crew-head img {
        width: 150px;
    }
}

/* --- Facebook reels play portrait in the lightbox --------------------------- */
.lightbox:has(.lightbox__reel) {
    width: min(100% - 2rem, 400px);
}

.lightbox__stage .lightbox__reel {
    aspect-ratio: 9 / 16;
    max-height: calc(100dvh - 6rem);
}

/* --- Chat navigator "TBR PM Tepi" + back-to-top (TBR IV) -------------------- */
.chat-nav .chat-button {
    border-radius: 50%;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 74px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}

.back-to-top[hidden] {
    display: none;
}

.back-to-top img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
    .back-to-top {
        right: 34px;
        bottom: 96px;
    }
}

.chat-panel {
    position: fixed;
    right: 12px;
    bottom: 76px;
    left: 12px;
    z-index: 55;
    display: flex;
    flex-direction: column;
    max-height: min(640px, calc(100dvh - 100px));
    overflow: hidden;
    border: 1px solid #555;
    border-radius: 10px;
    background: #1d1d1d;
    box-shadow: 0 10px 40px rgb(0 0 0 / 55%);
    color: var(--c-white);
}

.chat-panel[hidden] {
    display: none;
}

@media (min-width: 768px) {
    .chat-panel {
        right: 30px;
        bottom: 96px;
        left: auto;
        width: 380px;
    }
}

.chat-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #333;
}

.chat-panel__head img {
    width: 38px;
    height: 38px;
}

.chat-panel__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.chat-panel__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.chat-panel__status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #29c46a;
}

.chat-panel__close {
    margin-left: auto;
    padding: 0 4px;
    background: none;
    color: var(--c-white);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.chat-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
}

.chat-panel__welcome {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-panel__welcome img {
    flex-shrink: 0;
    width: 86px;
    height: 86px;
}

.chat-bubble {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.chat-bubble--bot {
    background: #2e2e2e;
}

.chat-bubble--user {
    background: var(--c-accent);
}

.chat-bubble__title {
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.chat-panel__prompt {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.chat-menu {
    display: grid;
    gap: 8px;
}

.chat-menu__item {
    border-radius: 999px;
}

.chat-menu__item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 24px;
    background: #2e2e2e;
    list-style: none;
    cursor: pointer;
}

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

.chat-menu__item summary::after {
    content: "\203A";
    margin-left: auto;
    color: var(--c-accent);
    font-size: 24px;
    line-height: 1;
}

.chat-menu__item[open] summary::after {
    transform: rotate(90deg);
}

.chat-menu__item summary img {
    width: 26px;
    height: 28px;
}

.chat-menu__item summary span {
    display: grid;
    font-size: 13px;
}

.chat-menu__item summary small {
    font-size: 10px;
    font-weight: 400;
}

.chat-menu__more {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 8px 6px 4px 14px;
    font-size: 11px;
    line-height: 1.4;
}

.chat-menu__go {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.chat-menu__go:hover,
.chat-menu__go:focus-visible {
    color: var(--c-white);
}

.chat-topics {
    display: grid;
    gap: 6px;
    padding: 8px 0 2px 34px;
}

.chat-topics button,
.chat-chip {
    padding: 6px 12px;
    border: 1px solid var(--c-accent);
    border-radius: 999px;
    background: #2a2a2a;
    color: var(--c-white);
    font: 600 12px var(--font-body);
    text-align: left;
    cursor: pointer;
}

.chat-topics button:hover,
.chat-chip:hover,
.chat-chip:focus-visible {
    background: var(--c-accent);
    color: var(--c-white);
}

.chat-thread {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.chat-row {
    display: flex;
}

.chat-row--user {
    justify-content: flex-end;
}

.chat-row--bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- TBR IV fit-and-finish ------------------------------------------------- */
.hero-checks--two {
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
}

.hero-checks--two legend,
.hero-checks--two .hero-check__other {
    grid-column: 1 / -1;
}

@media (min-width: 1100px) {
    /* The TBR IV tagline is longer: two lines under the logo, clear of the stats. */
    .hero--banners .hero__title {
        max-width: 520px;
        font-size: 20px;
        line-height: 1.25;
    }

    .signup-card__head .signup-card__title {
        font-size: 32px;
    }
}

/* Social buttons on the promo banners are icon-only in TBR IV. */
.promo-banner__social {
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border: 1.5px solid var(--c-white);
    border-radius: 4px;
    background: transparent;
    font-size: 0;
}

.promo-banner__social .promo-banner__social-icon {
    width: 18px;
    height: 18px;
}

.promo-banner__social[href]:hover,
.promo-banner__social[href]:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-white);
}

/* TBR IV: the longer gathering lines wrap on phones instead of widening the page. */
@media (max-width: 767px) {
    .gathering__title,
    .gathering__highlight {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Phones: the grey Phase 2 voucher button would sit on the headline. */
@media (max-width: 767px) {
    .hero__voucher {
        display: none;
    }
}

/* === TBR IV client feedback (Lark, 10 Nov 2026) ============================ */

/* Nav: dropdown items on one line (Borang Pendaftaran). */
@media (min-width: 1100px) {
    .site-nav__submenu {
        min-width: max-content;
    }

    .site-nav__submenu a {
        white-space: nowrap;
    }
}

/* Hero (1440 frame): tagline under the logo at 18px, stats 93px boxes with a
   small "M+", the remark centred under them, rider 433 wide at (501, 41). */
.stats__value small {
    font-size: 0.5em;
    vertical-align: super;
}

.signup-card {
    position: relative;
}

.signup-card__close {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--c-grey-900);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.hero__signup.is-closed {
    display: none;
}

@media (min-width: 1100px) {
    .hero--banners .hero__title {
        max-width: 500px;
        margin: -21px 0 0 3px;
        font-size: 18px;
        line-height: 22px;
    }

    .hero--banners .hero__rider {
        top: 41px;
        left: calc(var(--gutter) + 407px);
        width: 433px;
    }

    .hero--banners .stats {
        grid-template-columns: repeat(4, 93px);
        gap: 10px;
    }

    .hero--banners .stats__item {
        min-height: 88px;
        padding-top: 14px;
    }

    .hero--banners .stats__value {
        font-size: 36px;
        white-space: nowrap;
    }

    .hero--banners .stats__label {
        font-size: 11px;
    }

    .hero--banners .stats__note {
        top: 575px;
        width: 402px;
        text-align: center;
    }

    /* Nothing under the card any more, so the hero is the Figma height again. */
    .hero--banners {
        height: 726px;
    }

    .hero--banners .hero__backdrop {
        height: 757px;
    }
}

/* Green buttons: a clear nudge every few seconds so they read as clickable. */
.cta-pulse {
    animation: cta-pulse 1.8s ease-out infinite, cta-nudge 3.6s ease-in-out infinite;
}

@keyframes cta-pulse {
    0% { box-shadow: 0 0 0 0 rgb(2 129 80 / 85%); }
    70% { box-shadow: 0 0 0 16px rgb(2 129 80 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(2 129 80 / 0%); }
}

@keyframes cta-nudge {
    0%, 70%, 100% { transform: none; }
    74% { transform: translateY(-4px) rotate(-2deg); }
    78% { transform: translateY(0) rotate(2deg); }
    82% { transform: translateY(-3px) rotate(-1.5deg); }
    86% { transform: translateY(0) rotate(1deg); }
    90% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-pulse {
        animation: none;
    }
}

/* Pop-ups: the "x" is a small white square on the corner, as in Figma. */
.hero-panel__close {
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 18px;
}

@media (min-width: 768px) {
    .hero-panel {
        overflow: visible;
    }
}

/* Gathering band: Figma height (about 500px) instead of 675. */
@media (min-width: 768px) {
    .gathering {
        min-height: 540px;
        padding: 95px 0 110px;
        background-size: 100% 520px;
    }

    .gathering::after {
        top: 390px;
    }

    .gathering__features {
        margin-top: 30px;
    }
}

/* Promo banners: 952 x 302 like the Figma ad banners, copy sized to fit. */
.banner-carousel {
    max-width: 952px;
}

@media (min-width: 768px) {
    .promo-banner {
        min-height: 302px;
    }

    .promo-banner__media {
        flex-basis: 48%;
    }

    .promo-banner__body {
        padding: 30px 36px 28px 30px;
    }

    .promo-banner__title {
        font-size: 30px;
        line-height: 34px;
    }

    .promo-banner--social .promo-banner__title {
        max-width: 380px;
    }

    .promo-banner__text {
        margin-top: 14px;
        font-size: 12px;
        line-height: 17px;
    }
}

/* Social icons: the provided outline icons, no box around them. */
.promo-banner__social {
    width: 26px;
    height: 26px;
    border: 0;
    background: none;
}

.promo-banner__social .promo-banner__social-icon {
    width: 22px;
    height: 22px;
}

.promo-banner__social[href]:hover,
.promo-banner__social[href]:focus-visible {
    border: 0;
    background: none;
    color: var(--c-accent);
}

/* Section headings: subtitle tight under the title, then the green rule,
   then the tabs (Janjih Tak Tinggal Belakang, Lai Turun Padang). */
.section-lead {
    margin-top: 6px;
}

.section-lead + .tabs,
.section-lead + nav {
    margin-top: 14px;
}

@media (min-width: 768px) {
    .section-lead {
        margin-top: 8px;
        padding-bottom: 12px;
    }

    .section-lead--rule {
        margin-top: 16px;
        margin-bottom: 18px;
        padding-bottom: 0;
    }
}

/* Coming-soon bands: taller grey band, more room between slogan and logos. */
@media (min-width: 768px) {
    .coming-soon {
        padding: 150px 0 200px;
    }

    .coming-soon__inner {
        gap: 50px;
    }

    .coming-soon__logos img {
        width: 330px;
    }

    .coming-soon--inline .coming-soon__inner {
        gap: 60px;
    }

    .coming-soon--inline .coming-soon__logos img {
        width: 410px;
    }
}

/* Panas Atas Jalan card: Figma height (433) and room before the footer. */
@media (min-width: 768px) {
    .section--paj .feature {
        min-height: 433px;
    }

    .section--paj {
        padding-bottom: 70px;
    }
}

/* Crew form: consent ticks line up on the left. */
.crew-form .field--checkbox {
    justify-content: flex-start;
    text-align: left;
}

/* FAQ: two independent columns. */
.faq {
    align-items: start;
}

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

/* T&C / Privacy: headings, bullet lists, update date. */
.support-page__heading {
    margin: 4px 0 10px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}

.support-page__block + .support-page__block {
    margin-top: 16px;
}

.support-page__block p + p {
    margin-top: 2px;
}

.support-page__list {
    margin: 4px 0 6px;
    padding-left: 20px;
    list-style: disc;
}

.support-page__list li {
    margin: 2px 0;
}

.support-page__updated {
    text-align: right;
    font-size: 0.92em;
}

/* Feedback round 1, second pass: tighter subtitle, band heights as Figma. */
@media (min-width: 768px) {
    .section-heading + .section-lead {
        margin-top: -14px;
    }

    .coming-soon {
        padding: 80px 0 210px;
    }

    .coming-soon--inline {
        padding: 50px 0 130px;
    }

    .promo-banner--social .promo-banner__title {
        max-width: 300px;
    }

    .site-footer svg {
        width: 16px;
        height: 16px;
    }
}

/* Feedback round 1: Pit Stop pop-up at the Figma 1440 size (panel 1246, banner 952, icon-only socials). */
.place-dialog .promo-banner__social {
    font-size: 0;
}

@media (min-width: 768px) {
    .place-dialog {
        width: min(1246px, calc(100% - 32px));
    }

    .place-dialog__panel {
        padding: 0 0 0 46px;
        gap: 40px;
    }

    .place-dialog__panel .place-dialog__image {
        min-height: 390px;
        border-radius: 0 12px 12px 0;
        object-fit: cover;
    }

    .place-dialog__name {
        font-size: 28px;
        line-height: 34px;
    }

    .place-dialog .banner-carousel {
        max-width: 952px;
        margin-top: 40px;
    }
}

/* Feedback round 2 (11 Nov) ------------------------------------------------ */
/* Stats: the number in the green box, the label on a grey strip under it (Figma). */
.stats__item,
.hero--banners .stats__item {
    justify-content: stretch;
    align-items: stretch;
    padding: 0;
    background: none;
}

.stats__value {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 6px 6px 0 0;
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.stats__label,
.hero--banners .stats__label {
    margin: 0;
    padding: 4px 2px;
    background: var(--c-grey-900);
    color: var(--c-white);
}

/* Wide screens (over 1440): the photos and torn edges scale with the width,
   so keep each photo's people in frame and the torn edges at their 1440 height. */
@media (min-width: 1100px) {
    .hero__slide img[src*="hero-b2"] {
        object-position: center 100%;
    }

    .hero__slide img[src*="hero-b3"] {
        object-position: center 15%;
    }

    .hero__slide img[src*="hero-b4"] {
        object-position: center 5%;
    }
}

@media (min-width: 1441px) {
    .gathering::after,
    .coming-soon::after {
        aspect-ratio: auto;
        height: 251px;
        /* Full 283px artwork, top-aligned in a 251px box: the shape reaches the
           bottom and the SVG's transparent tail is cut off, as at 1440. */
        background-size: 100% 283px;
    }

    .gathering {
        background-size: 100% 100%;
    }

    .coming-soon {
        background-size: 100% max(100%, 652px);
    }
}

/* Pit Stop cards: the whole card opens the location pop-up. */
.card--place {
    cursor: pointer;
}

/* Feedback round 2 (12 Nov): home hero ------------------------------------- */
/* "10+": a bigger, centred "+" than the small "M+" superscripts (Figma). */
.stats__value .stats__plus {
    font-size: 0.8em;
    vertical-align: 0.12em;
}

/* Banner subtitles in regular type, not italic. */
.hero__sub em {
    font-style: normal;
}

@media (max-width: 1099px) {
    /* Banners 2-4 have no stats or sign-up card on phones and tablets. */
    .hero:not([data-active="0"]) [data-hero-slide-only="0"] {
        display: none;
    }

    .stats__note {
        text-align: center;
    }
}

/* Phones: a pop-up is a card under the banner (mobile Figma), its "x" on the corner. */
@media (max-width: 767px) {
    .hero-panel {
        position: relative;
        inset: auto;
        z-index: 5;
        max-height: none;
        margin: 22px 0 0;
        overflow: visible;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
    }
}

/* Gathering band: three equal boxes, text centred in each; on phones more
   room before the torn edge (TBR IV feedback round 2). */
.gathering__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767px) {
    .gathering {
        padding-bottom: 110px;
    }
}

@media (min-width: 1100px) {
    .gathering__body,
    .gathering__feature:last-child .gathering__body {
        width: 320px;
        min-height: 86px;
    }

    .gathering__feature-title {
        white-space: nowrap;
    }
}

/* "Standby" bands and Panas Atas Jalan (TBR IV feedback round 2) ------------ */
@media (max-width: 767px) {
    /* Marshal / Pit Stop / On Tour on one row, as in the mobile Figma. */
    .coming-soon__logos {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .coming-soon__logos img {
        width: calc((100vw - 56px) / 3);
        max-width: 130px;
    }

    .coming-soon {
        padding: 60px 0 100px;
    }

    .coming-soon__inner {
        gap: 20px;
    }

    /* Biker Hero band: logo closer to the slogan and the torn edge. */
    .coming-soon--inline {
        padding: 40px 0 80px;
    }

    .coming-soon--inline .coming-soon__inner {
        gap: 10px;
    }

    .coming-soon--inline .coming-soon__logos img {
        width: 170px;
        max-width: none;
    }

    /* Panas Atas Jalan: room under the card before the footer, and the green
       rule clear of the photo. */
    .section--paj {
        padding-bottom: 50px;
    }

    .section--paj .section-lead--rule {
        margin: 14px 0 18px;
    }
}

@media (min-width: 768px) {
    /* Smaller programme logos (designer feedback). */
    .coming-soon__logos img {
        width: 270px;
    }

    /* Biker Hero band: the logo clear of the torn edge underneath. */
    .coming-soon--inline {
        padding: 60px 0 190px;
    }

    .coming-soon--inline .coming-soon__logos img {
        width: 360px;
    }
}

/* Logged in, banner 1 has no sign-up card: centre the logo, rider and stats
   instead of leaving the right side empty (TBR IV feedback round 2). */
@media (min-width: 1100px) {
    .hero--member .hero__layer--brand,
    .hero--member .hero__stats {
        transform: translateX(clamp(0px, (100vw - 1080px) / 2, 240px));
    }
}

/* Text in regular type, not italic (TBR IV feedback round 2). */
.crew-intro,
.profile__lead {
    font-style: normal;
}

/* Crew form thank-you: centred, as in Figma. */
.crew-done {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}

.crew-done__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}

/* "Cer Cek Inbox!": the instruction sits between the title and the note. */
.auth-card--welcome .auth-card__lead--center {
    margin: 22px auto 0;
    font-size: 15px;
}

.auth-card--welcome .auth-card__note {
    margin-top: 30px;
    text-align: center;
}

/* Phones: profile labels (Peranan included) at the mobile Figma size. */
@media (max-width: 767px) {
    .profile__form .field__label {
        font-size: 12px;
    }
}

/* Card rails: a page with fewer cards keeps normal card heights instead of
   stretching its row to the tallest page (TBR IV feedback round 2). */
@media (min-width: 768px) {
    .rail__page {
        align-content: start;
    }
}

/* Close buttons: one look everywhere, the small white square with a black x
   used on the home pop-ups (TBR IV feedback round 2). */
.lightbox__close {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-black);
}

.lightbox__close svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 767px) {
    .place-dialog__close {
        top: -12px;
        right: -10px;
        width: 28px;
    }

    /* Panas Atas Jalan cards: share button on the right. */
    .card--video .card__actions--start {
        align-self: flex-end;
    }

    /* Privacy / Terms: the update date in small type. */
    .support-page__updated {
        font-size: 11px;
    }
}

/* Chat navigator: "Roger sat!" sits on the right. */
.chat-menu__more {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-menu__go {
    margin-left: auto;
}

/* iPhone Safari draws date fields narrower than text boxes, text centred:
   make them line up with the other boxes. */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    text-align: left;
}

input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Mobile menu: the items with a submenu line up with the plain links, and
   the rows sit closer together (TBR IV feedback round 2). */
.mobile-nav__link--toggle {
    gap: 6px;
    padding: 0;
    color: var(--c-white);
    font-family: inherit;
}

.mobile-nav__list > li + li {
    margin-top: 30px;
}

.mobile-nav__auth {
    margin-top: 36px;
}

/* Phones: the banner ad at the mobile Figma size (about 330 x 220): smaller
   copy, icons along the bottom, small dots like the hero (TBR IV feedback round 2). */
@media (max-width: 767px) {
    .promo-banner {
        min-height: 220px;
    }

    .promo-banner__body {
        display: flex;
        flex-direction: column;
        padding: 14px 12px 14px 14px;
    }

    .promo-banner__title {
        font-size: 16px;
        line-height: 1.1;
    }

    .promo-banner__text {
        margin-top: 8px;
        font-size: 10px;
        line-height: 1.4;
    }

    .promo-banner__socials {
        margin-top: auto;
        padding-top: 10px;
        gap: 10px;
    }

    .promo-banner__media,
    .promo-banner--teal .promo-banner__media {
        flex-basis: 45%;
    }

    .promo-banner__text {
        line-height: 13px;
    }

    /* The photo fills its half of the card instead of setting the height. */
    .promo-banner__media img {
        position: absolute;
        inset: 0;
    }

    .banner-carousel__track {
        touch-action: pan-x pan-y;
    }

    .banner-carousel__dots {
        gap: 7px;
        margin-top: 14px;
    }

    .banner-carousel__dot {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 767px) {
    .profile__role span {
        font-size: 12px;
    }
}

/* Feedback round 2b (12 Nov, phone) ---------------------------------------- */
.gathering__br {
    display: none;
}

/* Panas Atas Jalan cards: share button on the right (laptop too). */
.card--video .card__actions--start {
    align-self: flex-end;
}

@media (max-width: 767px) {
    .gathering__br,
    .promo-banner__br {
        display: inline;
    }

    /* Gathering band: content further down, in the middle of the grey band;
       the heading on one line. */
    .gathering {
        padding-top: 75px;
    }

    .gathering__title {
        font-size: clamp(14px, 4.6vw, 22px);
        white-space: nowrap;
    }

    .gathering__highlight {
        white-space: normal;
    }

    /* Pit Stop: dots and swipe only, no arrows. */
    .section--port-rider .rail__arrow {
        display: none;
    }

    /* Hero dots on the photo, clear of the stat boxes. */
    .hero__dots {
        position: relative;
        z-index: 3;
        margin-top: -64px;
        margin-bottom: 52px;
    }

    /* Rider sits next to the logo and tagline instead of drifting to the
       right edge on wider phones. */
    .hero__rider {
        right: auto;
        left: calc(var(--gutter) + 165px);
    }
}

/* Promo banner (laptop too): "Satu Minat, / Satu Bikerhood." on two lines, and
   the photo's bottom edge trimmed: some uploads have a light 1px line there. */
.promo-banner__media {
    overflow: hidden;
}

.promo-banner__media img {
    display: block;
    height: calc(100% + 3px);
    object-position: center top;
}

/* Feedback 12 Nov (evening, phone) ----------------------------------------- */
/* Many uploaded photos have a light 1px line on their right/bottom edge.
   Trim 2px off every side of card thumbnails so it never shows. */
.card__media img {
    width: calc(100% + 4px);
    max-width: none;
    height: calc(100% + 4px);
    margin: -2px;
}

/* Pit Stop pop-up photo (no wrapper): clip 1% off each side, then scale back up
   to the same box, so the edge line is cut off. */
.place-dialog__image {
    clip-path: inset(1%);
    transform: scale(1.0205);
}

@media (min-width: 768px) {
    .place-dialog__panel .place-dialog__image {
        clip-path: inset(1% round 0 12px 12px 0);
    }
}

/* Crew form: room between "Berminat untuk menjadi" and the agreement ticks,
   and the legend in line with the other labels. */
.crew-form__roles {
    margin-bottom: 10px;
}

.crew-form__roles legend {
    padding: 0;
}

@media (max-width: 767px) {
    /* Hero photos: the people stand on the right of banners 3 and 4. */
    .hero__slide img[src*="hero-b3"] {
        object-position: 100% center;
    }

    .hero__slide img[src*="hero-b4"] {
        object-position: 75% center;
    }

    /* Banners 2-4 have their button at the bottom: dots back below the photo
       there (same total height, so nothing jumps). */
    .hero:not([data-active="0"]) .hero__dots {
        margin-top: -28px;
        margin-bottom: 16px;
    }

    /* Banner 1: rider closer to the logo and tagline. */
    .hero__rider {
        left: calc(var(--gutter) + 140px);
    }
}

/* Facebook reel pop-up: the X sits in its own strip above the video, so it
   never covers Facebook's own "Share" in the player's top corner. */
.lightbox:has(.lightbox__reel) {
    padding-top: 48px;
}

.lightbox__stage .lightbox__reel {
    max-height: calc(100dvh - 6rem - 48px);
}