/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-devanagari.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-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;
}

/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-devanagari.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-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;
}

/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-devanagari.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-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;
}

/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-devanagari.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-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;
}

/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-devanagari.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-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;
}

:root {
    --olive: #6b6e0e;
    --olive-dark: #5f6608;
    --olive-light: #e7e7d3;
    --olive-light-2: #fbfbf6;
    --ink: #14140f;
    --text: #2a2a24;
    --muted: #3a3a33;
    --muted-2: #4a4a42;
    --muted-3: #74746c;
    --muted-4: #8a8a7c;
    --muted-5: #6b6b60;
    --border: #ececec;
    --border-light: #e6e6df;
    --border-lighter: #f0f0ea;
    --line: #c7c7bd;
    --line-2: #b9ba6a;
    --placeholder-bg-1: #ececE6;
    --placeholder-bg-2: #f4f4ef;
    --placeholder-border: #c9c9ba;
    --bg-soft: #f4f4f3;
    --bg-cream: #f7f6ee;
    --bg-hover: #dedecf;
    --dot: #ddddd1;
    --white: #ffffff;
    --gold: #f6b800;
    --blue: #2f7de1;
    --dark: #0b0b0b;
    --danger: #c0392b;
    --danger-bg: #fdecea;
    --success: #1f9254;
    --muted-avatar: #c9c9ae;
    --muted-name: #9a9a90;
    --muted-loc: #b5b5aa;
    --olive-rgb: 107, 110, 14;
    --dark-shadow-rgb: 20, 20, 15;
    --olive-border-soft: rgba(140, 141, 0, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Poppins ships latin/latin-ext/devanagari subsets only, so Arabic and
       Japanese fall through to the platform's own UI font. Naming the common
       Japanese faces explicitly keeps CJK text on a proper gothic rather than
       whatever the generic sans-serif happens to be; a CJK webfont subset would
       be several MB, which is not worth it for a language toggle. */
    font-family: 'Poppins', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--olive);
    text-decoration: none;
}

a:hover {
    color: var(--olive-dark);
}

img {
    max-width: 100%;
}

/* ---------- containers ---------- */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Popular Driving Guides intentionally stays wide/full, unlike every other section */
.container-wide {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 60px;
}

/* ---------- fluid type (scales with the narrower 1240px container, down to mobile) ---------- */
.h1-hero {
	font-size: clamp(30px, 4.6vw, 54px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -1px;
}

.h2-lg {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
}

.h2-md {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    line-height: 1.18;
}

.h2-faq {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.15;
}

.lead {
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--muted);
    line-height: 1.55;
}

/* ---------- shared bits ---------- */
.img-placeholder {
    background: repeating-linear-gradient(45deg, var(--placeholder-bg-1), var(--placeholder-bg-1) 10px, var(--placeholder-bg-2) 10px, var(--placeholder-bg-2) 20px);
    border: 1px dashed var(--placeholder-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-4);
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    padding: 4px;
}

/* ---------- buttons: exactly two types, .btn (solid) and .btn-outline ---------- */
.btn,
.btn-outline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    padding: 18px 32px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn {
    background: var(--olive);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(var(--olive-rgb), 0.35);
}

.btn:hover {
    color: var(--white);
    background: var(--olive-dark);
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(var(--olive-rgb), 0.45);
}

.btn:active {
    transform: translateY(-1px);
}

.btn-outline {
    border: 1.5px solid var(--olive);
    color: var(--ink);
    background: transparent;
}

.btn-outline:hover {
    background: var(--olive);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(var(--olive-rgb), 0.25);
}

.btn-outline:active {
    transform: translateY(-1px);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn:disabled,
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* shiny glass hover sweep */
.btn::before,
.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-25deg);
    transition: left .6s ease;
    pointer-events: none;
}

.btn:hover::before,
.btn-outline:hover::before {
    left: 125%;
}

.btn-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--white);
    transition: transform .25s ease;
}

.btn-outline .btn-arrow {
    color: var(--olive);
}

.btn:hover .btn-arrow,
.btn-outline:hover .btn-arrow {
    transform: translateX(4px);
}

/* the chevron is drawn pointing right; mirror it so it points toward reading-end
   in RTL too, and nudge it further along the (now-flipped) local x-axis on hover
   instead of back the way it came */
[dir="rtl"] .btn-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn-arrow,
[dir="rtl"] .btn-outline:hover .btn-arrow {
    transform: scaleX(-1) translateX(4px);
}

.btn-outline:hover .btn-arrow {
    color: var(--white);
}

.arrow-btn {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(var(--dark-shadow-rgb), 0.18);
    backdrop-filter: blur(4px);
    z-index: 2;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.arrow-btn[data-dir="-1"] {
    inset-inline-start: 0;
    transform: translate(-50%, -50%);
}

.arrow-btn[data-dir="1"] {
    inset-inline-end: 0;
    transform: translate(50%, -50%);
}

.arrow-btn[data-dir="-1"]:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.08);
}

.arrow-btn[data-dir="1"]:hover:not(:disabled) {
    transform: translate(50%, -50%) scale(1.08);
}

/* inset-inline-start/end already relocate these to the mirrored edge under RTL,
   but the straddle-the-edge translateX is a physical offset that doesn't mirror
   with it — left uncorrected, both arrows get pulled inward off their edges
   instead of poking outward past them */
[dir="rtl"] .arrow-btn[data-dir="-1"] {
    transform: translate(50%, -50%);
}

[dir="rtl"] .arrow-btn[data-dir="1"] {
    transform: translate(-50%, -50%);
}

[dir="rtl"] .arrow-btn[data-dir="-1"]:hover:not(:disabled) {
    transform: translate(50%, -50%) scale(1.08);
}

[dir="rtl"] .arrow-btn[data-dir="1"]:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.08);
}

.arrow-btn:hover:not(:disabled) {
    background: var(--olive);
    color: var(--white);
    box-shadow: 0 14px 30px rgba(var(--dark-shadow-rgb), 0.28);
}

.arrow-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ---------- nav ---------- */
/* Paired with the inline i18n bootstrap in each page's <head>. While the
   dictionary is in flight the untranslated markup is hidden, so a non-English
   visitor never sees English text swap under them. visibility (not display)
   keeps the layout reserved, so revealing it causes no reflow. English never
   gets this class, and the bootstrap's 2.5s failsafe always removes it. */
.i18n-pending body {
    visibility: hidden;
}

.site-header-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: none;
    transition: box-shadow .2s ease;
}

.site-header-bar.is-stuck {
    box-shadow: 0 4px 16px rgba(var(--dark-shadow-rgb), 0.08);
}

/* header/footer arrive via async include — reserve the nav's exact height on
   the empty placeholder so the page doesn't shift when it's injected */
#site-header:empty {
    min-height: 92px;
}

@media (max-width: 1024px) {
    #site-header:empty {
        min-height: 88px;
    }
}

@media (max-width: 640px) {
    #site-header:empty {
        min-height: 80px;
    }
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px;
    gap: 20px;
    position: relative;
}

.nav-brand {
    flex-shrink: 0;
}

.nav-brand img {
    height: 48px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 38px;
}

.nav-link {
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-widget {
    position: relative;
}

.cart-widget-floating {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 24px;
    z-index: 900;
}

.cart-widget-floating .cart-trigger {
    width: 56px;
    height: 56px;
    border: none;
    background: var(--olive);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(var(--dark-shadow-rgb), 0.24);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cart-widget-floating .cart-trigger:hover {
    background: var(--olive-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(var(--dark-shadow-rgb), 0.3);
}

.cart-trigger-icon {
    width: 22px;
    height: 22px;
}

.cart-widget-floating .cart-dropdown {
    top: auto;
    bottom: calc(100% + 16px);
    inset-inline-end: 0;
}

.cart-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--border-light);
    border-radius: 50%;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.cart-trigger:hover {
    border-color: var(--olive);
    background: var(--olive-light);
}

.cart-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--olive);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.cart-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(var(--dark-shadow-rgb), 0.14);
    z-index: 30;
    display: none;
    overflow: hidden;
}

.cart-widget.is-open .cart-dropdown {
    display: block;
}

.cart-dropdown-header {
    padding: 16px 18px 10px;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border-lighter);
}

.cart-items-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 10px;
}

.cart-empty {
    padding: 20px 8px;
    text-align: center;
    color: var(--muted-3);
    font-size: 14px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--border-lighter);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--placeholder-bg-2);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-item-meta {
    font-size: 12.5px;
    color: var(--muted-3);
    margin-top: 2px;
}

.cart-item-remove {
    border: none;
    background: transparent;
    color: var(--muted-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.cart-item-remove:hover {
    color: var(--ink);
}

.cart-dropdown-footer {
    padding: 12px 18px 18px;
    border-top: 1px solid var(--border-lighter);
}

.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}

.cart-summary-section {
    border-top: 1px solid var(--border-lighter);
    border-bottom: 1px solid var(--border-lighter);
    margin: 18px 0;
    padding: 14px 0;
}

.cart-summary-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.cart-items-list-checkout {
    max-height: none;
    padding: 0;
    margin-bottom: 10px;
}

.cart-items-list-checkout .cart-item {
    padding: 8px 0;
}

/* ---------- checkout order bumps (application.html step 3) ---------- */
.order-bumps {
    margin: 18px 0;
}

.order-bumps-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.order-bump-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-bump-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--border-light);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    background: var(--white);
    transition: border-color .2s ease, background-color .2s ease;
}

.order-bump-item:hover {
    border-color: var(--olive);
}

.order-bump-item.checked {
    border-color: var(--olive);
    background: var(--olive-light);
}

.order-bump-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.order-bump-toggle {
    flex-shrink: 0;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--border);
    transition: background-color .2s ease;
}

.order-bump-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(var(--dark-shadow-rgb), 0.3);
    transition: transform .2s ease;
}

.order-bump-item.checked .order-bump-toggle {
    background: var(--olive);
}

.order-bump-item.checked .order-bump-toggle-thumb {
    transform: translateX(16px);
}

.order-bump-item input:focus-visible ~ .order-bump-toggle {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.order-bump-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--placeholder-bg-2);
}

