/* An open header: the page supplies the backdrop, spacing supplies the structure. */
.punch-signup-label-compact { display: none; }
.punch-header {
    top: 0;
    left: 0;
    right: 0;
}
.punch-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -42px;
    background: linear-gradient(180deg, #101721b3, #10172145 65%, #10172100);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    mask-image: linear-gradient(#000 35%, transparent);
    pointer-events: none;
}
.punch-header .punch-nav {
    max-width: none;
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
    padding: 22px clamp(24px, 4.2vw, 96px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.punch-header .punch-header-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
.punch-header .punch-brand {
    gap: 12px;
    padding-right: 0;
    border: 0;
}
.punch-header .punch-brand > .punch-brand-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.punch-header .punch-brand img { width: 48px; height: 48px; }
.punch-header .punch-brand > .punch-brand-wordmark {
    display: block;
    font: 600 17px/1.35 var(--punch-font-display);
    letter-spacing: -.8px;
    color: var(--punch-text);
}
.punch-header .punch-brand-wordmark > span {
    margin-top: 3px;
    font: 400 12px/1.2 var(--punch-font-body);
    letter-spacing: 1.3px;
    color: #a9b5c6;
}
.punch-header .punch-navigation {
    gap: clamp(12px, 1.8vw, 32px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.punch-header .punch-nav-link {
    justify-content: center;
    min-height: 44px;
    padding: 11px 3px;
    gap: 8px;
    border-radius: 0;
    font: 400 14px/1.4 var(--punch-font-body);
    color: #c3cbd9;
    transition: color 280ms ease;
}
.punch-header .punch-nav-link.is-current,
.punch-header .punch-dropdown[open] > .punch-nav-link {
    background: none;
    color: #f1f5ff;
    box-shadow: none;
}
.punch-header .punch-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--punch-focus);
    opacity: 0;
    transform: translate(-50%, 3px) scaleX(.6);
    transition: opacity 280ms ease, transform 320ms var(--punch-ease);
}
.punch-header .punch-nav-link.is-current::after { opacity: .85; transform: translate(-50%, 0) scaleX(1); }
.punch-header .punch-nav-link > .punch-header-icon:first-child { width: 18px; height: 18px; color: var(--punch-accent); }
.punch-header .punch-nav-link > .punch-header-icon:last-child { width: 15px; height: 15px; margin-left: 1px; }
.punch-header .punch-dropdown > summary .punch-header-icon { transform: none; }
.punch-header .punch-dropdown[open] > summary > .punch-header-icon:last-child { transform: rotate(180deg); }
.punch-header .punch-mobile-login { display: none; }
.punch-header .punch-account { min-width: 0; gap: 16px; }
.punch-site .punch-header .punch-button {
    min-height: 46px;
    padding: 11px 15px;
    gap: 9px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}
.punch-site .punch-header .punch-button::before { content: none; }
.punch-header .punch-login {
    --button-bg: transparent;
    --button-line: transparent;
    --button-fg: var(--punch-text);
}
.punch-header .punch-login > svg { display: none; }
.punch-header .punch-signup {
    --button-bg: var(--punch-accent);
    --button-line: transparent;
    --button-shadow: 0 4px 24px #91b0f51a;
}
.punch-header .punch-signup-arrow {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0 0 0 2px;
    border-radius: 0;
    background: none;
    transition: translate 320ms var(--punch-ease);
}
.punch-header .punch-signup-arrow > svg { width: 17px; height: 17px; }

/* Navigation disclosures are broad enough for readable names and descriptions. */
.punch-header .punch-dropdown-panel {
    top: calc(100% + 16px);
    padding: 18px;
    border: 0;
    border-radius: 26px;
    background: #1a2432cc;
    box-shadow: 0 18px 65px #050a143b;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    animation: punch-header-reveal 320ms var(--punch-ease-enter) both;
}
.punch-header .punch-nav-panel { width: 560px; max-width: calc(100vw - 48px); }
.punch-header .punch-dropdown-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.punch-header .punch-dropdown-panel .punch-dropdown-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
    padding: 13px 10px;
    border-radius: 16px;
    color: #e0e7f2;
    transition: background-color 280ms ease, color 280ms ease;
}
.punch-header .punch-link-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 30px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #a6b8d7;
    transition: color 280ms ease;
}
.punch-header .punch-link-copy { min-width: 0; display: grid; gap: 4px; }
.punch-header .punch-link-copy > span { font-size: 13px; font-weight: 400; line-height: 1.45; }
.punch-header .punch-link-copy > small { font-size: 11px; line-height: 1.5; color: #9eacc1; }
.punch-header .punch-dropdown-link > svg:last-child { width: 13px; height: 13px; margin-left: auto; color: #9baccc; }
.punch-header .punch-dropdown-link.is-current { background: color-mix(in srgb, var(--punch-accent) 4%, transparent); box-shadow: none; color: var(--punch-accent-hover); }

/* Account and notifications share the same surface and disclosure behaviour. */
.punch-site .punch-header .punch-user-toggle {
    max-width: 230px;
    padding: 7px 11px 7px 7px;
    --button-bg: transparent;
    --button-line: transparent;
    --button-shadow: none;
}
.punch-header .punch-user-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--punch-accent) 10%, transparent);
    color: #c6d6fa;
    font: 600 15px/1 var(--punch-font-body);
    text-transform: uppercase;
}
.punch-header .punch-user-name { overflow: hidden; text-overflow: ellipsis; }
.punch-header .punch-user-toggle > svg:last-child { width: 15px; height: 15px; }
.punch-header .punch-user-panel { width: 260px; max-width: calc(100vw - 48px); top: calc(100% + 21px); }
.punch-header .punch-user-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 18px;
    margin-bottom: 6px;
    border-bottom: 0;
}
.punch-header .punch-user-heading > span:last-child { display: grid; gap: 3px; min-width: 0; }
.punch-header .punch-user-heading strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.punch-header .punch-user-heading small { font-size: 12px; color: #a8b5c8; }
.punch-header .punch-user-panel a,
.punch-header .punch-user-panel button { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 400 13px/1.5 var(--punch-font-body); }
.punch-header .punch-user-panel a > svg { width: 18px; height: 18px; color: #9aafd0; }
.punch-header .punch-logout { margin-top: 10px; padding-top: 8px; border-top: 0; }
.punch-header .punch-logout button { color: #e8adad; cursor: pointer; }
.punch-header .punch-notifications { position: relative; }
.punch-header .punch-notification-toggle {
    display: grid;
    place-items: center;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #c7d4e8;
    cursor: pointer;
}
.punch-header #notificationsCounter {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 1px 4px;
    border: 2px solid #171e27;
    border-radius: 50%;
    background: #a9bff6;
    color: #111722;
    font: 600 10px/1.3 var(--punch-font-body);
}
.punch-header .punch-notifications > .dropdown-menu {
    inset: auto 0 auto auto !important;
    top: calc(100% + 21px) !important;
    transform: none !important;
    width: 330px;
    min-width: 0;
    max-width: calc(100vw - 48px);
    padding: 18px;
    border: 0;
    border-radius: 26px;
    background: #1a2432cc;
    box-shadow: 0 18px 65px #050a143b;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    animation: punch-header-reveal 320ms var(--punch-ease-enter) both;
}
.punch-header .punch-notifications .dropdown-header { padding: 10px 10px 16px; margin-bottom: 6px; border: 0; color: #e3eaf6; font-size: 14px; }
.punch-header .punch-notifications .dropdown-item { padding: 12px 10px; border-radius: 10px; font-size: 13px; white-space: normal; color: #ccd8ea; }
.punch-header #notifications { max-height: min(400px, 55svh); overflow-y: auto; }
.punch-header .punch-notifications hr { margin: 4px 10px; border-color: #a9bdd11f; opacity: 1; }
.punch-header .punch-notifications .notif-content { min-width: 0; overflow-wrap: anywhere; }
.punch-header .punch-notifications .notif-content > div { margin-bottom: 4px; color: #9cacc4 !important; font-weight: 400 !important; }
.punch-header #noNotificationsLabel { padding: 24px 10px; }
.punch-header #readNotifications { border: 0; margin-top: 8px; color: #b8ccfa; }

@media (hover: hover) and (pointer: fine) {
    .punch-header .punch-nav-link:hover { background: none; color: #fff; }
    .punch-header .punch-nav-link.is-current:hover { background: none; color: #fff; }
    .punch-header .punch-dropdown-link:hover { background: #cad9ff08; }
    .punch-header .punch-dropdown-link:hover .punch-link-icon { background: none; color: #d2dfff; }
    .punch-header .punch-user-panel a:hover, .punch-header .punch-user-panel button:hover { background: #cad9ff08; }
    .punch-header .punch-notification-toggle:hover { background: #cad9ff0b; }
    .punch-header .punch-signup:hover .punch-signup-arrow { translate: 3px 0; }
}
@media (max-width: 1200px) and (min-width: 1101px) {
    .punch-header .punch-nav { gap: 14px; }
    .punch-header .punch-brand { padding-right: 0; }
    .punch-header .punch-nav-link { padding-inline: 3px; }
    .punch-site .punch-header .punch-login { padding-inline: 12px; }
    .punch-header .punch-login > svg { display: none; }
}
@media (max-width: 1100px) {
    .punch-header { top: 0; left: 0; right: 0; }
    .punch-header .punch-nav { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; min-height: 88px; padding: 18px 28px; border-radius: 0; }
    .punch-header .punch-brand { padding-right: 0; border: 0; }
    .punch-header .punch-brand > .punch-brand-mark { width: 48px; height: 48px; border-radius: 0; }
    .punch-header .punch-brand img { width: 44px; height: 44px; }
    .punch-header .punch-account { grid-column: 2; grid-row: 1; }
    .punch-site .punch-header .punch-menu-toggle {
        display: flex; grid-column: 3; grid-row: 1;
        width: 44px; height: 44px; min-width: 44px; min-height: 44px;
        gap: 6px; padding: 12px; border: 0; border-radius: 50%; background: #ffffff05;
    }
    .punch-header .punch-menu-toggle span { flex: none; height: 1px; width: 18px; }
    .punch-header .punch-navigation {
        grid-column: 1 / -1; grid-row: 2;
        align-items: stretch; gap: 6px;
        margin-top: 6px; padding: 12px 0 4px;
        border: 0; border-radius: 0;
        background: none;
        max-height: calc(100svh - 130px); overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
    }
    .punch-header .punch-nav-link { justify-content: flex-start; padding: 13px 4px; min-height: 48px; border-radius: 0; }
    .punch-header .punch-nav-link::after { display: none; }
    .punch-header .punch-navigation.is-open { animation: punch-header-reveal 360ms var(--punch-ease-enter) both; }
    .punch-header:has(.punch-navigation.is-open)::before {
        inset-block-end: -32px;
        background: #151e2aef;
        mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }
    .punch-header .punch-nav-link > svg:last-child { margin-left: auto; }
    .punch-header .punch-dropdown-panel.punch-nav-panel {
        position: static; width: auto; max-width: none;
        margin: 0 0 8px; padding: 2px 0 2px 14px;
        border: 0; border-radius: 0;
        transform: none; background: none; box-shadow: none;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .punch-header .punch-user-menu .punch-dropdown-panel { margin: 0; background: #1a2432cc; border: 0; top: calc(100% + 18px); }
    .punch-header .punch-notifications > .dropdown-menu { top: calc(100% + 18px) !important; }
}
@media (max-width: 700px) {
    .punch-header { top: 0; left: 0; right: 0; }
    .punch-header .punch-nav { min-height: 80px; padding: 16px 20px; gap: 8px; border-radius: 0; }
    .punch-header .punch-brand { gap: 9px; }
    .punch-header .punch-brand > .punch-brand-mark { width: 44px; height: 44px; border-radius: 0; }
    .punch-header .punch-brand img { width: 40px; height: 40px; }
    .punch-header .punch-brand > .punch-brand-wordmark { font-size: 14px; letter-spacing: -.6px; }
    .punch-header .punch-brand-wordmark > span { font-size: 10px; letter-spacing: .8px; }
    .punch-site .punch-header .punch-login { display: none; }
    .punch-site .punch-header .punch-signup { min-height: 44px; padding: 10px 12px; font-size: 12px; }
    .punch-header .punch-signup-arrow { display: none; }
    .punch-header .punch-mobile-login { display: flex; gap: 10px; margin-top: 6px; border: 0; border-radius: 0; color: #bdcefa; }
    .punch-header .punch-navigation { max-height: calc(100svh - 114px); }
    .punch-header .punch-account { gap: 6px; }
    .punch-site .punch-header .punch-user-toggle { max-width: 150px; min-height: 44px; padding: 5px; gap: 6px; }
    .punch-header .punch-user-avatar { width: 30px; height: 30px; }
    .punch-header .punch-user-name { max-width: 85px; font-size: 12px; }
    .punch-header .punch-notification-toggle { width: 44px; height: 44px; }
    .punch-header .punch-notifications > .dropdown-menu { right: -50px !important; max-width: calc(100vw - 48px); }
}
@media (max-width: 560px) {
    .punch-header .punch-dropdown-links { grid-template-columns: 1fr; gap: 2px; }
    .punch-header .punch-dropdown-panel .punch-dropdown-link { padding: 10px; gap: 12px; }
    .punch-header .punch-link-copy > span { font-size: 14px; }
    .punch-header .punch-link-copy > small { font-size: 12px; }
    .punch-header .punch-notifications > .dropdown-menu { position: fixed !important; top: 84px !important; left: 16px !important; right: 16px !important; width: auto; max-width: none; }
    .punch-header .punch-user-menu .punch-user-panel { position: fixed; top: 84px; left: 16px; right: 16px; width: auto; max-width: none; }
}
@media (max-width: 480px) {
    .punch-header .punch-user-name { display: none; }
    .punch-site .punch-header .punch-user-toggle { gap: 4px; padding: 6px; }
}
@media (max-width: 370px) {
    .punch-header .punch-brand > .punch-brand-wordmark { display: none; }
    .punch-header .punch-user-name { max-width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .punch-header *, .punch-header *::before, .punch-header *::after { animation: none !important; transition: none !important; }
}
@keyframes punch-header-reveal {
    from { opacity: 0; translate: 0 -7px; }
    to { opacity: 1; translate: 0 0; }
}