/* Homepage 2026 v2 — shared: tokens, resets inside .znh, panel type, overline, buttons, ratings.
   Desktop (≥900): Figma "www3.0 homepage" (1720 frame), content in a 1204px column; below 1252px stage.js zooms
   the module. Mobile (≤899): flow layout, sections full width with 17px side gutters. Text boxes that Figma trims to
   cap height / baseline use text-box-trim (cap alphabetic), so the vertical rhythm matches the design. */

/* Nunito Medium (500): the design's body weight; the theme ships no 500 face, so 500 would render as 400.
   Same family version (3.602) and metrics as the theme's Nunito files (Google Fonts, OFL). */
@font-face {
    font-family: Nunito;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/nunito-500-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Nunito;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/nunito-500-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* the hero starts at the very top, under the fixed site navigation */
#page .site-content {
    --nnav-desktop-height: 0;
}

body:has(.znh) {
    background: #FAFAF7;
}

/* the footer right after the join section as in the designs (instead of its global 180): its CTA card 117px
   under the section's end (47 + its own 70), so 165px under the join card (the section adds 48) */
@media (min-width: 900px) {
    body:has(.znh) .footer-2026-wrap {
        margin-top: 47px;
    }
}

/* 768–899: the footer's CTA card 165px under the join card, as on desktop */
@media (min-width: 768px) and (max-width: 899px) {
    body:has(.znh) .footer-2026-wrap {
        margin-top: 95px;
    }
}

/* phones: the footer's app icon 59px under the join card (half of the global gap) */
@media (max-width: 767px) {
    body:has(.znh) .footer-2026-wrap {
        margin-top: 37px;
    }
}

/* phones: smaller paddings, so the footer's "for business" label stays inside its button (also with enlarged
   system text); ≤359 keeps the footer's own narrower ones */