.order-bump-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-bump-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.order-bump-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.order-bump-desc {
    display: block;
    width: 100%;
    font-size: 12.5px;
    color: var(--muted-2);
    line-height: 1.4;
}

.order-bump-price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--olive);
    white-space: nowrap;
}

.order-bump-item.order-bump-upgrade {
    background: linear-gradient(45deg, var(--olive-light), var(--white));
}

.currency-select {
    position: relative;
    /* fluid alongside .nav-links/.nav-link above so a long translated label
       (German, Portuguese...) shrinks this instead of overlapping it */
    width: clamp(84px, 7vw, 98px);
}

.currency-select-trigger {
    display: flex;
    align-items: center;
    gap: clamp(4px, .5vw, 6px);
    width: 100%;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: transparent;
    padding: clamp(6px, .7vw, 8px) clamp(8px, 1vw, 10px);
    font: inherit;
    cursor: pointer;
    color: var(--ink);
    transition: border-color .2s ease, background-color .2s ease;
}

.currency-select-trigger:hover,
.currency-select-trigger[aria-expanded="true"] {
    border-color: var(--olive);
    background: var(--olive-light);
}

.currency-flag {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1;
}

.currency-code {
    font-weight: 600;
    font-size: clamp(12px, .9vw, 13px);
}

.currency-chevron {
    color: var(--muted-3);
    transition: transform .2s ease;
}

.currency-select-trigger[aria-expanded="true"] .currency-chevron {
    transform: rotate(180deg);
}

.currency-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 96px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(var(--dark-shadow-rgb), 0.14);
    z-index: 30;
    display: none;
    overflow: hidden;
}

.currency-dropdown.open {
    display: block;
}

.currency-options {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.currency-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
}

.currency-option:hover,
.currency-option.active {
    background: var(--placeholder-bg-2);
}

.currency-option-flag {
    font-size: 18px;
    flex-shrink: 0;
}

.currency-option-code {
    font-weight: 600;
    flex-shrink: 0;
}

.currency-option.selected .currency-option-code {
    color: var(--olive);
}

.language-select {
    position: relative;
    width: clamp(58px, 5vw, 68px);
}

.language-select-trigger {
    display: flex;
    align-items: center;
    gap: clamp(4px, .5vw, 6px);
    width: 100%;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: transparent;
    padding: clamp(6px, .7vw, 8px) clamp(8px, 1vw, 10px);
    font: inherit;
    cursor: pointer;
    color: var(--ink);
    transition: border-color .2s ease, background-color .2s ease;
}

.language-select-trigger:hover,
.language-select-trigger[aria-expanded="true"] {
    border-color: var(--olive);
    background: var(--olive-light);
}

.language-flag {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1;
}

.language-code {
    font-weight: 600;
    font-size: clamp(12px, .9vw, 13px);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(var(--dark-shadow-rgb), 0.14);
    z-index: 30;
    display: none;
    overflow: hidden;
}

.language-dropdown.open {
    display: block;
}

.language-options {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
}

.language-option:hover,
.language-option.active {
    background: var(--placeholder-bg-2);
}

.language-option-flag {
    font-size: 18px;
    flex-shrink: 0;
}

.language-option-name {
    flex: 1;
    min-width: 0;
}

.language-option-code {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 12px;
    color: var(--muted-3);
}

.language-option.selected .language-option-code {
    color: var(--olive);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
}

/* ---------- hero ---------- */
.hero-section {
    padding: 60px 0 90px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 900px 500px at 20% 30%, rgba(var(--olive-rgb), 0.05), transparent 70%);
}

/* a couple of soft, blurred olive blobs for depth — kept faint so the
   section still reads as clean/white, not a colored background */
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--olive);
    opacity: 0.10;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
    /* own compositor layer: the blur is rasterized once and the float
       animation is pure compositing, instead of re-rasterizing a 90px
       blur on the main thread every frame */
    will-change: transform;
}

/* glows behind the hero-form card (right column of the grid) */
.hero-section::before {
    width: 460px;
    height: 460px;
    top: 10%;
    right: 6%;
    animation: hero-blob-float-a 10s ease-in-out infinite;
}

/* sits a little inside the left edge, behind the hero-copy heading */
.hero-section::after {
    width: 360px;
    height: 360px;
    top: 5%;
    left: 4%;
    animation: hero-blob-float-b 12s ease-in-out infinite;
}

@keyframes hero-blob-float-a {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-16px, 20px) scale(1.06);
    }
}

@keyframes hero-blob-float-b {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(18px, -14px) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-section::before,
    .hero-section::after {
        animation: none;
    }
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 60px 480px;
    gap: 0;
    align-items: start;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hero-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    margin-top: 36px;
}

.hero-cta-mobile {
    display: none;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
}

.checklist-item span:first-child {
    display: flex;
}

.hero-road {
    position: relative;
    height: 520px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--line-2);
    border-top: none;
    border-bottom: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 90px,
            #000 calc(100% - 90px),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 90px,
            #000 calc(100% - 90px),
            transparent 100%);
}

.hero-road-line {
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, var(--line-2) 0 14px, transparent 14px 30px);
    z-index: 1;
}

.hero-road-slot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 110px;
    z-index: 1;
    animation: drive-car 8s linear infinite;
}

@keyframes drive-car {
    from {
        transform: translate(-50%, 660px);
    }

    to {
        transform: translate(-50%, -140px);
    }
}

@keyframes drive-car-horizontal {
    from {
        left: -140px;
    }

    to {
        left: calc(100% + 140px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-road-slot {
        animation: none;
        top: 210px;
    }
}

.hero-form {
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--olive-rgb), 0.18);
    padding: 35px 30px 30px;
    margin-inline-start: 50px;
}

.form-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    padding: 16px 18px;
    color: var(--muted-3);
}

.form-select-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted-3);
}

.form-select-icon svg {
    display: block;
}

.form-select-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: text;
}

.form-select-input::placeholder {
    color: var(--muted-3);
}

.form-select-input:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-radius: 4px;
}

/* trigger button that opens the country dropdown (closed state is display-only, not editable) */
.country-select-trigger {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    text-align: start;
    padding: 0;
    cursor: pointer;
}

.country-select-trigger:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-radius: 4px;
}

.country-select-value {
    color: var(--muted-3);
}

.country-select-value.has-value {
    color: var(--ink);
}

.country-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--placeholder-bg-1);
    color: var(--muted-5);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.country-clear:hover {
    background: var(--bg-hover);
}

.country-clear[hidden] {
    display: none;
}

/* ---------- destination country acceptance alert ---------- */
.country-alert-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.55;
    animation: country-alert-in .3s ease;
}

.country-alert-box[hidden] {
    display: none;
}

#heroDestinationAlert {
    margin-bottom: 0;
}

.country-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.country-alert-text {
    margin: 0;
}

.country-alert-text span {
    font-weight: 700;
}

.country-alert-box.is-ok {
    background: var(--olive-light);
    color: var(--ink);
}

.country-alert-box.is-ok .country-alert-icon {
    color: var(--success);
}

.country-alert-box.is-blocked {
    background: var(--danger-bg);
    color: var(--danger);
}

.country-alert-box.is-blocked .country-alert-icon {
    color: var(--danger);
}

@keyframes country-alert-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-alert-box {
        animation: none;
    }
}

.country-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(var(--dark-shadow-rgb), 0.14);
    z-index: 30;
    display: none;
    overflow: hidden;
}

.country-dropdown.open {
    display: block;
}

.country-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--placeholder-bg-1);
}

.country-search-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.country-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}

.country-search-input::placeholder {
    color: var(--muted-3);
}

.country-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.country-option:hover,
.country-option.active {
    background: var(--placeholder-bg-2);
}

.country-option mark {
    background: none;
    color: var(--olive);
    font-weight: 700;
}

.country-empty {
    padding: 14px 12px;
    color: var(--muted-3);
    font-size: 14px;
    text-align: center;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
    margin-top: 70px;
}

.badge-card {
    border: 1px solid var(--olive-border-soft);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------- popular products ---------- */
.products-section {
    background: var(--bg-soft);
    padding: 80px 0;
}

.products-row {
    position: relative;
    margin-top: 56px;
}

.products-viewport {
    min-width: 0;
}

.products-track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.products-track::-webkit-scrollbar {
    display: none;
}

.product-card {
    flex: 0 0 calc((100% - 3 * 26px) / 4);
    min-width: 0;
    scroll-snap-align: start;
    background: var(--white);
    border-radius: 18px;
    padding: 36px 30px;
    display: flex;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* only lift on hover in static grids — inside the home page's horizontally
   scrollable carousel the vertical lift reads as janky/scroll-like motion */
.product-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(var(--dark-shadow-rgb), 0.12);
}

/* ---------- get ready / 4 steps ---------- */
.steps-section {
    background: var(--bg-soft);
    padding: 90px 0;
    overflow: hidden;
}

.steps-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* two independent flex columns (not a shared grid track) so the row gap
   inside each column stays exactly equal to the gap between columns —
   a shared grid row would otherwise stretch to fit the offset column and
   throw off the other column's spacing */
.steps-grid {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

/* soft blurred olive glow centered behind the step cards, echoing the hero blobs */
.steps-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 380px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--olive);
    opacity: 0.10;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}

.steps-col {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 26px;
    flex: 1;
    min-width: 0;
}

.steps-col-offset {
    margin-top: 44px;
}

/* mobile shows its own CTA beneath the step cards instead of the one next
   to the heading, which is too far from the cards on a stacked layout */
.steps-cta-mobile {
    display: none;
}

.step-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 34px 32px;
    position: relative;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    background: var(--white);
}

.step-card:hover {
    border-color: var(--olive);
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
    transform: translateY(-2px);
}

.step-badge {
    position: absolute;
    top: 26px;
    inset-inline-end: 26px;
    background: var(--olive);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
}

/* ---------- pricing / apply ---------- */
.pricing-section {
    background: var(--white);
    
    padding: 80px 0;
}

/* the "Zero risk. All reward." line and the guarantee paragraph that sit between
   the section heading and the plan tabs */
.pricing-subtitle {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--olive);
}

.pricing-intro {
    margin: 14px auto 0;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted-3);
}

@media (max-width: 640px) {
    .pricing-subtitle {
        font-size: 17px;
    }

    .pricing-intro {
        font-size: 15px;
    }
}

