:root {
    --ink: #10233f;
    --ink-soft: #43516a;
    --paper: #ffffff;
    --cream: #f7f5ef;
    --cream-deep: #eeeae0;
    --line: #dfe4ea;
    --accent: #e53a32;
    --accent-dark: #bf211d;
    --teal: #167d78;
    --shadow: 0 24px 70px rgba(16, 35, 63, 0.13);
    --radius-lg: 28px;
    --radius-md: 18px;
    --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.narrow-shell { max-width: 820px; }

.site-header {
    position: relative;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(16, 35, 63, 0.08);
    backdrop-filter: blur(14px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: baseline; text-decoration: none; font-size: 32px; font-weight: 850; letter-spacing: -1.1px; }
.brand span { color: var(--accent); }
.brand strong { color: var(--ink); }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a, .footer-links a { color: var(--ink-soft); text-decoration: none; font-weight: 650; font-size: 14px; }
.main-nav a:hover, .footer-links a:hover { color: var(--accent); }
.header-cta { padding: 10px 17px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 750; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions > a { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.header-actions > .header-order-cta { padding: 11px 18px; border-radius: 999px; font-size: 14px; }

.hero {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    min-height: 480px;
    background:
        radial-gradient(circle at 75% 24%, rgba(229, 58, 50, 0.14), transparent 24%),
        linear-gradient(135deg, #f8f5ed 0%, #f3f0e7 58%, #e9eee9 100%);
}
.hero::before { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(16, 35, 63, 0.08); border-radius: 50%; right: -160px; top: -210px; clip-path: inset(210px 160px 0 0); }
.hero-grid { min-height: 480px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; padding-block: 40px 92px; }
.eyebrow, .section-kicker { display: inline-block; color: var(--teal); font-size: 13px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1, .country-hero h1 { max-width: 720px; margin: 12px 0 18px; font-size: clamp(42px, 5vw, 64px); line-height: 1; letter-spacing: -0.055em; }
.hero-lead, .country-hero p { max-width: 650px; margin: 0; color: var(--ink-soft); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 25px; }
.primary-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 24px; border: 0; border-radius: 13px; color: #fff; background: var(--accent); box-shadow: 0 10px 25px rgba(229, 58, 50, 0.2); cursor: pointer; text-decoration: none; font: inherit; font-weight: 800; transition: transform .18s ease, background .18s ease; }
.primary-button:hover { transform: translateY(-2px); background: var(--accent-dark); }
.primary-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.text-link { text-decoration: none; font-weight: 800; }
.text-link span { color: var(--accent); }
.hero-points { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.hero-points li::before { content: "✓"; margin-right: 8px; color: var(--teal); font-weight: 900; }

.hero-visual { position: relative; min-height: 350px; }
.route-story { position: absolute; inset: 8px 0; overflow: hidden; border: 1px solid rgba(16,35,63,.09); border-radius: 30px; background: rgba(255,255,255,.55); box-shadow: 0 25px 60px rgba(16,35,63,.08); }
.story-source { position: absolute; z-index: 3; left: 24px; top: 25px; width: 202px; }
.story-label { display: block; margin-bottom: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.source-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.source-flags span { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid rgba(16,35,63,.09); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 6px 14px rgba(16,35,63,.06); font-size: 20px; line-height: 1; }
.source-flags small { color: var(--ink); font-size: 10px; font-weight: 850; }
.journey-line { position: absolute; z-index: 1; left: 0; top: 66px; width: 100%; height: 280px; overflow: visible; }
.journey-parcel { position: absolute; z-index: 4; left: 46%; top: 52%; width: 142px; height: 112px; display: flex; align-items: center; justify-content: center; border: 1px solid #986535; border-radius: 7px; background: linear-gradient(135deg, #d7a66d 0%, #bc8047 100%); box-shadow: 0 20px 34px rgba(73,48,24,.23); transform: translate(-50%,-50%) rotate(-4deg); }
.journey-parcel::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(92,56,23,.18); border-radius: 3px; }
.journey-parcel::after { content: ""; position: absolute; left: -1px; top: 23px; width: calc(100% + 2px); border-top: 1px solid rgba(92,56,23,.25); }
.journey-parcel .parcel-tape { position: absolute; inset-block: -1px; left: 50%; width: 24px; border-inline: 1px solid rgba(124,86,28,.2); background: rgba(232,199,119,.92); transform: translateX(-50%); }
.shipping-label { position: relative; z-index: 2; width: 88px; padding: 7px 8px; border-radius: 3px; color: var(--ink); background: white; box-shadow: 0 3px 8px rgba(70,42,20,.14); transform: translateX(-17px); }
.shipping-label strong { display: block; color: var(--accent); font-size: 10px; letter-spacing: .03em; }
.shipping-label i { display: block; height: 12px; margin: 5px 0; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 7px); }
.shipping-label small { display: block; font-size: 6px; font-weight: 900; letter-spacing: .04em; }
.journey-transport { position: absolute; z-index: 3; left: 56%; top: 33%; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; color: var(--ink); background: white; box-shadow: 0 8px 18px rgba(16,35,63,.09); }
.journey-transport span { color: var(--accent); font-size: 18px; }
.journey-transport small { font-size: 10px; font-weight: 850; }
.story-destination { position: absolute; z-index: 4; right: 20px; top: 78px; width: 145px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border-radius: 22px; color: white; background: var(--accent); box-shadow: 0 18px 36px rgba(229,58,50,.24); }
.romania-flag { font-size: 31px; line-height: 1; }
.story-destination small { margin-top: 10px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.story-destination strong { font-size: 23px; letter-spacing: -.02em; }
.story-destination em { margin-top: 7px; font-size: 10px; font-style: normal; font-weight: 750; }
.story-steps { position: absolute; z-index: 5; right: 18px; bottom: 19px; left: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border-radius: 12px; color: var(--ink-soft); background: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; }
.story-steps span { display: flex; align-items: center; gap: 5px; }
.story-steps b { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 9px; }
.story-steps i { color: var(--accent); font-size: 14px; font-style: normal; }

.calculator-wrap { position: relative; z-index: 5; }
.hero-calculator { margin-top: -200px; padding-bottom: 34px; }
.calculator-card { padding: 31px; border: 1px solid rgba(16,35,63,.08); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); scroll-margin-top: 20px; }
.calculator-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.calculator-heading h2 { margin: 4px 0 0; font-size: 25px; letter-spacing: -.025em; }
.route-badge { padding: 7px 12px; border-radius: 999px; color: #0b615d; background: #e3f2ef; font-size: 13px; font-weight: 800; }
.quote-form { display: grid; grid-template-columns: minmax(180px,2fr) minmax(160px,1.8fr) repeat(4,minmax(82px,1fr)) minmax(160px,1.6fr); gap: 12px; align-items: end; }
.field { min-width: 0; }
.field-wide, .field-weight { grid-column: auto; }
.field label { display: block; margin: 0 0 7px; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.field input, .field select { width: 100%; height: 50px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: white; font: inherit; font-size: 15px; transition: border .15s, box-shadow .15s; }
.field input:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,125,120,.12); }
.destination-field input { color: var(--ink); background: var(--cream); opacity: 1; }
.field-note { display: block; margin-top: 6px; color: var(--accent-dark); line-height: 1.35; }
.origin-country-field { position: relative; }
.country-options { position: absolute; z-index: 30; top: 100%; left: 0; width: max(100%, 230px); max-width: calc(100vw - 56px); max-height: 260px; overflow-y: auto; margin-top: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }
.country-option { padding: 10px 12px; border-radius: 7px; cursor: pointer; font-size: 15px; }
.country-option:hover, .country-option.is-active { color: var(--teal); background: #e3f2ef; }
.country-options-empty { padding: 10px 12px; color: var(--ink-soft); font-size: 14px; }
.input-unit { position: relative; }
.input-unit input { padding-right: 42px; }
.input-unit span { position: absolute; right: 12px; top: 50%; color: #7a8595; font-size: 12px; font-weight: 750; transform: translateY(-50%); }
.dimensions { display: contents; }
.quote-form > .primary-button { grid-column: auto; height: 50px; padding-inline: 12px; white-space: nowrap; }
.button-spinner { display: none; width: 18px; height: 18px; margin-right: 9px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
.quote-submit.is-loading .button-spinner { display: inline-block; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.form-status { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--accent-dark); font-size: 14px; font-weight: 650; }
.form-status:empty { display: none; }
.form-status[data-state="success"] { color: var(--teal); }
.quote-results { grid-column: 1 / -1; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.quote-results h3 { margin: 0 0 12px; font-size: 19px; }
.quote-results article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.quote-results article + article { margin-top: 9px; }
.quote-service-description { max-width: 680px; margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.quote-price { flex: 0 0 auto; color: var(--accent-dark); font-size: 18px; font-weight: 900; white-space: nowrap; }

.section { padding-block: 100px; }
.section-muted { background: var(--cream); }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading h2, .answer-grid h2, .faq-grid h2, .prose h2 { margin: 6px 0 12px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p, .answer-copy, .prose p { color: var(--ink-soft); font-size: 17px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1fr .8fr; gap: 60px; align-items: end; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.step-card > span { color: var(--accent); font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.step-card h3 { margin: 22px 0 7px; font-size: 21px; letter-spacing: -.02em; }
.step-card p { margin: 0; color: var(--ink-soft); }
.factors-section { padding-top: 20px; }
.factor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.factor-grid article { min-height: 245px; padding: 28px; border-radius: var(--radius-md); color: white; background: var(--ink); }
.factor-grid article:nth-child(even) { color: var(--ink); background: var(--cream); }
.factor-grid article > span { display: inline-grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #83d8d0; font-size: 12px; font-weight: 900; }
.factor-grid article:nth-child(even) > span { border-color: rgba(16,35,63,.14); color: var(--accent); }
.factor-grid h3 { margin: 34px 0 9px; font-size: 20px; line-height: 1.25; }
.factor-grid p { margin: 0; color: #bdc9d8; font-size: 14px; }
.factor-grid article:nth-child(even) p { color: var(--ink-soft); }
.preparation-section { background: #edf3f0; }
.preparation-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.preparation-card h2 { margin: 7px 0 17px; font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -.045em; }
.preparation-card p { color: var(--ink-soft); font-size: 18px; }
.checklist-grid { display: grid; gap: 12px; }
.checklist-grid article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px; border: 1px solid rgba(16,35,63,.09); border-radius: 15px; background: rgba(255,255,255,.74); }
.checklist-grid b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: white; background: var(--teal); }
.checklist-grid h3 { margin: 0 0 3px; font-size: 17px; }
.checklist-grid p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.country-grid a { display: flex; min-height: 72px; flex-direction: column; justify-content: center; padding: 12px 16px; border: 1px solid rgba(16,35,63,.1); border-radius: 12px; background: white; text-decoration: none; transition: transform .15s, border-color .15s; }
.country-grid a[hidden] { display: none; }
.country-grid a:hover { transform: translateY(-2px); border-color: var(--accent); }
.country-grid span { font-weight: 800; }
.country-grid small { color: var(--ink-soft); }
.country-actions { display: flex; justify-content: center; margin-top: 34px; }
.countries-hero { padding: 74px 0 62px; background: linear-gradient(135deg, var(--cream), #edf1ed); }
.countries-hero h1 { max-width: 850px; margin: 10px 0 16px; font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -.05em; }
.countries-hero p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 18px; }
.country-directory { padding-top: 62px; }
.country-search { position: relative; max-width: 620px; margin-bottom: 34px; }
.country-search label { display: block; margin-bottom: 8px; font-weight: 800; }
.country-search input { width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: var(--ink); background: white; font: inherit; }
.country-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,125,120,.12); }
.country-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 13px; color: var(--ink-soft); }
.notice-box { padding: 25px; border: 1px dashed #c7bda8; border-radius: var(--radius-md); color: var(--ink-soft); background: rgba(255,255,255,.55); }
.reference-price-details { margin-block: 16px; overflow-wrap: anywhere; scroll-margin-top: 24px; }
.reference-price-details summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.reference-price-details p { margin: 10px 0 0; }
.answer-section { color: white; background: var(--ink); }
.answer-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.answer-grid .section-kicker { color: #78d0c8; }
.answer-copy { color: #d3dce8; }
.answer-copy p:first-child { margin-top: 0; }
.faq-section { padding-block: 120px; }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.faq-heading { position: static; }
.faq-grid .faq-heading h2 { margin-top: 8px; font-size: clamp(46px, 5vw, 66px); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 25px 48px 25px 0; cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1.35; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 50%; color: var(--accent); font-size: 29px; font-weight: 800; line-height: 1; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { max-width: 980px; margin: -4px 48px 27px 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }

.country-hero { padding: 70px 0 130px; background: linear-gradient(135deg, var(--cream), #edf1ed); text-align: center; }
.country-hero h1 { margin-inline: auto; font-size: clamp(42px, 6vw, 68px); }
.country-hero p { margin-inline: auto; }
.breadcrumbs { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 9px; margin-bottom: 30px; padding: 7px 12px; border: 1px solid rgba(16,35,63,.1); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.72); box-shadow: 0 6px 18px rgba(16,35,63,.05); font-size: 16px; font-weight: 700; line-height: 1.3; }
.breadcrumbs a { color: var(--teal); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span[aria-hidden="true"], .breadcrumbs > span:not(:last-child) { color: #a6afb9; }
.breadcrumbs > span:last-child { max-width: 240px; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.country-calculator { margin-top: -74px; }
.content-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: start; }
.prose h3 { margin: 34px 0 4px; font-size: 23px; letter-spacing: -.025em; }
.route-summary { padding: 28px; border-radius: var(--radius-md); background: var(--cream); }
.route-summary h2 { margin-top: 0; font-size: 23px; }
.route-summary ul { margin: 18px 0 26px; padding-left: 20px; color: var(--ink-soft); }
.route-summary li { margin: 8px 0; }

.country-hero-compact { padding: 34px 0 76px; text-align: left; }
.country-hero-compact .breadcrumbs { justify-content: flex-start; margin-bottom: 16px; }
.country-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.country-hero-row > div:first-child { min-width: 0; flex: 1; align-self: start; padding-top: 24px; }
.country-hero-compact h1 { max-width: none; margin: 8px 0 10px; font-size: clamp(36px, 5vw, 62px); white-space: normal; overflow-wrap: anywhere; }
.country-hero-compact p { max-width: 650px; margin: 0; font-size: 18px; }
.country-hero-compact .country-hero-intro { max-width:650px; margin-top:20px; }
.country-hero-compact .country-hero-intro p { margin:0 0 12px; font-size:15px; line-height:1.65; }
@media (max-width:720px) { .country-hero-compact .country-hero-intro p { font-size:14px; } }
.route-lockup { flex: 0 0 auto; display: flex; align-items: center; gap: 17px; padding: 15px 20px; border: 1px solid rgba(16,35,63,.1); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 14px 35px rgba(16,35,63,.08); }
.route-lockup > span { display: flex; align-items: center; flex-direction: column; font-size: 34px; line-height: 1; }
.route-lockup small { max-width: 120px; margin-top: 7px; color: var(--ink); font-size: 11px; font-weight: 850; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.route-lockup b { color: var(--accent); font-size: 25px; }
.country-calculator-compact { margin-top: -38px; }
.shipment-responsibility { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; margin-top: 18px; padding: 19px 22px; border: 1px solid #efd3a4; border-radius: 16px; background: #fff9ed; }
.shipment-responsibility > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: white; background: #c77b14; font-size: 21px; font-weight: 900; }
.shipment-responsibility strong { color: var(--ink); font-size: 16px; }
.shipment-responsibility p { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.route-overview { padding-top: 76px; }
.route-overview-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items: start; }
.route-overview h2, .route-detail-grid h2 { margin: 8px 0 15px; font-size: clamp(31px, 4vw, 47px); line-height: 1.08; letter-spacing: -.04em; }
.route-overview-grid > div > p, .route-detail-grid p { color: var(--ink-soft); font-size: 17px; }
.route-benefits { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.route-benefits span { padding: 8px 12px; border-radius: 999px; color: #0b615d; background: #e3f2ef; font-size: 12px; font-weight: 800; }
.route-benefits span::before { content: "✓"; margin-right: 6px; }
.route-specific-note { margin-top: 24px; padding-left: 18px; border-left: 3px solid var(--teal); }
.route-specific-note h3 { margin: 0 0 7px; font-size: 19px; line-height: 1.3; }
.route-specific-note p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.route-note { padding: 28px; border-radius: 20px; color: white; background: var(--ink); }
.route-note strong { font-size: 20px; }
.route-note p { margin: 12px 0 17px; color: #cbd5e1; font-size: 14px; }
.route-note a { color: #83d8d0; font-size: 13px; font-weight: 800; text-decoration: none; }
.origin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.origin-grid article { display: flex; min-height: 94px; align-items: center; gap: 16px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.origin-grid span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 11px; color: white; background: var(--teal); font-size: 11px; font-weight: 900; }
.origin-grid h3 { margin: 0; font-size: 16px; }
.route-detail-section { color: white; background: var(--ink); }
.route-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.route-detail-grid article + article { padding-left: 80px; border-left: 1px solid rgba(255,255,255,.14); }
.route-detail-grid .section-kicker { color: #78d0c8; }
.route-detail-grid p, .route-detail-grid li { color: #cbd5e1; }
.route-detail-grid ul { margin: 20px 0 0; padding-left: 20px; }
.route-detail-grid li { margin: 7px 0; }
.parcel-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.content-status { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.content-status > span { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.content-status-ok > span { color: #0b615d; background: #e3f2ef; }
.content-status-check > span { color: #80520a; background: #fff1cf; }
.content-status-stop > span { color: var(--accent-dark); background: #fde5e2; }
.content-status h3 { margin: 19px 0 12px; font-size: 19px; line-height: 1.25; }
.content-status ul { margin: 0; padding-left: 19px; color: var(--ink-soft); font-size: 14px; }
.content-status li { margin: 6px 0; }
.content-status p { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.fedex-rule-note { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 16px; padding: 18px 20px; border: 1px solid #f1c3bf; border-radius: 14px; background: #fff8f6; font-size: 13px; }
.fedex-rule-note strong { color: var(--accent-dark); }
.fedex-rule-note > div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 7px; }
.fedex-rule-note a { color: var(--teal); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.shipment-practical-section { background: #edf3f0; }
.route-practical-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.route-practical-grid h2 { margin: 8px 0 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.04em; }
.practical-list { display: grid; gap: 10px; }
.practical-list article { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding: 18px; border: 1px solid rgba(16,35,63,.09); border-radius: 14px; background: rgba(255,255,255,.78); }
.practical-list b { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: white; background: var(--teal); font-size: 10px; }
.practical-list h3 { margin: 0 0 3px; font-size: 16px; }
.practical-list p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.problem-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.problem-grid h3 { margin: 0 0 7px; font-size: 18px; }
.problem-grid p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.route-faq { background: white; }

.empty-state { min-height: 65vh; display: grid; place-items: center; padding: 100px 0; text-align: center; background: var(--cream); }
.empty-state h1 { margin: 10px 0; font-size: clamp(42px, 6vw, 70px); letter-spacing: -.05em; }
.empty-state p { margin-bottom: 28px; color: var(--ink-soft); }
.site-footer { padding: 68px 0 24px; color: white; background: #09172a; }
.footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.08fr; gap: clamp(34px, 5vw, 68px); padding-bottom: 50px; }
.footer-about p { max-width: 330px; margin: 17px 0 19px; color: #9dacbf; font-size: 14px; line-height: 1.65; }
.footer-about small { display: block; max-width: 350px; margin-top: 18px; color: #77879b; font-size: 12px; line-height: 1.6; }
.footer-about small a { color: #cbd5e1; }
.brand-footer strong { color: white; }
.footer-route { display: flex; align-items: center; width: 155px; gap: 11px; }
.footer-route span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.055); font-size: 20px; }
.footer-route i { position: relative; flex: 1; height: 1px; background: #415067; }
.footer-route i::after { content: "›"; position: absolute; right: -1px; top: 50%; color: var(--accent); font-size: 18px; font-style: normal; transform: translateY(-54%); }
.footer-column { display: flex; align-items: flex-start; flex-direction: column; }
.footer-column h2 { margin: 3px 0 17px; color: white; font-size: 14px; letter-spacing: .02em; }
.footer-column > a { margin: 5px 0; color: #9dacbf; font-size: 13px; line-height: 1.45; text-decoration: none; transition: color .15s ease; }
.footer-column > a:hover, .footer-about a:hover, .footer-bottom a:hover { color: white; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 21px; border-top: 1px solid #26354a; color: #718198; font-size: 12px; }
.footer-authorities { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.footer-authorities a { color: #8f9db0; text-decoration: none; }

@media (max-width: 980px) {
    .main-nav { display: none; }
    .hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 70px; }
    .hero-copy { position: relative; z-index: 2; }
    .hero-visual { position: relative; right: auto; bottom: auto; width: min(100%, 620px); margin-inline: auto; opacity: 1; }
    .hero-calculator { margin-top: -110px; }
    .quote-form { grid-template-columns: repeat(4, 1fr); }
    .field-wide { grid-column: span 2; }
    .field-weight { grid-column: span 1; }
    .quote-form > .primary-button { grid-column: span 4; }
    .country-grid { grid-template-columns: repeat(3, 1fr); }
    .factor-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .shell { width: min(calc(100% - 28px), var(--shell)); }
    .header-inner { min-height: 66px; }
    .hero { min-height: auto; }
    .hero-grid { min-height: auto; padding-block: 42px 105px; }
    .hero h1 { font-size: clamp(42px, 13vw, 60px); }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
    .hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .hero-points li { display: flex; align-items: flex-start; gap: 4px; font-size: 10px; line-height: 1.3; }
    .hero-points li::before { flex: 0 0 auto; margin-right: 0; }
    .hero-visual { right: auto; bottom: auto; min-height: 330px; transform: none; }
    .hero-calculator { margin-top: -52px; }
    .route-story { inset: 0; }
    .story-source { left: 14px; top: 16px; width: 174px; }
    .source-flags span { padding: 6px; font-size: 18px; }
    .source-flags small { font-size: 9px; }
    .story-destination { right: 12px; top: 92px; width: 124px; min-height: 137px; padding: 16px; }
    .story-destination strong { font-size: 20px; }
    .journey-parcel { left: 43%; top: 57%; width: 112px; height: 90px; }
    .shipping-label { width: 76px; transform: translateX(-13px); }
    .journey-transport { left: 40%; top: 38%; }
    .story-steps { right: 10px; bottom: 12px; left: 10px; gap: 5px; padding-inline: 7px; font-size: 8px; }
    .story-steps b { width: 17px; height: 17px; font-size: 8px; }
    .calculator-card { padding: 22px 18px; border-radius: 20px; }
    .calculator-heading { align-items: flex-start; flex-direction: column; }
    .quote-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .quote-form > .field-wide { grid-column: span 2; }
    .quote-form > .primary-button { grid-column: 1 / -1; }
    .field-weight { grid-column: span 1; }
    .dimensions { display: contents; }
    .quote-form .field label { font-size: 10px; white-space: nowrap; }
    .quote-form .field input, .quote-form .field select { height: 45px; padding-inline: 9px; font-size: 13px; }
    .quote-form .input-unit input { padding-right: 27px; }
    .quote-form .input-unit span { right: 7px; font-size: 9px; }
    .quote-results article { align-items: flex-start; flex-direction: column; gap: 10px; }
    .section { padding-block: 72px; }
    .split-heading, .answer-grid, .faq-grid, .content-grid, .preparation-grid { grid-template-columns: 1fr; gap: 30px; }
    .faq-section { padding-block: 72px; }
    .faq-heading { position: static; }
    .faq-grid .faq-heading h2 { font-size: clamp(39px, 12vw, 54px); }
    .faq-list summary { padding-block: 21px; font-size: 16px; }
    .faq-list p { margin-right: 34px; font-size: 15px; }
    .steps-grid { grid-template-columns: 1fr; }
    .country-grid { grid-template-columns: 1fr 1fr; }
    .factor-grid { grid-template-columns: 1fr; }
    .factor-grid article { min-height: auto; }
    .country-hero { padding: 56px 0 120px; }
    .country-hero-compact { padding: 32px 0 70px; }
    .country-hero-row { align-items: flex-start; flex-direction: column; gap: 25px; }
    .country-hero-compact h1 { white-space: normal; }
    .country-calculator-compact { margin-top: -36px; }
    .shipment-responsibility { grid-template-columns: 34px 1fr; padding: 16px; }
    .shipment-responsibility > span { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
    .route-overview-grid, .route-detail-grid { grid-template-columns: 1fr; gap: 34px; }
    .origin-grid { grid-template-columns: 1fr 1fr; }
    .parcel-content-grid { grid-template-columns: 1fr; }
    .route-practical-grid { grid-template-columns: 1fr; gap: 30px; }
    .route-detail-grid article + article { padding: 34px 0 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .footer-contact { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .footer-authorities { justify-content: flex-start; }
}

@media (max-width: 430px) {
    .quote-form { gap: 7px; }
    .country-grid { grid-template-columns: 1fr; }
    .route-badge { display: none; }
    .site-footer { padding-top: 52px; }
    .origin-grid { grid-template-columns: 1fr; }
    .problem-grid { grid-template-columns: 1fr; }
    .fedex-rule-note { grid-template-columns: 1fr; }
    .fedex-rule-note > div { grid-column: auto; flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-about, .footer-contact { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* Quote selection and address verification. */
[hidden] { display: none !important; }
.calculator-note, .estimate-note { color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.estimate-note { grid-column: 1 / -1; margin: 4px 0 0; }
.quote-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; }
.quote-actions .primary-button { padding: 11px 16px; font-size: 13px; }
.quote-actions [aria-pressed="true"] { background: var(--teal); }
.address-step { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.address-step h3 { margin: 0 0 12px; font-size: 22px; }
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.address-grid fieldset { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.address-grid legend { padding: 0 6px; font-weight: 750; }
.address-grid .field + .field { margin-top: 14px; }
.shipment-review { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); }
.shipment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.8; }
.shipment-review p { color: var(--ink-soft); font-size: 14px; }
.review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.secondary-button, .menu-toggle { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 17px; color: var(--ink); background: white; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.menu-toggle { display: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media (max-width: 980px) {
    .header-inner { position: relative; flex-wrap: wrap; gap: 14px; padding-block: 12px; }
    .menu-toggle:not([hidden]) { display: block; margin-left: auto; }
    .main-nav { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; order: 3; }
    .menu-toggle:not([hidden]) + .main-nav { display: none; }
    .menu-toggle:not([hidden]) + .main-nav.is-open { display: flex; }
    .header-cta { margin-left: 0; }
}
@media (max-width: 720px) {
    .address-grid { grid-template-columns: 1fr; }
    .quote-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
    .review-actions > * { width: 100%; text-align: center; }
    .shipment-review { padding: 18px; }
}

.country-group-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.country-group-links a { text-decoration: none; }
.country-group { scroll-margin-top: 24px; }
.country-group + .country-group { margin-top: 64px; }
.country-group h2 small { display: inline-block; padding: 5px 10px; border-radius: 999px; color: var(--teal); background: #e3f2ef; font-size: 16px; vertical-align: middle; letter-spacing: 0; }

.main-nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; text-underline-offset: 6px; }
.guide-hero .eyebrow { display: block; }
.guide-hero > .shell > .primary-button { margin-top: 14px; }
.guide-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; align-items: start; }
.guide-intro h2 { margin: 8px 0 18px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; line-height: 1.1; }
.guide-intro p, .guide-steps p { color: var(--ink-soft); line-height: 1.7; }
.guide-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.guide-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.guide-step-number { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: var(--teal); background: #e3f2ef; font-size: 14px; font-weight: 850; }
.guide-steps h2 { margin: 5px 0 10px; font-size: 23px; line-height: 1.25; }
.guide-steps p { margin: 0 0 14px; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; }
@media (max-width: 980px) {
    .guide-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
    .header-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); width: 100%; order: 4; gap: 8px; }
    .header-actions > a, .header-actions > .header-order-cta { min-height: 44px; padding: 10px 6px; font-size: 12px; }
    .guide-steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
    .guide-step-number { width: 36px; height: 36px; border-radius: 10px; }
    .guide-steps h2 { margin-top: 3px; font-size: 21px; }
}

.footer-contact address { margin: 0 0 12px; color: #9dacbf; font-size: 13px; line-height: 1.6; font-style: normal; }

.article-header h1 { margin: 18px 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.article-header > p { color: var(--ink-soft); font-size: 18px; }
.article-section { margin-top: 32px; }
.article-section h2 { font-size: 24px; line-height: 1.3; }
.article-section p, .article-list p { color: var(--ink-soft); }
.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.article-list article { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.article-list h2 { margin-top: 0; font-size: 24px; line-height: 1.3; }
@media (max-width: 720px) { .article-list { grid-template-columns: 1fr; } }

/* Shared split hero on secondary pages. */
.hero-side-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); align-items: center; gap: 54px; }
.hero-side-grid > div { min-width: 0; }
.hero-side-grid .breadcrumbs { justify-content: flex-start; }
.hero-side-grid h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.hero-side-grid .primary-button { margin-top: 18px; }
.country-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 48px; }
.country-hero-compact h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
/* Numbered path puzzle; grid and route share the same square coordinates. */
.route-game { display:grid; grid-template-columns:minmax(90px, .8fr) minmax(0, 1.5fr); align-items:center; gap:18px; width:100%; min-width:0; padding:16px; border:1px solid #dbe5e0; border-radius:24px; background:linear-gradient(140deg,#fffdf8,#edf6f2); box-shadow:0 15px 40px #10233f12; text-align:left; }
.route-game-copy, .route-game-grid { min-width:0; }
.route-game-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--ink); font-size:16px; }
.route-game-heading > span { color:var(--teal); font-size:13px; font-weight:800; }
.route-game .route-game-intro { margin:5px 0 14px; font-size:12px; line-height:1.5; color:var(--muted); }
.route-game-board { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; max-width:260px; aspect-ratio:1; margin:auto; overflow:hidden; border-radius:12px; outline:2px solid #b8cdc4; background:#fffefa; touch-action:none; user-select:none; -webkit-user-select:none; }
.route-game-cell { position:relative; display:grid; place-items:center; min-width:0; padding:0; aspect-ratio:1; border:0; border-right:1px solid #dce5dd; border-bottom:1px solid #dce5dd; border-radius:0; background:transparent; cursor:crosshair; -webkit-tap-highlight-color:transparent; }
.route-game-cell:nth-of-type(5n) { border-right:0; }
.route-game-cell:nth-last-of-type(-n+5) { border-bottom:0; }
.route-game-cell.is-visited { background:#14847910; }
.route-game-cell.is-tail { background:#14847918; }
.route-game-number { position:relative; z-index:2; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:white; font-size:13px; font-weight:800; pointer-events:none; }
.route-game-line { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.route-game-line polyline { fill:none; stroke:#148479; stroke-width:.22; stroke-linecap:round; stroke-linejoin:round; }
.route-game-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.route-game-actions button { padding:7px 8px; border:1px solid #b6ccc5; border-radius:8px; background:#ffffffb0; color:var(--teal); font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.route-game-actions button:disabled { opacity:.4; cursor:default; }
.route-game .route-game-help { margin:10px 0; font-size:11px; line-height:1.5; color:var(--muted); }
.route-game-footer { position:relative; height:66px; border-top:1px solid #d8e3dc; color:var(--teal); font-size:12px; font-weight:750; line-height:1.45; }
.route-game-footer > span { position:absolute; inset:9px 0 0; overflow-wrap:anywhere; }
.route-game.is-complete .route-game-board { outline-color:var(--teal); }
.route-game button:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
.article-header.hero-side-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
.article-header.hero-side-grid h1 { font-size: clamp(30px, 3vw, 38px); }
@media (max-width: 980px) {
    .hero-side-grid, .country-hero-row { gap: 28px; grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 720px) {
    .hero-side-grid, .country-hero-row, .article-header.hero-side-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .route-game { max-width:440px; justify-self:center; gap:12px; padding:12px; }
    .route-game-number { width:23px; height:23px; font-size:12px; }
    .route-game-heading { font-size:14px; }
    .hero-side-grid h1, .country-hero-compact h1 { font-size: 32px; }
}


/* Related-route offers with slowly drifting flag colours. */
.route-offers { width: 100%; min-width: 0; padding: 18px; border: 1px solid #ffffff; border-radius: 28px; background: #ffffffb8; box-shadow: 0 20px 55px #10233f0a; }
.offer-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-topline { display:block; padding:3px 3px 16px; color:var(--ink); }
.offer-topline > span:first-child { display:block; font-size:20px; line-height:1.25; font-weight:800; letter-spacing:-.025em; }
.offer-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 19px; background: #f7f8f5; }
.route-offer { position: relative; isolation: isolate; display: block; overflow: hidden; min-height: 305px; border: 1px solid #10233f09; border-radius: 19px; text-decoration: none; background: #fafbf8; }
.route-offer[hidden] { display: none; }
.offer-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(145deg, #ffffffa8, #ffffff20); animation: offer-cycle 6.5s linear both; animation-play-state: var(--offer-play-state, paused); }
.offer-aurora i { position: absolute; width: 85%; height: 90%; border-radius: 45% 55% 65% 35%; filter: blur(32px); opacity: .48; will-change: transform; animation: offer-drift 13s ease-in-out infinite alternate; }
.offer-aurora i:nth-child(1) { background: var(--aurora-a); left: -30%; top: -28%; }
.offer-aurora i:nth-child(2) { background: var(--aurora-b); left: 18%; top: 18%; animation-delay: -5s; animation-duration: 17s; opacity: .85; }
.offer-aurora i:nth-child(3) { background: var(--aurora-c); right: -28%; bottom: -35%; animation-delay: -8s; animation-duration: 15s; }
.offer-content { position: relative; padding: 24px 26px; background: linear-gradient(110deg, #ffffff99, #ffffff0a); }
.offer-flag { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #ffffffb3; border-radius: 50%; background: #ffffff80; font-size: 29px; box-shadow: 0 4px 15px #10233f08; }
.offer-content h2 { margin: 14px 0 0; font-size: 30px; line-height: 1.12; letter-spacing: -.04em; overflow-wrap: anywhere; }
.offer-content h2 > span { display: flex; align-items: center; gap: 12px; margin-top: 5px; color: var(--ink-soft); font-size: 14px; letter-spacing: 0; font-weight: 500; }
.offer-content h2 > span > span { color: var(--teal); }
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.offer-price small { font-size: 13px; color: var(--ink-soft); }
.offer-price strong { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.045em; font-weight: 850; }
.offer-price-unavailable strong { font-size: 24px; }
.country-hero-compact .offer-condition { margin: 7px 0 20px; font-size: 10px; line-height: 1.5; color: var(--ink-soft); }
.offer-link { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #10233f15; font-size: 12px; font-weight: 800; }
.offer-link > span { transition: transform .2s; }
.route-offer:hover .offer-link > span { transform: translateX(4px); }
.offer-bottomline { padding: 14px 3px 0; }
.offer-controls { display: flex; align-items: center; gap: 9px; }
.offer-controls[hidden], .offer-game-launch[hidden] { display: none; }
.offer-controls button, .offer-game-launch, .game-dialog-heading button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 5px 9px; border: 1px solid #10233f12; border-radius: 10px; color: var(--ink-soft); background: #ffffffb3; font: inherit; font-size: 13px; cursor: pointer; }
.offer-controls button:hover, .offer-game-launch:hover { background: white; color: var(--teal); }
.offer-controls > span { color: var(--ink-soft); font-size: 10px; font-variant-numeric: tabular-nums; }
.offer-game-launch { gap: 6px; margin-left: auto; font-size: 11px; }
.route-game-dialog { margin: clamp(16px, 8vh, 80px) auto; width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 22px; border: 1px solid var(--line); border-radius: 25px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.route-game-dialog::backdrop { background: #10233f70; backdrop-filter: blur(6px); }
.game-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.game-dialog-heading h2 { margin: 0; font-size: 19px; }
.route-game-dialog .route-game { max-width: none; }
@keyframes offer-drift { 0% { transform: translate3d(0, 0, 0) rotate(-15deg) scale(.9); } 50% { transform: translate3d(20%, -10%, 0) rotate(20deg) scale(1.15); } 100% { transform: translate3d(10%, 25%, 0) rotate(45deg) scale(1.1); } }
.offer-transition { position: absolute; inset: -2px; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 5% 20%, var(--aurora-a), transparent 68%), radial-gradient(ellipse at 95% 80%, var(--aurora-c), transparent 68%), radial-gradient(ellipse at 55% 45%, var(--aurora-b), #f8faf6 85%); }
.offer-stage.is-transitioning .route-offer { pointer-events: none; }
@keyframes offer-cycle { 0% { transform: scale(1); } 70% { transform: scale(1.06); } 100% { transform: scale(1.2); } }
@media (max-width: 720px) { .route-offers { max-width: 440px; justify-self: center; padding: 14px; } .offer-content { padding: 22px; } .offer-controls button, .offer-game-launch { min-width: 40px; min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .route-offer, .offer-aurora, .offer-aurora i { animation: none; } .offer-aurora i { will-change: auto; } }

/* The completed halo is the cue for advancing to the next offer. */
@property --offer-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.offer-flag::before, .offer-flag::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; }
.offer-flag::before { border: 3px solid #10233f14; }
.offer-flag::after { background: conic-gradient(var(--aurora-a) 0deg, var(--aurora-b) calc(var(--offer-angle) / 2), var(--aurora-c) var(--offer-angle), transparent var(--offer-angle)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: offer-countdown 6.5s linear both; animation-play-state: var(--offer-play-state, paused); }
@keyframes offer-countdown { from { --offer-angle: 0deg; } to { --offer-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .offer-flag::before, .offer-flag::after { display: none; animation: none; } }

.route-game-timing { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px solid #167d781f; border-radius: 9px; background: #ffffffa8; font-size: 11px; color: var(--ink-soft); }
.route-game-timing[hidden], .route-game-ranking[hidden], .route-score-form[hidden] { display: none; }
.route-game-timing time { color: var(--teal); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.route-game-ranking { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.route-game-ranking summary { cursor: pointer; color: var(--teal); font-size: 13px; font-weight: 750; }
.route-score-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 14px; }
.route-score-form label { flex: 1 1 140px; font-size: 12px; font-weight: 700; }
.route-score-form input { display: block; width: 100%; min-width: 0; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: white; color: var(--ink); }
.route-score-form button { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--teal); color: white; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.route-game .route-ranking-note { margin: 10px 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.route-ranking-list { margin: 0; padding-left: 24px; font-size: 12px; }
.route-ranking-list li { padding: 7px 5px; border-bottom: 1px solid #10233f0a; }
.route-ranking-list li > span { display: flex; justify-content: space-between; gap: 12px; }
.route-ranking-list strong { overflow-wrap: anywhere; }
.route-ranking-list time { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* A small flag galaxy for the world directory, with a static no-JS fallback. */
.country-galaxy { position:relative; isolation:isolate; width:100%; min-width:0; aspect-ratio:440/340; overflow:hidden; border:1px solid #174054; border-radius:32px; background:radial-gradient(ellipse at 55% 45%,#183f51 0,#0c243c 48%,#091a2e 100%); box-shadow:0 24px 60px #10233f17,inset 0 0 70px #08172860; }
.galaxy-nebula { position:absolute; inset:8% -15%; transform:rotate(-22deg); border-radius:50%; background:radial-gradient(ellipse at 37% 50%,#66d8c74d,transparent 42%),radial-gradient(ellipse at 66% 53%,#9e91e54d,transparent 40%),radial-gradient(ellipse at center,#6cc5bd24,transparent 64%); filter:blur(15px); pointer-events:none; }
.galaxy-stars { position:absolute; inset:0; pointer-events:none; }
.galaxy-stars i { position:absolute; width:var(--star-size); height:var(--star-size); border-radius:50%; background:#e0f8ff; opacity:var(--star-opacity); box-shadow:0 0 7px #d4faff88; }
.galaxy-rings { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.galaxy-core { position:absolute; z-index:25; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:94px; height:94px; transform:translate(-50%,-50%); border:1px solid #a8eee94d; border-radius:50%; background:radial-gradient(circle at 35% 25%,#24596b,#122f49 70%); box-shadow:0 0 0 8px #9ae8d908,0 0 50px #5ee4cf40,inset 0 0 25px #93e3de14; color:#fff; pointer-events:none; }
.galaxy-core > span { font-size:28px; line-height:1; margin-bottom:7px; }
.galaxy-core strong { font-size:13px; line-height:1.3; }
.galaxy-core small { margin-top:2px; color:#b4d5db; font-size:9px; }
.galaxy-flag { position:absolute; display:grid; place-items:center; width:34px; height:34px; transform:translate(-50%,-50%) scale(var(--flag-scale,1)); border:1px solid #d3f2eb45; border-radius:50%; background:#15364edb; box-shadow:0 4px 12px #020b2355; opacity:var(--flag-opacity,1); text-decoration:none; -webkit-tap-highlight-color:transparent; }
.galaxy-flag > span:first-child { font-size:22px; line-height:1; }
.galaxy-flag-name { position:absolute; bottom:calc(100% + 6px); left:50%; width:max-content; max-width:145px; padding:5px 8px; transform:translateX(-50%); border:1px solid #b7e9dd44; border-radius:7px; background:#f8fffc; color:var(--ink); font-size:10px; font-weight:750; opacity:0; visibility:hidden; pointer-events:none; }
.galaxy-flag:hover, .galaxy-flag:focus-visible { z-index:35 !important; opacity:1; border-color:#b7f4e8; background:#24566b; outline:2px solid #a1e9d7; outline-offset:3px; }
.galaxy-flag:hover .galaxy-flag-name, .galaxy-flag:focus-visible .galaxy-flag-name { opacity:1; visibility:visible; }
.galaxy-caption { position:absolute; bottom:18px; left:0; right:0; color:#bed8e1; text-align:center; font-size:11px; font-weight:650; letter-spacing:.035em; pointer-events:none; }
.galaxy-pause { position:absolute; z-index:40; top:14px; right:14px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #bce9e333; border-radius:50%; background:#fff1; color:#d9f2ee; font-size:13px; cursor:pointer; }
.galaxy-pause:focus-visible { outline:2px solid #a1e9d7; outline-offset:3px; }
.galaxy-pause:disabled { opacity:.4; cursor:default; }
@media (max-width:720px) {
 .country-galaxy { max-width:440px; justify-self:center; }
 .galaxy-core { width:78px; height:78px; }
 .galaxy-core > span { font-size:23px; margin-bottom:5px; }
 .galaxy-core strong { font-size:11px; }
 .galaxy-core small { font-size:8px; }
 .galaxy-flag { width:29px; height:29px; }
 .galaxy-flag > span:first-child { font-size:19px; }
 .galaxy-caption { bottom:12px; font-size:10px; }
}

/* Keep the leaderboard visible beside the puzzle in the modal. */
.route-game-dialog { width:min(960px,calc(100% - 32px)); }
.route-game-dialog .route-game { grid-template-columns:140px minmax(240px,1fr) minmax(210px,.8fr); align-items:start; gap:20px; }
.route-game-dialog .route-game-grid { align-self:start; padding-top:10px; }
.route-game-dialog .route-game-board { max-width:330px; }
.route-game-ranking { padding:18px; border:1px solid #cbded5; border-radius:16px; background:#ffffffb8; }
.route-game-dialog .route-game-ranking { grid-column:3; grid-row:1; align-self:stretch; }
.route-ranking-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.route-ranking-heading > strong { margin:0; color:var(--ink); font-size:18px; line-height:1.3; }
.route-ranking-heading > span { padding:4px 6px; border-radius:5px; color:var(--teal); background:#e4f1eb; font-size:9px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.route-ranking-level { display:block; margin-top:4px; font-size:11px; color:var(--ink-soft); }
.route-game .route-ranking-invite { margin:13px 0; color:var(--ink); font-size:13px; line-height:1.5; }
.route-ranking-list { padding-left:24px; }
.route-ranking-list li::marker { color:var(--teal); font-weight:800; }
.route-ranking-list li:first-child { background:#fbf4df; border-radius:6px; }
.route-ranking-list li { padding:9px 5px; }
.route-game-dialog .route-ranking-list { max-height:310px; overflow-y:auto; }
.route-game.is-complete .route-game-ranking { border-color:var(--teal); background:#f1faf5; }
.route-score-form { margin-top:12px; }
.route-score-form button { width:100%; }
@media (max-width:860px) {
 .route-game-dialog .route-game { grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr); }
 .route-game-dialog .route-game-ranking { grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:560px) {
 .route-game-dialog { padding:14px; }
 .route-game-dialog .route-game { grid-template-columns:minmax(0,1fr); padding:12px; gap:16px; }
 .route-game-dialog .route-game-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:center; }
 .route-game-dialog .route-game-timing { grid-column:2; grid-row:1; margin:0; padding:5px 8px; }
 .route-game-dialog .route-game-timing time { font-size:15px; }
 .route-game-dialog .route-game-intro, .route-game-dialog .route-game-help, .route-game-dialog .route-game-actions, .route-game-dialog .route-game-footer { grid-column:1 / -1; }
 .route-game-dialog .route-game-footer { height:43px; }
 .route-game-dialog .route-game-actions { margin-top:0; }
 .route-game-dialog .route-game-ranking { padding:14px; }
}

/* Two short logic games, with instructions outside the square. */
.offer-bottomline { flex-wrap:wrap; }
.offer-game-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.offer-game-buttons .offer-game-launch { margin-left:0; }
.pairs-dialog { width:min(760px,calc(100% - 32px)); }
.pairs-game { display:grid; grid-template-columns:minmax(150px,.85fr) minmax(240px,1.3fr); align-items:start; gap:26px; padding:20px; border:1px solid #dbe5e0; border-radius:22px; background:linear-gradient(140deg,#fffdf8,#edf6f2); }
.pairs-copy { min-width:0; }
.pairs-copy h3 { margin:12px 0; font-size:24px; line-height:1.15; letter-spacing:-.035em; }
.pairs-copy p { margin:12px 0; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.pairs-copy .pairs-eyebrow { margin:0; font-size:10px; font-weight:750; letter-spacing:.06em; color:var(--teal); }
.pairs-time { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; padding:9px 10px; border:1px solid #167d781f; border-radius:10px; background:#ffffffa8; font-size:12px; }
.pairs-time time { color:var(--teal); font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; }
.pairs-actions { display:flex; flex-wrap:wrap; gap:7px; }
.pairs-actions button { min-height:38px; padding:7px 10px; border:1px solid #b6ccc5; border-radius:9px; color:var(--teal); background:#ffffffc0; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.pairs-actions button:disabled { opacity:.4; cursor:default; }
.pairs-copy .pairs-help { font-size:11px; }
.pairs-copy .pairs-status { min-height:70px; margin:15px 0 0; padding-top:12px; border-top:1px solid #d8e3dc; color:var(--teal); font-size:13px; line-height:1.5; font-weight:750; }
.pairs-board { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; max-width:360px; aspect-ratio:1; margin:4px auto 0; overflow:hidden; border-radius:14px; outline:2px solid #b8cdc4; background:#fffefa; touch-action:none; user-select:none; -webkit-user-select:none; }
.pairs-cell { position:relative; display:grid; place-items:center; min-width:0; padding:0; aspect-ratio:1; border:0; border-right:1px solid #dce5dd; border-bottom:1px solid #dce5dd; border-radius:0; background:transparent; cursor:crosshair; -webkit-tap-highlight-color:transparent; }
.pairs-cell:nth-of-type(5n) { border-right:0; }
.pairs-cell:nth-last-of-type(-n+5) { border-bottom:0; }
.pairs-cell.is-visited { background:color-mix(in srgb,var(--pair-colour) 9%,transparent); }
.pairs-cell.is-tail { background:color-mix(in srgb,var(--pair-colour) 16%,transparent); }
.pairs-number { position:relative; z-index:2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:white; font-size:15px; font-weight:800; pointer-events:none; }
.pairs-number[hidden] { display:none; }
.pairs-lines { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.pairs-lines polyline { fill:none; stroke-width:.19; stroke-linecap:round; stroke-linejoin:round; }
.pairs-game button:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
.pairs-game.is-complete .pairs-board { outline-color:var(--teal); }
@media(max-width:560px) {
    .offer-game-buttons { width:100%; justify-content:flex-end; }
    .pairs-dialog { padding:14px; }
    .pairs-game { grid-template-columns:minmax(0,1fr); padding:14px; gap:14px; }
    .pairs-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; }
    .pairs-copy .pairs-eyebrow { grid-column:1 / -1; }
    .pairs-copy h3 { font-size:22px; }
    .pairs-time { grid-column:2; grid-row:2; margin:8px 0; padding:6px 8px; }
    .pairs-time > span { display:none; }
    .pairs-time time { font-size:17px; }
    .pairs-copy > p:not(.pairs-eyebrow), .pairs-actions { grid-column:1 / -1; }
    .pairs-copy p { margin:7px 0; font-size:12px; }
    .pairs-copy .pairs-status { min-height:43px; margin-top:8px; padding-top:8px; }
    .pairs-number { width:27px; height:27px; font-size:13px; }
}