@media (min-width: 360px) and (max-width: 480px) {
    body:has(.znh) .footer-2026__switch-box {
        padding-left: 16px;
        padding-right: 16px;
    }

    body:has(.znh) .footer-2026__switch-btn {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.znh {
    --znh-green: #22E243;
    --znh-green-muted: #1AC137;
    --znh-jet: #0F0F0F;
    --znh-carbon: #121212;
    --znh-anthracite: #222;
    --znh-ash: #424242;
    --znh-soft-grey: #888;
    --znh-off-white: #FAFAFA;
    --znh-bg: #FAFAF7;
    /* global header (165px from 1100px) minus the 63px nav of the design; stage.js keeps it in sync with zoom */
    --znh-shift: 102px;
    position: relative;
    width: 100%;
    overflow-x: clip;
    background: var(--znh-bg);
    color: #000;
    font-family: Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: 'liga' off, 'clig' off;
    -webkit-font-smoothing: antialiased;
}

.znh,
.znh *,
.znh *::before,
.znh *::after {
    box-sizing: border-box;
}

/* global theme element styles (p, h1, a, ul set their own font/colour/spacing): inherit from the component
   classes; :where keeps this at element specificity, so every class rule below still wins */
:where(.znh) :where(p, h1, a, ul, li) {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* global theme: .page-template p / h* margins */
.znh p,
.znh h1,
.znh ul,
.znh li {
    margin: 0;
    padding: 0;
}

.znh a {
    color: inherit;
}

.znh img {
    display: block;
    max-width: 100%;
}

.znh .green {
    color: var(--znh-green-muted);
}

.znh strong {
    font-weight: 800;
}

/* {linebreak_desktop}: a break on desktop, a space on mobile */
.znh .znh-br-d {
    display: block;
}

.znh-m-only {
    display: none;
}

.znh-count {
    display: inline-block;
    white-space: nowrap;
}

/* ---------- overline (eyebrow): label + optional 16px icon, 12px spacer below = 28px ---------- */
.znh .znh-overline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 16px;
    margin: 0 0 12px;
    color: var(--znh-soft-grey);
    font-size: 12px;
    font-weight: 800;
    line-height: 16.8px;
    letter-spacing: 2.52px;
    text-transform: uppercase;
    white-space: nowrap;
}

.znh-overline__label {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.znh .znh-overline__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* in a panel the overline sits 10px above the title box (the visible gap to the title's caps is half the design's) */
.znh .znh-overline--panel {
    margin-bottom: 0;
    padding-left: 4px;
}

/* ---------- panels (feature panels and dark cards): 1204px column, 650px apart (602 + 48) ---------- */
.znh-panel {
    width: 1204px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.znh-panel__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.znh .znh-panel__title {
    color: var(--znh-jet);
    font-size: 40px;
    font-style: italic;
    font-weight: 900;
    line-height: 46px;
    text-transform: uppercase;
}

.znh-panel__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-width: 400px;
}

.znh .znh-panel__body {
    width: 100%;
    color: var(--znh-anthracite);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* ---------- buttons: 58px (1px border inside), label + 20px arrow ---------- */
.znh .znh-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 58px;
    padding: 0 20px 0 24px;
    border: 1px solid var(--znh-green);
    border-radius: 64px;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.znh .znh-btn__label {
    padding-right: 32px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    height: 11px;
    letter-spacing: .45px;
    text-transform: uppercase;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.znh-btn__icon {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.znh .znh-btn--outline-dark {
    color: var(--znh-anthracite);
}

.znh .znh-btn--outline-light {
    color: #fff;
}

.znh .znh-btn--solid {
    background: var(--znh-green);
    color: #000;
}

@media (hover: hover) and (pointer: fine) {
    .znh .znh-btn--outline-dark:hover,
    .znh .znh-btn--outline-light:hover {
        background: var(--znh-green);
        color: #000;
    }

    /* the green button turns black with a green label, its 1px green stroke stays */
    .znh .znh-btn--solid:hover {
        background: #000;
        color: var(--znh-green);
    }

    /* the ↗ arrow turns to → */
    .znh .znh-btn:hover .znh-btn__icon {
        transform: rotate(45deg);
    }
}

/* ---------- store ratings as live text (desktop) ---------- */
.znh-ratings {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 20.35px;
    color: #fff;
    font-size: 11.721px;
    line-height: 17.581px;
    white-space: nowrap;
}

.znh-rating {
    display: flex;
    align-items: center;
    gap: 2.93px;
    height: 100%;
}

.znh-rating--trustpilot {
    gap: 3.907px;
}

.znh-rating__tp {
    display: flex;
    align-items: flex-end;
    gap: 1.953px;
    height: 100%;
    padding-bottom: 2.93px;
}

.znh-rating__wrap {
    display: flex;
    align-items: center;
}

.znh .znh-rating__star {
    width: 18.354px;
    height: 17.415px;
}

.znh .znh-rating__word {
    width: 51.964px;
    height: 12.098px;
}

.znh .znh-rating--app-store .znh-rating__logo {
    width: 11.362px;
    height: 13.965px;
}

.znh .znh-rating--google-play .znh-rating__logo {
    width: 10.417px;
    height: 11.713px;
}

.znh-rating__name {
    font-weight: 500;
}

.znh-rating__score {
    font-weight: 700;
    white-space: pre;
}

.znh-rating__mark {
    color: var(--znh-green);
    font-weight: 700;
    white-space: pre;
}

.znh-rating__mark--regular {
    font-weight: 400;
}

/* the design's text boxes are whole pixels wide: same boxes, so every part sits where the design has it */
.znh-rating__score,
.znh-rating__mark,
.znh-rating__name {
    flex: none;
    height: 18px;
}

.znh-rating--trustpilot .znh-rating__score,
.znh-rating--app-store .znh-rating__score,
.znh-rating--google-play .znh-rating__score {
    width: 17px;
}

.znh-rating--trustpilot .znh-rating__mark {
    width: 15px;
}

.znh-rating--app-store .znh-rating__mark,
.znh-rating--google-play .znh-rating__mark {
    width: 12px;
}

.znh-rating--app-store .znh-rating__name {
    width: 54px;
}

.znh-rating--google-play .znh-rating__name {
    width: 65px;
}

/* mobile-only full-width green button (hero, join) */
.znh .znh-m-cta {
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 56px;
    margin-top: 17px;
    border-radius: 64px;
    background: var(--znh-green);
    color: #000;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .25s;
}

.znh .znh-m-cta:active {
    background: #fff;
}

/* a photo cropped like Figma's overscan (box clips, image inside it) */
.znh-crop {
    position: absolute;
    overflow: hidden;
}

.znh .znh-crop__img {
    position: absolute;
    max-width: none;
}

/* Lenis smooth scroll (desktop mouse); the global html{scroll-behavior:smooth} must not animate its scrollTo */
html.lenis {
    scroll-behavior: auto;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* ---------- mobile ---------- */
@media (max-width: 899px) {
    .znh .znh-br-d {
        display: inline;
    }

    .znh .znh-panel {
        width: calc(100% - 34px);
        padding-bottom: 0;
    }

    .znh-m-only {
        display: flex;
    }

    .znh .znh-overline--panel {
        font-size: 10px;
        letter-spacing: 2.1px;
    }

    .znh .znh-overline__icon {
        width: 12px;
        height: 12px;
    }

    .znh .znh-panel__title {
        font-size: 28px;
        line-height: 1;
    }

    .znh .znh-panel__body {
        font-size: 12px;
        line-height: 1.4;
        text-box-trim: none;
    }

    .znh-panel__foot {
        gap: 21px;
    }

    .znh .znh-btn {
        height: 44px;
        min-width: 233px;
        padding: 0 16px 0 18px;
        justify-content: space-between;
    }

    .znh .znh-btn__label {
        padding-right: 14px;
        height: auto;
        font-size: 12px;
    }

    .znh-btn__icon {
        width: 14px;
        height: 14px;
    }
}