.pricing-tabs {
    position: relative;
    display: flex;
    gap: 8px;
    background: var(--white);
    border-radius: 16px;
    padding: 8px;
    max-width: 760px;
    margin: 44px auto 0;
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
}

/* sliding pill that moves behind the active tab instead of each tab
   getting its own static background — position/size set by app.js */
.plan-tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    background: var(--olive);
    z-index: 0;
    pointer-events: none;
    transition: transform .3s ease, width .3s ease, height .3s ease;
}

.plan-tab-indicator.no-transition {
    transition: none;
}

.plan-tab {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 22px 20px;
    text-align: center;
    background: transparent;
    color: var(--ink);
    transition: background-color .2s ease, color .3s ease .05s;
}

.plan-tab:hover:not(.active) {
    background: var(--olive-light);
    transition: background-color .2s ease;
}

.plan-tab.active {
    background: transparent;
    color: var(--white);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 56px;
}

/* mobile-only package switcher — hidden on desktop, where both cards show
   side by side and there's nothing to switch between */
.pricing-package-tabs {
    display: none;
}

.pricing-card {
    position: relative;
    border-radius: 20px;
    padding: 48px 44px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pricing-card.featured {
    border: 1.5px solid var(--olive);
    background: #5f6608;
}

.pricing-card:not(.featured) {
    background: var(--olive-light);
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
}

/* The featured (Print + Digital) card needs this to clear its absolutely-
   positioned "Best Deal" badge — but on home/pricing the plain Digital Only
   card sits right beside it with no badge of its own, so without the same
   margin its title starts 28px higher than its neighbor's. Applied to both
   (excluding application.html's .plan-select-card, which has its own
   desktop-tuned margin further down the file) so the two titles line up. */
.pricing-card:not(.plan-select-card) .pricing-title {
    margin-top: 28px;
}

/* solid dark card needs its text/button flipped to light so everything
   stays readable against it, instead of the muted tones meant for a white card */
.pricing-card.featured .pricing-title,
.pricing-card.featured .pricing-price {
    color: var(--white);
}

.pricing-card.featured .pricing-price-regular {
    color: rgba(255, 255, 255, 0.6);
}

.pricing-card.featured .pricing-desc,
.pricing-card.featured .pricing-feature-item {
    color: rgba(255, 255, 255, 0.9);
}

.pricing-card.featured .btn {
    background: var(--white);
    color: #5f6608;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.pricing-card.featured .btn:hover {
    background: var(--olive-light);
    color: #5f6608;
}

/* .btn-arrow hardcodes a white icon color rather than inheriting currentColor,
   so it stays invisible against this button's now-white background unless
   overridden here too */
.pricing-card.featured .btn .btn-arrow {
    color: #5f6608;
}

.pricing-badge {
    position: absolute;
    top: 20px;
    inset-inline-start: -1px;
    font-size: 13px;
    font-weight: 700;
    color: #3a3a35;
    background: #c7ff00;
    padding: 6px 40px;
    border-start-start-radius: 0;
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
    border-end-start-radius: 0;
    box-shadow: 0 8px 18px rgba(var(--dark-shadow-rgb), 0.18);
    z-index: 1;
}

/* ---------- why smart travelers ---------- */
.why-section {
    background: var(--white);
    padding: 90px 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 56px;
}

.why-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 25px;
    background: var(--white);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.why-card:hover {
    border-color: var(--olive);
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
    transform: translateY(-2px);
}

/* ---------- explore by destination ---------- */
.destination-section {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    background-image: url('../images/destination-bg.jpg');
    background-size: cover;
    background-position: center;
}

.destination-content {
    width: 62%;
    /* deliberately physical, not logical: this offsets the panel over the section's
       background artwork, which doesn't mirror — so it stays on the right in RTL too */
    margin-left: auto;
    padding: 70px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-top: 44px;
    width: 100%;
    max-width: 820px;
}

.flag-row {
    background: var(--white);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 16px 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(var(--dark-shadow-rgb), 0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.flag-row:hover {
    transform: translateY(-2px);
    border-color: var(--olive);
    box-shadow: 0 12px 26px rgba(var(--dark-shadow-rgb), 0.12);
}

.flag-row:hover .flag-arrow {
    transform: translateX(4px);
}

.flag-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flag-item:last-child {
    justify-content: flex-end;
}

.flag-arrow {
    justify-self: center;
    font-weight: 700;
    color: var(--olive);
    transition: transform .2s ease;
}

/* ---------- reviews ---------- */
.reviews-section {
    background: var(--bg-soft);
    padding: 80px 0;
}

.reviews-scroll-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 68px;
}

.reviews-col {
    position: relative;
    height: 640px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 70px,
            #000 calc(100% - 70px),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 70px,
            #000 calc(100% - 70px),
            transparent 100%);
}

.reviews-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: reviews-scroll-up 26s linear infinite;
}

.reviews-col:hover .reviews-track {
    animation-play-state: paused;
}

@keyframes reviews-scroll-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track {
        animation: none;
    }
}

/* mobile: a swipeable, arrow-navigable single-card carousel replaces the
   auto-scrolling column ticker (there's no room for 3 side-by-side columns,
   and a passive-only ticker isn't a great fit for a small touch screen) */
.reviews-carousel {
    /* #reviewsGrid is a grid container — without min-width:0 the grid track
       grows to fit the review text's unshrinkable min-content width instead
       of respecting the viewport (the same class of bug fixed earlier for
       .product-card, but here the culprit is the grid parent, not flex) */
    min-width: 0;
    /* no margin-top here: #reviewsGrid (.reviews-scroll-grid) already adds
       68px above itself — this is a child of that element, not a sibling */
}

/* the card is the flex item directly (same pattern .product-card uses in its
   own mobile carousel) — extra side padding keeps its text clear of the inset
   arrow buttons on either side */
.reviews-carousel .review-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    padding-left: 58px;
    padding-right: 58px;
}

.review-card {
    background: var(--white);
    border-radius: 16px;
    padding: 34px 32px;
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.04);
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-stars {
    display: block;
    width: 86px;
    height: 16px;
}

.review-verified {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--muted);
}

.review-verified span.check {
    display: flex;
}

.review-text {
    font-size: 16px;
    color: var(--text);
    line-height: 1.55;
    margin-top: 24px;
    min-height: 84px;
}

.review-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--white);
    background: var(--olive);
}

.review-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.review-loc {
    font-size: 15px;
    color: var(--olive);
}

/* ---------- faq ---------- */
.faq-section {
    background: var(--bg-cream);
    padding: 90px 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

.faq-item {
    background: var(--white);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 6px 18px rgba(var(--dark-shadow-rgb), 0.04);
}

.faq-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    text-align: start;
    font: inherit;
    gap: 16px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 17px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 0;
    transition: max-height .35s ease, margin-top .35s ease;
}

.faq-item.open .faq-answer {
    margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-answer {
        transition: none;
    }
}

.chev {
    color: var(--olive);
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    transition: transform .2s;
}

.faq-item.open .chev {
    transform: rotate(180deg);
}

/* ---------- cta ---------- */
.cta-section {
    background: var(--white);
    padding: 90px 0;
    text-align: center;
}

.cta-road {
    position: relative;
    max-width: 660px;
    margin: 48px auto 0;
    height: 70px;
    background: var(--bg-soft);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 60px,
            #000 calc(100% - 60px),
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 60px,
            #000 calc(100% - 60px),
            transparent 100%);
}

.cta-road-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--line) 0 18px, transparent 18px 38px);
}

.cta-road-car {
    position: absolute;
    top: 50%;
    left: -100px;
    width: 80px;
    height: 44px;
    transform: translateY(-50%);
    z-index: 1;
    animation: drive-car-horizontal 8s linear infinite;
}

@keyframes drive-car-horizontal {
    from {
        left: -100px;
    }

    to {
        left: calc(100% + 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-road-car {
        animation: none;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ---------- footer ---------- */
.site-footer {
    background: var(--dark);
    color: var(--white);
    padding: 70px 0 50px;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-flags-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px 30px;
    margin-top: 34px;
}

.footer-flag {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--white);
}

.footer-flag:hover {
    color: var(--line-2);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr;
    gap: 40px;
    margin-top: 80px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.footer-links-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
    margin-top: 24px;
}

.footer-link {
    display: flex;
    align-items: start;
    gap: 12px;
    font-size: 16px;
    color: var(--white);
}

.footer-link:hover {
    color: var(--line-2);
}

/* =====================================================
           HEADER DENSITY
           The logo, six nav links, the CTA and both selectors share one row until
           the 1024px hamburger takes over. Translated labels run 20-40% longer
           than English (German worst: "Jetzt Ihren IDP Erhalten" vs "Get Your IDP
           Now"), so a fixed breakpoint can't know when the row stops fitting —
           the spacing and type scale fluidly with the viewport instead, and never
           exceed the original desktop values at the top of the clamp.
           ===================================================== */
.nav-bar {
    gap: clamp(12px, 1.4vw, 20px);
    flex-wrap: nowrap;
}

.nav-links {
    gap: clamp(14px, 1.7vw, 38px);
    min-width: 0;
}

.nav-link {
    font-size: clamp(13.5px, 1.05vw, 16px);
    white-space: nowrap;
}

.nav-actions {
    gap: clamp(10px, 1vw, 20px);
}

.nav-actions .btn {
    padding: clamp(12px, 1.15vw, 18px) clamp(14px, 2vw, 32px);
    font-size: clamp(13.5px, 1.05vw, 16px);
    white-space: nowrap;
}

/* The clamps above scale with the VIEWPORT, but .nav-bar is a .container — its
   width freezes at the 1240px cap (1200px inside the padding) no matter how wide
   the screen gets. So past ~1400px the vw terms keep inflating while the space
   holding them stays fixed, the row's demanded width overruns 1200px, and since
   .nav-links has min-width:0 it silently shrinks and lets its nowrap labels spill
   out from under the CTA. English fits at the full scale; the longer translated
   label sets (es/fr/pt worst) don't, so hold those to a tighter ceiling that
   still fits 1200px once every clamp has topped out. */
html:not([lang="en"]) .nav-links {
    gap: clamp(10px, 1.1vw, 18px);
}

html:not([lang="en"]) .nav-link {
    font-size: clamp(12.5px, .92vw, 14px);
}

html:not([lang="en"]) .nav-actions {
    gap: clamp(8px, .8vw, 13px);
}

html:not([lang="en"]) .nav-actions .btn {
    padding: clamp(11px, 1vw, 15px) clamp(12px, 1.3vw, 19px);
    font-size: clamp(12.5px, .92vw, 14px);
}

@media (max-width: 1400px) {
    /* the arrow is decoration; the label is what has to fit */
    .nav-actions .btn .btn-arrow {
        display: none;
    }
}

@media (max-width: 1200px) {
    .nav-brand img {
        height: 42px;
    }

    /* collapse to the circular triggers the tablet layout already uses, so the
       two selectors stop competing with the nav links for the remaining width */
    .currency-select,
    .language-select {
        width: auto;
    }

    .currency-select-trigger,
    .language-select-trigger {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .currency-code,
    .currency-chevron,
    .language-code {
        display: none;
    }
}

/* =====================================================
           TABLET  (<=1024px)
           ===================================================== */
@media (max-width: 1024px) {
    .currency-select {
        width: auto;
    }

    .currency-select-trigger {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .currency-code,
    .currency-chevron {
        display: none;
    }

    .language-select {
        width: auto;
    }

    .language-select-trigger {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .language-code {
        display: none;
    }

    .container {
        padding: 0 40px;
    }

    .container-wide {
        padding: 0 40px;
    }

    .nav-bar {
        padding: 20px 20px;
        gap: 15px;
    }

    .nav-actions {
        gap: 15px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--white);
        padding: 12px 24px 20px;
        box-shadow: 0 16px 30px rgba(var(--dark-shadow-rgb), 0.08);
        z-index: 20;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-lighter);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-actions .btn .btn-arrow {
        display: none;
    }

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

    .hero-copy {
        padding-right: 0;
    }

    .hero-road {
        height: 60px;
        align-items: center;
        justify-content: flex-start;
        -webkit-mask-image: linear-gradient(to right,
                transparent 0,
                #000 90px,
                #000 calc(100% - 90px),
                transparent 100%);
        mask-image: linear-gradient(to right,
                transparent 0,
                #000 90px,
                #000 calc(100% - 90px),
                transparent 100%);
        border-top: 1px solid var(--line-2);
        border-bottom: 1px solid var(--line-2);
    }

    .hero-road-line {
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(to right, var(--line-2) 0 14px, transparent 14px 30px);
    }

    .hero-road-slot {
        top: 50%;
        left: -140px;
        width: 110px;
        height: 50px;
        transform: translateY(-50%);
        animation: drive-car-horizontal 8s linear infinite;
    }

    .hero-road-slot .hero-car-img {
        transform: rotate(90deg) translateX(calc( -50% - 5px ));
    }

    .hero-form {
        margin-inline-start: 0;
    }

    .badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-card {
        flex: 0 0 calc((100% - 26px) / 2);
    }

    .steps-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .destination-content {
        width: 100%;
        margin-left: 0;
        padding: 50px 40px;
    }

    .reviews-scroll-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews-col {
        height: 560px;
    }

    .footer-flags-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid>div:first-child {
        grid-column: 1 / -1;
    }
}

/* =====================================================
           MOBILE  (<=640px)
           ===================================================== */
@media (max-width: 640px) {
    .container {
        padding: 0 20px;
    }

    .container-wide {
        padding: 0 20px;
    }

    /* below this width the container padding (20px) is narrower than the
       buttons' own half-width overflow (26px), so the default straddle-the-edge
       positioning pushes them a few pixels past the viewport and they get
       clipped — keep them fully inset instead of centered on the edge */
    .arrow-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .arrow-btn[data-dir="-1"] {
        inset-inline-start: -10px;
        transform: translateY(-50%);
    }

    .arrow-btn[data-dir="1"] {
        inset-inline-end: -10px;
        transform: translateY(-50%);
    }

    .arrow-btn[data-dir="-1"]:hover:not(:disabled) {
        transform: translateY(-50%) scale(1.08);
    }

    .arrow-btn[data-dir="1"]:hover:not(:disabled) {
        transform: translateY(-50%) scale(1.08);
    }

    .nav-bar {
        padding: 16px 20px;
    }

    .currency-select-trigger {
        width: 36px;
        height: 36px;
    }

    .language-select-trigger {
        width: 36px;
        height: 36px;
    }

    .nav-actions .btn {
        font-size: 13px;
        padding: 10px 14px;
        white-space: nowrap;
    }

    .hero-section {
        padding: 28px 0 42px;
    }

    .hero-grid {
        gap: 26px;
    }

    /* .hero-copy is a plain block in the desktop flow; it becomes a flex column
       here purely to get `order`, so the CTA can sit directly under the lead
       where a thumb reaches it first and the checklist drops below as
       supporting detail. Only the items that must keep their intrinsic width
       opt out of the column's default stretch. */
    .hero-copy {
        display: flex;
        flex-direction: column;
    }

    .hero-trust,
    .hero-trust-logo {
        align-self: flex-start;
    }

    /* NOTE on the descendant selectors below: the base declarations for these
       (and the .mt-* utilities several of them carry) live further down the
       file, AFTER this media block, at the same single-class specificity — so a
       plain .hero-lead/.hero-trust-logo rule here silently loses to them. */
    .hero-copy .hero-trust-logo {
        margin-bottom: 12px;
    }

    .hero-copy .hero-lead {
        margin-top: 14px;
    }

    .hero-cta-desktop {
        display: none;
    }

    .hero-copy .hero-cta-mobile {
        display: flex;
        width: 100%;
        justify-content: center;
        order: 1;
        margin-top: 22px;
    }

    .hero-checklist {
        order: 2;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 22px;
    }

    .hero-form {
        padding: 24px 20px 22px;
    }

    /* five badges wrapped to three rows as a 2-col grid and ate most of the
       hero's height — one swipeable row keeps them all reachable instead. The
       negative inline margin cancels .container's 20px padding so the track
       scrolls edge to edge and the peeking next card reads as "swipe me"
       rather than as a card that got clipped. */
    .badges-grid {
        display: flex;
        gap: 12px;
        margin-top: 26px;
        margin-inline: -20px;
        padding-inline: 20px;
        /* without this the snapport starts at the padding box, so card 1 snaps
           its edge to the screen edge and swallows the 20px gutter that lines
           it up with the rest of the page */
        scroll-padding-inline: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .badges-grid::-webkit-scrollbar {
        display: none;
    }

    .badge-card {
        flex: 0 0 44%;
        scroll-snap-align: start;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 16px 12px;
    }

    .badge-card .badge-label {
        font-size: 14px;
        line-height: 1.35;
    }

    .products-section,
    .pricing-section,
    .reviews-section,
    .steps-section {
        padding: 42px 0;
    }

    .product-card {
        flex: 0 0 100%;
    }

    /* the home page's own rhythm is tightened above; these belong to other
       pages and keep the roomier spacing they were designed with */
    .why-section,
    .cta-section,
    .included-section,
    .permit-about-section {
        padding: 56px 0;
    }

    /* the gap between each section's heading and the block it introduces is
       tuned for desktop column widths; at phone width it just pushes content
       below the fold */
    .products-row {
        margin-top: 26px;
    }

    .pricing-tabs {
        margin-top: 26px;
    }

    .pricing-grid {
        margin-top: 26px;
        gap: 20px;
    }

    .reviews-scroll-grid {
        margin-top: 26px;
    }

    .faq-list {
        margin-top: 26px;
    }

    .steps-layout {
        gap: 26px;
    }

    .destination-content {
        padding: 36px 20px;
    }

    .flags-grid {
        gap: 12px 14px;
    }

    .permit-header {
        padding: 40px 0 56px;
    }

    .steps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        gap: 10px;
    }

    .steps-col {
        display: contents;
    }

    .step-card {
        padding: 16px 13px;
        height: 100%;
    }

    /* scoped to .step-card for the same reason as the hero rules above: the base
       .step-title/.step-desc sizes are declared after this media block at equal
       specificity, so the unscoped versions of these two never applied — the
       cards had been rendering at their full 20px/16px desktop type all along */
    .step-card .step-title {
        font-size: 15px;
        margin-top: 8px;
        margin-bottom: 6px;
    }

    .step-card .step-desc {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .step-card .step-icon img {
        width: 38px;
        height: auto;
    }

    .why-title {
        font-size: 18px;
    }

    .why-desc {
        font-size: 14px;
    }

    .step-badge {
        top: 11px;
        inset-inline-end: 11px;
        font-size: 10px;
        padding: 3px 7px;
    }

    .steps-cta-desktop {
        display: none;
    }

    .steps-cta-mobile {
        display: block;
        margin-top: 22px;
    }

    .steps-col-offset {
        margin-top: 0;
    }

    .step-card[data-step="1"] {
        order: 1;
    }

    .step-card[data-step="2"] {
        order: 2;
    }

    .step-card[data-step="3"] {
        order: 3;
    }

    .step-card[data-step="4"] {
        order: 4;
    }

    .pricing-tabs {
        flex-direction: row;
    }

    .pricing-tabs .plan-tab {
        padding: 10px 6px;
    }

    .pricing-tabs .plan-price {
        font-size: 13px;
    }

    .pricing-tabs .plan-sub {
        font-size: 10px;
        margin-top: 2px;
    }

    .pricing-package-tabs {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .pricing-package-tab {
        flex: 1;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        background: var(--white);
        color: var(--ink);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 10px;
        cursor: pointer;
        transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    }

    .pricing-package-tab.active {
        background: var(--olive);
        border-color: var(--olive);
        color: var(--white);
    }

    .pricing-grid {
        margin-top: 20px;
    }

    .pricing-card.pkg-hidden {
        display: none;
    }

    .pricing-card {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 22px 20px;
        gap: 0;
    }

    /* the desktop thumb (110–190px) was rendering at full size on a ~330px-wide
       card, pushing the price/description/CTA down a full screen's worth —
       shrink it down and cap the wide (printed-booklet) variant separately so
       it doesn't dominate the card */
    .pricing-card .card-thumb {
        order: -1;
        align-self: center;
        width: 84px;
        /* every card gets this now, not just the one with the "Best Deal"
           ribbon — the plain (Digital Only) card has no badge above it, but
           without the same top gap its thumb sits flush against the card's
           edge while the featured one has room to breathe, so the two cards
           read as differently spaced instead of a matched pair */
        margin-top: 18px;
    }

    .pricing-card .card-thumb-wide {
        width: 130px;
    }

    /* application.html's plan-select-card has its own unconditional (not
       media-scoped) .card-thumb margin-top, tuned for the narrower desktop
       2-column layout — it's the same 2-class specificity as this rule and
       sits later in the file, so it always won the tie on mobile too. The
       Print + Digital card's larger margin is still earning its keep there
       (its "Best Deal" ribbon is absolutely positioned above the thumb and
       needs the clearance), but the plain Digital Only card has no ribbon and
       that same gap just reads as an oversized, unbalanced empty space. */
    .pricing-grid .plan-select-card[data-package="digital"] .card-thumb {
        margin-top: 18px;
    }

    /* Unifies the title's top gap across every card shape at phone width: the
       featured/badge card and application.html's plan-select-card previously
       carried two different unconditional margin-tops (28px, 40px) tuned for
       their own desktop layouts, both of which are the same specificity as an
       unscoped mobile override and would win the tie by sitting later in the
       file — .pricing-grid adds the extra class needed to beat them outright. */
    .pricing-grid .pricing-card .pricing-title {
        font-size: 22px;
        margin-top: 22px;
    }

    .pricing-card .pricing-desc {
        font-size: 14px;
    }

    .pricing-card .pricing-feature-item {
        font-size: 14px;
    }

    /* Both feature-list shapes get bumped to the same 20px top gap at phone
       width. Scoped through .pricing-grid (3 classes) for the same reason as
       the .pricing-cta rule above: the unconditional base rules — 16px for the
       nested-in-.flex-1 home/pricing shape, 10px for application.html's
       direct-child shape — are equal specificity to a bare .pricing-card
       override and sit later in the file, so they'd win the cascade tie. */
    .pricing-grid .pricing-card .pricing-feature-list,
    .pricing-grid .pricing-card > .pricing-feature-list {
        padding-top: 20px;
    }

    /* the base .btn scale (16px text, 18px/32px padding) was forcing this
       CTA's label onto two lines on a narrow card — bring both down until it
       sets on one line. Scoped through .pricing-grid (3 classes) rather than
       just .pricing-card > .pricing-cta (2 classes): the unscoped, unconditional
       ".pricing-card > .pricing-cta" rule further down the file is the same
       2-class specificity and would otherwise win the tie by sitting later
       in source order, silently overriding every property set here. */
    .pricing-grid .pricing-card > .pricing-cta {
        /* the base rule's align-self: end only hugs the button to its text
           width instead of filling the card — stretch it full-width instead */
        align-self: stretch;
        margin-top: 18px;
        padding: 14px 18px;
        font-size: 14px;
        gap: 6px;
    }

    /* application.html's cards carry BOTH .pricing-card and .plan-select-card,
       and .plan-select-card's own 30px/26px padding is declared further down the
       file at equal specificity — so it beat the .pricing-card mobile padding
       above on source order, leaving these cards ~12px narrower per side than
       the home/pricing ones and wrapping their validity labels. */
    .pricing-grid .plan-select-card {
        padding: 22px 20px;
    }

    /* "Select your validity" is redundant once the rows themselves are right
       there below it on a stacked mobile layout — drop it to save vertical
       space. Scoped through .validity-select for the same cascade-order reason
       as the rest of this block: the bare .validity-select-label rule is
       declared later in the file at equal specificity. */
    .validity-select .validity-select-label {
        display: none;
    }

    /* .pricing-card's own gap is zeroed out on mobile (its children stack with
       purpose-built margins per pair instead of one flat gap), and
       .validity-select has no margin-top of its own — without this it sits
       flush against the feature list right above it, the one pair the mobile
       rules never gave a gap. */
    .pricing-card > .validity-select {
        margin-top: 18px;
    }

    /* Validity rows at phone width: the base scale still pushes "Valid for N
       years" onto a second line once the row is only ~290px wide. Every selector
       here carries an extra class on purpose — the base .validity-* rules are
       declared further down the file at single-class specificity, so an unscoped
       override here would lose the cascade tie on source order and do nothing. */
    .validity-select .validity-option {
        padding: 9px 11px;
        gap: 8px;
    }

    .validity-select .validity-radio {
        width: 16px;
        height: 16px;
    }

    .validity-option.selected .validity-radio {
        box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 16px var(--olive);
    }

    .validity-option .validity-option-body {
        gap: 4px;
    }

    .validity-option .validity-option-name {
        font-size: 13px;
    }

    .validity-option .validity-amount {
        font-size: 15px;
    }

    .validity-option .validity-regular {
        font-size: 11px;
    }

    .validity-option .validity-save {
        font-size: 10px;
    }

    .validity-option .validity-best {
        font-size: 8px;
        padding: 3px 6px;
    }

    .pricing-badge {
        padding: 6px 20px;
        font-size: 12px;
    }

    /* long badge text at the desktop pill size runs into the "Selected"
       checkmark circle at this card's narrower mobile width */
    .plan-recommended-badge {
        max-width: calc(100% - 76px);
        padding: 6px 10px;
        font-size: 11px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .flags-grid {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .reviews-scroll-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 0px;
    }

    .reviews-col {
        height: 460px;
    }

    .faq-section {
        padding: 42px 0;
    }

    .faq-section .faq-subtitle {
        margin-top: 10px;
        font-size: 15px;
    }

    .steps-copy .steps-lead {
        margin-top: 14px;
    }

    .pricing-intro {
        margin-top: 10px;
        font-size: 15px;
    }

    .reviews-section .rating-row {
        margin-top: 14px;
    }

    .faq-item {
        padding: 18px 18px;
    }

    /* scoped through .faq-item (2 classes) rather than the bare .faq-question/
       .faq-answer (1 class each): those unscoped base rules sit further down
       the file at the same specificity and would win the cascade tie by
       source order, silently overriding a plain override here */
    .faq-item .faq-question {
        font-size: 15.5px;
    }

    .faq-item .faq-answer {
        font-size: 14px;
        line-height: 1.55;
    }

    .faq-item.open .faq-answer {
        margin-top: 12px;
    }

    .faq-item .chev {
        font-size: 18px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-flags-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid>div:first-child {
        grid-column: auto;
    }

    .footer-links-2col {
        grid-template-columns: 1fr;
    }
}

/* ---------- scroll reveal (assets/js/reveal.js) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s cubic-bezier(.16, .8, .3, 1), transform .4s cubic-bezier(.16, .8, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- utilities ---------- */
.flex-1 {
    flex: 1;
}

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

.text-white {
    color: var(--white);
}

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

.text-primary {
    color: var(--olive);
}

.fw-600 {
    font-weight: 600;
}

.mt-10 {
    margin-top: 10px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-14 {
    margin-top: 14px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-18 {
    margin-top: 18px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-22 {
    margin-top: 22px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-26 {
    margin-top: 26px;
}

.mt-28 {
    margin-top: 28px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-44 {
    margin-top: 44px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-56 {
    margin-top: 56px;
}

.mt-70 {
    margin-top: 70px;
}

/* ---------- placeholder size modifiers ---------- */
.ph-book {
    width: 110px;
    height: 150px;
    border-radius: 6px;
}

.ph-idp {
    width: 110px;
    height: 200px;
    border-radius: 14px;
}

.ph-driver {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    border-radius: 0;
}

/* ---------- product / pricing card text ---------- */
.card-thumb {
    width: 110px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}

/* the printed-booklet thumbnail is a landscape image — a bit wider than the
   default portrait-sized thumb so it doesn't render tiny next to it */
.card-thumb-wide {
    width: 190px;
}

.card-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.premium-products-section {
    padding: 80px 0px;
}

.premium-products-section.bg-soft {
    background: var(--bg-soft);
}

/* visible breathing room before the differently-shaded "Popular Country
   Driving Kits" section, instead of the two backgrounds touching directly */
.premium-products-section-guides {
    padding-top: 10px;
    padding-bottom: 120px;
}

.premium-products-section .product-card {
    box-shadow: 0 12px 30px rgba(var(--olive-rgb), 0.16);
}

.premium-products-section .product-card:hover {
    box-shadow: 0 20px 40px rgba(var(--olive-rgb), 0.26);
}

/* ---------- static 3-column product grid (non-carousel pages) ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- product search (button sits inside the input) ---------- */
.product-search-wrap {
    display: flex;
    justify-content: center;
    margin: 30px 0 50px;
}

.product-search {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.product-search-input {
    width: 100%;
    padding: 16px 60px 16px 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
}

.product-search-input:focus {
    outline: none;
    border-color: var(--olive);
}

.product-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--olive);
    border: none;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease;
}

.product-search-btn:hover {
    background: var(--olive-dark);
}

/* ---------- product card skeleton loading state ---------- */
.product-card-skeleton {
    pointer-events: none;
}

.skeleton-line,
.skeleton-btn,
.skeleton-thumb {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--placeholder-bg-2) 25%, var(--placeholder-bg-1) 37%, var(--placeholder-bg-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-title {
    height: 20px;
    width: 80%;
    margin-bottom: 14px;
}

.skeleton-stars {
    height: 16px;
    width: 45%;
    margin-bottom: 10px;
}

.skeleton-price {
    height: 22px;
    width: 30%;
    margin-bottom: 12px;
}

.skeleton-desc {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-desc.short {
    width: 65%;
    margin-bottom: 16px;
}

.skeleton-btn {
    height: 40px;
    width: 120px;
    border-radius: 999px;
}

.skeleton-thumb {
    height: 150px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.card-stars {
    color: var(--gold);
    font-size: 16px;
    margin: 10px 0;
}

.card-price {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.card-desc {
    font-size: 15px;
    color: var(--muted-2);
    line-height: 1.5;
}

.add-to-cart-btn,
.card-cta {
    margin-top: 16px;
    padding: 10px 20px;
    font-size: 14px;
}

/* keep "Add to Cart" pinned to the card's bottom regardless of how much
   title/description text pushes above it, so it lines up across a row —
   the description (not the button's margin) absorbs the leftover space,
   which guarantees at least the button's normal margin-top as a gap */
.product-card .flex-1 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-card .card-desc {
    flex: 1;
}

.product-card .add-to-cart-btn,
.product-card .card-cta {
    align-self: flex-start;
}

/* pinned IDP promo card at position 1 of the Guides & Checklists grid —
   same treatment as .pricing-card.featured, so it reads as "the one to
   pick" among the fetched WooCommerce guides around it */
.product-card-featured {
    border: 1.5px solid var(--olive);
    background: linear-gradient(45deg, var(--olive-light), var(--white));
}

.pricing-title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.2;
}

/* ---------- per-card validity picker ----------
   Replaces the old single row of .pricing-tabs that sat above the grid and
   drove every card at once: each card now carries its own "Valid for N years"
   radio group, so the price on show and the duration carried into checkout
   both come from the card the visitor is actually reading. */
.validity-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.validity-select-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-3);
}

.validity-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.validity-option:hover {
    border-color: var(--olive);
}

/* the real radio stays in the layout (so it keeps its focus/keyboard
   behaviour and still posts a value) but is visually replaced by
   .validity-radio, which can be styled consistently across browsers */
.validity-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.validity-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--olive);
    border-radius: 50%;
    background: var(--white);
    transition: border-color .2s ease;
}

.validity-option.selected {
    border-color: var(--olive);
    background: var(--olive-light);
    box-shadow: 0 6px 18px rgba(var(--olive-rgb), 0.16);
}

.validity-option.selected .validity-radio {
    border-color: var(--olive);
    /* the inner dot is drawn as a ring-shaped shadow rather than a
       pseudo-element so the dot scales with the same box */
    box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 18px var(--olive);
}

/* keyboard focus lands on the visually-hidden input, so surface the ring on
   the row the visitor is actually on */
.validity-option:focus-within {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.validity-option-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.validity-option-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

/* same lime-on-charcoal pill the "Best Deal for Full Coverage" ribbon uses,
   so the two "this is the one" cues on a card read as one system */
.validity-best {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3a3a35;
    background: #c7ff00;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.validity-option-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: end;
    flex-shrink: 0;
}

.validity-price-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.validity-regular {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-3);
    text-decoration: line-through;
    white-space: nowrap;
}

.validity-regular[hidden],
.validity-save[hidden] {
    display: none;
}

.validity-amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.validity-save {
    font-size: 12px;
    font-weight: 600;
    color: var(--olive);
    white-space: nowrap;
}

/* the two dark cards (home/pricing "featured", application's selected plan)
   keep the option rows white, but the label sitting directly on the dark
   background has to flip or it's near-invisible */
.pricing-card.featured .validity-select-label,
.plan-select-card.selected .validity-select-label {
    color: rgba(255, 255, 255, 0.75);
}

.validity-amount.price-skeleton {
    display: inline-block;
    width: 68px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--placeholder-bg-2) 25%, var(--placeholder-bg-1) 37%, var(--placeholder-bg-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    vertical-align: middle;
}

/* On the narrowest phones the row can't seat the label and a side-by-side
   "was / now" pair at once — application.html is worst, since two cards' worth
   of nesting leaves its rows only ~236px wide. Stacking the struck-through
   price above the current one hands ~38px back to the label, which is what
   keeps "Valid for 3 years" on one line. Declared after the base rules rather
   than inside the 640px block so it wins on source order without extra
   selector weight. */
@media (max-width: 400px) {
    .validity-price-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }
}

.pricing-desc {
    font-size: 16px;
    color: var(--muted-2);
    line-height: 1.55;
}

.pricing-title-highlight {
	background: #c7ff00;
	color: #3a3a35;
	padding: 1px 8px;
	border-radius: 6px;
}

/* mobile-first: single column everywhere by default. Widened to 2 columns
   on desktop below, except on the application-form card, which shares its
   column with the order summary and stays narrower even on desktop. */
.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 10px;
}


.pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.pricing-feature-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* keeps "Start Application" pinned to the bottom regardless of how long the
   description runs, so buttons line up across cards of different lengths */
.pricing-card .flex-1 {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.pricing-card .flex-1 > .btn {
    align-self: flex-start;
}

/* Full-width CTA. Lives as a direct child of .pricing-card (not inside .flex-1)
   so it spans the whole card under both columns; it rides the same flex-wrap
   mechanism the feature list uses, so the "flex: 0 0 100%" half is scoped to the
   >=1025px row layout further down — in the mobile column layout a 100% basis
   would size against the vertical axis. Base rule below is the non-featured
   (Digital Only) card's olive treatment; .featured overrides it to lime. */
.pricing-card > .pricing-cta {
    align-self: end;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    background: var(--olive);
    color: var(--white);
    box-shadow: 0 8px 18px rgba(var(--olive-rgb), 0.35);
}

.pricing-card > .pricing-cta:hover {
    background: var(--olive-dark);
    color: var(--white);
}

/* Print + Digital card keeps the lime treatment it already had, distinct from
   the plain .btn (white on this card) that the "Best Deal" ribbon sits above */
.pricing-card.featured > .pricing-cta {
    background: #c7ff00;
    color: #3a3a35;
}

.pricing-card.featured > .pricing-cta:hover {
    background: #b6ea00;
    color: #3a3a35;
}

/* .btn-arrow hardcodes a white icon color, which already matches the olive
   button; only the lime .featured button needs the icon darkened to match */
.pricing-card.featured > .pricing-cta .btn-arrow {
    color: #3a3a35;
}

.plan-price {
    font-weight: 700;
    font-size: 18px;
}

.plan-sub {
    font-size: 15px;
    /* 0.9 keeps white-on-olive above the 4.5:1 AA contrast threshold */
    opacity: 0.9;
    margin-top: 4px;
}

.plan-sub-skeleton {
    display: inline-block;
    width: 80px;
    height: 15px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--placeholder-bg-2) 25%, var(--placeholder-bg-1) 37%, var(--placeholder-bg-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

/* ---------- badges / icons ---------- */
.badge-label {
    font-weight: 500;
    font-size: 16px;
}

.step-icon {
    font-size: 32px;
    color: var(--olive);
}

.step-title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}

.step-desc {
    font-size: 16px;
    color: var(--muted-2);
    line-height: 1.5;
}

.why-title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.why-desc {
    font-size: 16px;
    color: var(--muted-2);
    line-height: 1.55;
}

/* ---------- hero ---------- */
.hero-car-img {
    width: 46px;
    height: 99px;
    border-radius: 10px;
}

.trust-text {
    font-size: 17px;
}

.trust-text strong{
    color: var(--olive);
}

.hero-trust-logo {
    display: block;
    width: auto;
    margin-bottom: 25px;
}

.hero-lead {
    max-width: 560px;
}

.form-title {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    text-align: center;
}

.form-subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 16px;
    margin-top: 6px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-note {
    font-size: 15px;
    color: var(--muted-2);
    line-height: 1.55;
}

/* ---------- steps ---------- */
.steps-copy {
    padding-top: 20px;
}

.steps-lead {
    max-width: 520px;
}

/* ---------- cta ---------- */
.cta-car-img {
    width: 80px;
    height: 44px;
    border-radius: 8px;
    display: block;
}

.cta-lead {
    max-width: none;
}

.center-cta {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

/* ---------- rating summary ---------- */
.rating-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.rating-number {
    font-size: 30px;
    font-weight: 700;
}

.rating-stars {
    color: var(--gold);
    font-size: 20px;
}

.rating-count {
    font-size: 17px;
    color: var(--muted);
}

/* ---------- faq ---------- */
.faq-question {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.faq-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--muted);
    margin-top: 16px;
}

/* ---------- footer ---------- */
.footer-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}

.footer-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}

.footer-text {
    font-size: 16px;
    color: var(--white);
}

.footer-legal-notice {
    font-size: 11px;
    color: var(--white);
    opacity: 0.6;
    line-height: 1.5;
    margin-top: 80px;
}

.footer-copyright {
    font-size: 16px;
    color: var(--white);
    margin-top: 12px;
}

.footer-logo-img {
    height: 84px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.footer-link-more {
    color: var(--white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-link-more:hover{
    color: var(--line-2);
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- contact page ---------- */
.page-header {
    padding: 70px 0 50px;
    text-align: center;
    background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(var(--olive-rgb), 0.08), transparent 70%);
}

.page-header-lead {
    max-width: 560px;
    margin: 16px auto 0;
    text-align: center;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 15px;
    color: var(--muted-3);
}

.breadcrumb a {
    color: var(--muted-3);
}

.breadcrumb a:hover {
    color: var(--olive);
}

.breadcrumb-current {
    color: var(--olive);
    font-weight: 600;
}

.contact-section {
    padding: 20px 0 100px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: start;
    margin-top: 20px;
}

.contact-info-lead {
    margin-top: 16px;
    max-width: 420px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.contact-info-card:hover {
    border-color: var(--olive);
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
    transform: translateY(-2px);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--olive-light);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-label {
    font-size: 14px;
    color: var(--muted-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.contact-info-value {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    margin-top: 4px;
}

a.contact-info-value:hover {
    color: var(--olive);
    text-decoration: underline;
}

.contact-info-sub {
    font-size: 14px;
    color: var(--muted-2);
    margin-top: 4px;
}

.contact-form-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--dark-shadow-rgb), 0.10);
    padding: 44px 40px;
}

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

.input,
.textarea {
    width: 100%;
    display: block;
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    padding: 16px 18px;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    transition: border-color .2s ease;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--muted-3);
}

.input:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-color: var(--olive);
}

.textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-form-card {
        padding: 36px 32px;
    }
}

@media (max-width: 640px) {
    .page-header {
        padding: 44px 0 34px;
    }

    .contact-section {
        padding: 10px 0 60px;
    }

    .contact-form-card {
        padding: 28px 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ---------- application / multi-step form ---------- */
.application-section {
    padding: 20px 0 100px;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 50px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-3);
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--muted-3);
    background: var(--white);
    flex-shrink: 0;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.step-label {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.step-item.active .step-circle {
    background: var(--olive);
    border-color: var(--olive);
    color: var(--white);
}

.step-item.active .step-label {
    color: var(--ink);
}

.step-item.completed .step-circle {
    background: var(--olive-light);
    border-color: var(--olive);
    color: var(--olive);
}

.step-connector {
    width: 60px;
    height: 2px;
    background: var(--border-light);
    flex-shrink: 0;
    transition: background-color .2s ease;
}

.step-connector.completed {
    background: var(--olive);
}

.form-step {
    max-width: 960px;
    margin: 0 auto;
}

.application-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--dark-shadow-rgb), 0.06);
    padding: 44px 48px;
}

.field-hint {
    font-weight: 400;
    color: var(--muted-3);
    font-size: 14px;
}

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

.phone-input-group {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 220px;
    position: relative;
}

.phone-input-group .input {
    flex: 1;
    min-width: 120px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    padding-inline-end: 44px;
}

.phone-check-icon {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    pointer-events: none;
}

.phone-check-icon[hidden] {
    display: none;
}

.phone-code-select {
    position: relative;
    flex-shrink: 0;
}

.phone-code-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    border: 1.5px solid var(--border-light);
    border-inline-end: none;
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    background: var(--placeholder-bg-2);
    padding: 0 12px;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s ease;
}

.phone-code-trigger:hover,
.phone-code-trigger[aria-expanded="true"] {
    background: var(--placeholder-bg-1);
}

.phone-code-flag {
    font-size: 18px;
    line-height: 1;
}

.phone-code-value {
    font-size: 15px;
}

.phone-code-chevron {
    color: var(--muted-3);
    transition: transform .2s ease;
}

.phone-code-trigger[aria-expanded="true"] .phone-code-chevron {
    transform: rotate(180deg);
}

.phone-code-select .country-dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 260px;
}

.country-option-dial {
    font-weight: 600;
    color: var(--muted-2);
    flex-shrink: 0;
}

.gender-tabs {
    display: flex;
    border: 1.5px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

.gender-tab {
    flex: 1;
    border: none;
    background: var(--white);
    padding: 15px 18px;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.gender-tab+.gender-tab {
    border-left: 1.5px solid var(--border-light);
}

.gender-tab.active {
    background: var(--olive);
    color: var(--white);
}

.license-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.license-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border: 1.5px solid var(--border-light);
    border-radius: 14px;
    padding: 20px 12px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.license-card:hover {
    border-color: var(--olive);
    transform: translateY(-2px);
}

.license-card.active {
    border-color: var(--olive);
    background: var(--olive-light);
}

.license-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.license-card input:focus-visible~.license-icon {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.license-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--olive-light);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.license-card.active .license-icon {
    background: var(--olive);
    color: var(--white);
}

.license-letter {
    font-size: 12px;
    font-weight: 700;
    color: var(--olive);
    background: var(--olive-light);
    border-radius: 6px;
    padding: 1px 8px;
    transition: background-color .2s ease, color .2s ease;
}

.license-card.active .license-letter {
    background: var(--olive);
    color: var(--white);
}

.license-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.plan-select-card {
    position: relative;
    cursor: pointer;
    padding: 30px 26px;
    border: 1.5px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.plan-select-card:hover {
    transform: translateY(-2px);
}

.plan-select-card.selected {
    border-color: var(--olive);
    background: #5f6608;
}

.plan-select-card.selected .pricing-title,
.plan-select-card.selected .pricing-price {
    color: var(--white);
}

.plan-select-card.selected .pricing-price-regular {
    color: rgba(255, 255, 255, 0.6);
}

.plan-select-card.selected .pricing-desc,
.plan-select-card.selected .pricing-feature-item {
    color: rgba(255, 255, 255, 0.9);
}

/* list icons are green.svg by default (visible on the light unselected card);
   force them white when the card turns dark green on selection, otherwise
   they'd be green-on-green and disappear */
.plan-select-card.selected .pricing-feature-item img {
    filter: brightness(0) invert(1);
}

.plan-select-card:not(.selected) {
    background: var(--white);
    box-shadow: 0 12px 30px rgba(var(--dark-shadow-rgb), 0.05);
}

.plan-select-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.plan-select-badge {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--olive);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(var(--dark-shadow-rgb), 0.18);
    z-index: 1;
}

.plan-select-card.selected .plan-select-badge {
    display: inline-flex;
    /* the card's own bg is now a similarly-dark olive, so flip this badge to
       white/olive instead of olive/white or it nearly disappears against it */
    background: var(--white);
    color: #5f6608;
}

/* always-on marketing badge (independent of selection state) — sits opposite
   the "Selected" pill so the two never collide. Same colors as .pricing-badge
   (home/pricing pages) for consistency, kept at this card's own position/shape. */
.plan-recommended-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #3a3a35;
    background: #c7ff00;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 8px 18px rgba(var(--dark-shadow-rgb), 0.18);
    z-index: 1;
}

.plan-recommended-badge[hidden] {
    display: none;
}

/* this card renders narrower here than on pricing.html/index.html (it shares
   space with the order-summary column), so scale text and the thumb down to fit */
.plan-select-card .pricing-title {
    font-size: 19px;
    margin-top: 40px;
}

.plan-select-card .pricing-price {
    font-size: 26px;
}

.plan-select-card .pricing-price-regular {
    font-size: 15px;
}

.plan-select-card .pricing-desc {
    font-size: 15px;
}

.plan-select-card .card-thumb {
    width: 80px;
    margin-top: 30px;
}

/* the full-width feature-list row relies on flex-wrap, which only makes
   sense while .pricing-card lays its children out as a row — on mobile it
   switches to flex-direction: column, where "wrap" would instead open a second
   column and "flex: 0 0 100%" would size against the main (vertical) axis, so
   both are scoped to the same widths this card is a row.
   Uses the direct-child combinator because the home/pricing-page cards nest
   their list inside .flex-1 instead, right after the description — there it
   should just flow at .flex-1's width, not claim its own full row.
   The boundary is 641px (where flex-direction: column stops), NOT 1025px: the
   card is already a row through the 641–1024 tablet band, and leaving it
   unwrapped there forced the validity rows' min-content width into the same
   line as the copy and thumb, pushing the card past the viewport. */
@media (min-width: 641px) {
    .pricing-card {
        flex-wrap: wrap;
    }

    .pricing-card > .pricing-feature-list,
    .pricing-card > .pricing-cta,
    .pricing-card > .validity-select {
        flex: 0 0 100%;
    }
}

.pricing-card .pricing-feature-list {
    width: 100%;
    padding-top: 16px;
}

/* application.html's plan-select-card list is a direct child wrapped onto its
   own full-width row (see the direct-child rule above), so it stacks the base
   14px margin-top on top of the 16px padding-top above — 30px, visibly more
   gap than the home/pricing cards where the list nests inside .flex-1 right
   after the description. Trim it back down for this card only. */
.pricing-card > .pricing-feature-list {
    margin-top: 0;
    padding-top: 10px;
}

.plan-select-card .card-thumb-wide {
    width: 140px;
}

.upload-field input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.upload-box {
    border: 1.5px dashed var(--placeholder-border);
    border-radius: 16px;
    padding: 30px 20px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    cursor: pointer;
    background: var(--placeholder-bg-2);
    transition: border-color .2s ease, background-color .2s ease;
}

.upload-box:hover {
    border-color: var(--olive);
}

.upload-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(var(--dark-shadow-rgb), 0.06);
    flex-shrink: 0;
}

.upload-title {
    font-weight: 600;
    font-size: 15px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-sub {
    font-size: 13px;
    color: var(--muted-3);
}

.upload-field.has-file .upload-box {
    border-style: solid;
    border-color: var(--olive);
    background: var(--olive-light);
}

.upload-preview {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    display: none;
}

.upload-field.has-file .upload-preview {
    display: block;
}

.upload-field.has-file .upload-icon {
    display: none;
}

.signature-wrap {
    border: 1.5px dashed var(--placeholder-border);
    border-radius: 16px;
    padding: 16px;
    background: var(--placeholder-bg-2);
}

.signature-pad {
    width: 100%;
    height: 200px;
    display: block;
    border-radius: 10px;
    background: var(--white);
    touch-action: none;
    cursor: crosshair;
}

.signature-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
}

.signature-hint {
    font-size: 13px;
    color: var(--muted-3);
}

.signature-clear {
    border: 1.5px solid var(--border-light);
    background: var(--white);
    border-radius: 8px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
    flex-shrink: 0;
}

.signature-clear:hover {
    border-color: var(--olive);
    color: var(--olive);
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

.order-summary {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--dark-shadow-rgb), 0.06);
    padding: 36px 34px;
    position: sticky;
    top: 30px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    color: var(--muted-2);
    padding: 12px 0;
    border-bottom: 1px solid var(--border-lighter);
}

.summary-row span:last-child {
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}

.summary-total {
    border-bottom: none;
    padding-top: 18px;
    font-size: 18px;
}

.summary-total span {
    font-weight: 700;
    color: var(--ink);
}

.summary-total span:last-child {
    color: var(--olive);
    font-size: 22px;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--muted-2);
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-field input {
    margin-top: 3px;
    accent-color: var(--olive);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
}

.step-nav .btn,
.step-nav .btn-outline {
    min-width: 200px;
    justify-content: center;
}

@media (max-width: 1024px) {
    .application-card {
        padding: 34px 28px;
    }

    .license-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
    }
}

@media (max-width: 640px) {
    .stepper {
        gap: 6px;
    }

    .step-label {
        display: none;
    }

    .step-connector {
        width: 24px;
    }

    .application-card {
        padding: 26px 20px;
    }

    .license-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-nav {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .step-nav .btn,
    .step-nav .btn-outline {
        width: 100%;
        min-width: 0;
    }
    .order-summary {
        padding: 25px 20px;
    }
}

/* ---------- form validation ---------- */
.field-error {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.4;
    flex-basis: 100%;
}

.field-error.show {
    display: flex;
}

.field-error-icon {
    flex-shrink: 0;
}

.input.invalid,
.textarea.invalid {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.form-select.invalid {
    border-color: var(--danger);
}

.license-grid.invalid .license-card,
.signature-wrap.invalid,
.upload-field.invalid .upload-box {
    border-color: var(--danger);
}

.checkbox-field.invalid {
    color: var(--danger);
}

/* ---------- legal / content pages ---------- */
.legal-section {
    padding: 20px 0 100px;
}

.legal-content {
    max-width: 820px;
    margin: 0 auto;
}

.legal-updated {
    font-size: 14px;
    color: var(--muted-3);
    margin-bottom: 44px;
    text-align: center;
}

.legal-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 44px;
    margin-bottom: 16px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    font-size: 16px;
    color: var(--muted-2);
    line-height: 1.7;
    margin-bottom: 16px;
}

.legal-content ul {
    margin: 0 0 16px 20px;
    padding: 0;
}

.legal-content li {
    font-size: 16px;
    color: var(--muted-2);
    line-height: 1.7;
    margin-bottom: 8px;
}

.legal-content strong {
    color: var(--ink);
}

/* ---------- guarantee / secure checkout panel ---------- */
.guarantee-panel {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    padding: 24px;
    background: var(--bg-soft);
    border-radius: 24px;
}

.guarantee-card {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 18px;
    padding: 32px;
    border: 1px solid var(--olive-light);
}

.guarantee-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.guarantee-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--olive-light);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-card-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
}

.guarantee-body {
    display: flex;
    align-items: center;
    gap: 24px;
}

.guarantee-list {
    flex: 1;
    min-width: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 18px;
    padding-inline-end: 130px;
}

.guarantee-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.guarantee-list li img {
    flex-shrink: 0;
}

.guarantee-seal {
    position: absolute;
    inset-inline-end: 24px;
    bottom: 20px;
}

.guarantee-desc {
    font-size: 15px;
    color: var(--muted-2);
    line-height: 1.55;
    max-width: 360px;
    margin-bottom: 20px;
}

/* Secure Checkout is the 2nd of the two .guarantee-card panels (the 1st, Our
   Guarantee, keeps its left-aligned list + seal layout) */
.guarantee-card:nth-child(2) {
    align-items: center;
    text-align: center;
}

.guarantee-card:nth-child(2) .guarantee-cards-img {
    max-width: 320px;
    margin-inline: auto;
}

.guarantee-powered-by {
	padding-top: 15px;
	font-size: 12px;
	color: var(--muted-2);
	border-top: 1px solid var(--olive-border-soft);
	width: 100%;
	margin-top: 15px;
}

.guarantee-powered-by-logo {
    height: 15px;
    width: auto;
    vertical-align: -3px;
    margin-inline: 4px;
}

.guarantee-cards-img {
    width: 100%;
    height: auto;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .guarantee-panel {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .guarantee-card {
        padding: 24px;
    }

    .guarantee-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .guarantee-list {
        grid-template-columns: 1fr;
        width: 100%;
        padding-inline-end: 0;
    }

    .guarantee-seal {
        position: static;
        align-self: flex-start;
        margin-top: 20px;
    }
}

/* ---------- pricing page ---------- */
.pricing-note-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 60px;
}

.pricing-legal-list {
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-legal-list li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 14px;
    font-style: italic;
    color: var(--muted-2);
    line-height: 1.6;
    text-align: left;
}

.pricing-legal-list li+li {
    margin-top: 16px;
}

.pricing-legal-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--olive);
}

/* ---------- faq page ---------- */
.faq-page-list {
    max-width: 820px;
    margin: 56px auto 0;
}

.faq-category-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--olive);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 56px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.faq-category-heading::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--olive);
    flex-shrink: 0;
}

.faq-category-heading:first-child {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .pricing-note-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- license check gate (application page, on load) ---------- */
.license-check-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 15, 0.72);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.license-check-overlay[hidden] {
    display: none;
}

.license-check-modal {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 70px rgba(var(--dark-shadow-rgb), 0.3);
}

.license-check-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

.license-check-desc {
    font-size: 15px;
    color: var(--muted-2);
    line-height: 1.55;
    margin-bottom: 28px;
}

.license-check-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- image editor (crop / rotate / zoom) ---------- */
.image-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 15, 0.72);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.image-editor-overlay[hidden] {
    display: none;
}

.image-editor-modal {
    background: var(--white);
    border-radius: 20px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 30px 70px rgba(var(--dark-shadow-rgb), 0.3);
}

.image-editor-title {
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
}

.image-editor-mode-tabs {
    display: flex;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.image-editor-mode-tab {
    flex: 1;
    border: none;
    background-color: var(--white);
    padding: 10px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.image-editor-mode-tab+.image-editor-mode-tab {
    border-left: 1.5px solid var(--border-light);
}

.image-editor-mode-tab.active {
    background-color: var(--olive);
    color: var(--white);
}

.image-editor-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: repeating-linear-gradient(45deg, var(--placeholder-bg-1), var(--placeholder-bg-1) 10px, var(--placeholder-bg-2) 10px, var(--placeholder-bg-2) 20px);
    touch-action: none;
    cursor: grab;
}

.image-editor-viewport.dragging {
    cursor: grabbing;
}

.image-editor-img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    user-select: none;
    pointer-events: none;
}

.image-editor-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.image-editor-zoom-wrap {
    display: contents;
}

.image-editor-zoom-wrap[hidden] {
    display: none;
}

.image-editor-zoom {
    flex: 1;
    accent-color: var(--olive);
}

.image-editor-cropbox {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2000px rgba(20, 20, 15, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3);
    cursor: move;
    touch-action: none;
}

.image-editor-cropbox[hidden] {
    display: none;
}

.image-editor-cropbox-handle {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--olive);
    cursor: nwse-resize;
    touch-action: none;
}

.image-editor-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border-light);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease;
}

.image-editor-btn:hover {
    border-color: var(--olive);
    color: var(--olive);
}

.image-editor-reset {
    width: auto;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}

.image-editor-hint {
    font-size: 13px;
    color: var(--muted-3);
    text-align: center;
    margin-top: 14px;
}

.image-editor-fine-row {
    margin-top: 14px;
}

.image-editor-fine-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-2);
    margin-bottom: 6px;
}

.image-editor-fine-value {
    color: var(--olive);
    font-weight: 700;
}

.image-editor-fine-rotation {
    width: 100%;
    accent-color: var(--olive);
}

.image-editor-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.image-editor-actions .btn,
.image-editor-actions .btn-outline {
    flex: 1;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
}

@media (max-width: 640px) {
    .image-editor-modal {
        padding: 20px;
    }
}


/* ---------- countries page (browse by continent) ---------- */
.countries-header-form {
    max-width: 480px;
    margin: 34px auto 0;
    text-align: left;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--olive-rgb), 0.12);
    padding: 30px;
}

.rating-row-header {
    margin-top: 22px;
}

.browse-countries-section {
    background: var(--bg-soft);
    padding: 90px 0;
}

.browse-countries-lead {
    max-width: 560px;
    margin: 16px auto 0;
}

.continent-tabs {
    max-width: 970px;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid var(--border-light);
    box-shadow: 0 14px 34px rgba(var(--dark-shadow-rgb), 0.08);
}

.continent-tabs .plan-tab {
    flex: 0 0 150px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
}

.continent-panels {
    margin-top: 40px;
}

.continent-panel {
    display: none;
}

.continent-panel.active {
    display: block;
}

.country-search-results {
    display: none;
}

.country-search-results.active {
    display: block;
}

.country-search-count {
    text-align: center;
    color: var(--muted-3);
    font-size: 14px;
    margin-bottom: 20px;
}

.country-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.country-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    transition: border-color .2s ease, background-color .2s ease;
}

.country-chip:hover {
    border-color: var(--olive);
    background: var(--olive-light);
}

.country-chip-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.country-empty-state {
    text-align: center;
    color: var(--muted-3);
    padding: 40px 0;
}

@media (max-width: 900px) {
    .country-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .countries-header-form {
        padding: 24px 20px;
    }

    .country-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .continent-tabs {
        flex-direction: row;
    }

    .continent-tabs .plan-tab {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ---------- check-permit page (country landing) ---------- */
.permit-header {
    padding: 70px 0 90px;
}

.permit-header-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
    text-align: left;
}

.permit-header-copy .breadcrumb {
    justify-content: flex-start;
    margin-left: 0;
}

.permit-header-copy .page-header-lead {
    text-align: left;
    margin-left: 0;
}

@media (max-width: 1024px) {
    .permit-header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .permit-header-copy {
        text-align: center;
    }

    .permit-header-copy .breadcrumb {
        justify-content: center;
    }

    .permit-header-copy .page-header-lead {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }
}

.facility-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 16px 32px;
    margin-top: 36px;
    list-style: none;
    padding: 0;
}

.facility-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.included-copy-col .facility-list {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 14px 28px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.included-copy-col .facility-item {
    font-size: 14px;
    color: var(--muted);
}

.permit-form-card {
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(var(--olive-rgb), 0.14);
    padding: 36px 34px;
}

.form-select-hidden {
    display: none;
}

@media (max-width: 780px) {
    .facility-list {
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 480px) {
    .facility-list {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .permit-form-card {
        padding: 28px 22px;
    }
}

/* ---------- check-permit page: what's included + about destination ---------- */
.included-section {
    background: var(--bg-soft);
    padding: 90px 0;
}

.included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.included-slider-col .products-row {
    margin-top: 0;
}

.included-slider-col .arrow-btn {
    background: var(--olive);
    color: var(--white);
}

.included-slider-col .arrow-btn:hover:not(:disabled) {
    background: var(--olive-light);
    color: var(--olive);
}

.included-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.included-slide img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    padding: 30px;
}

.included-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.included-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
}

.permit-about-section {
    background: var(--olive-light);
    padding: 90px 0;
}

.permit-about-lead {
    max-width: 680px;
    margin: 16px auto 0;
}

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

    .included-slide img {
        height: 280px;
    }
}

/* ---------- nav bar: prevent the mobile menu toggle from being pushed
   off-screen on small phones (logo + CTA + currency + toggle no longer all
   fit in one row under ~420px) ---------- */
@media (max-width: 420px) {
    .nav-bar {
        gap: 10px;
    }

    .nav-actions {
        gap: 10px;
    }

    .nav-actions .btn {
        display: none;
    }
}