@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-latin-600.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}@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-greek-400.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-latin-400.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 {--navy: #0B2E57; --blue: #6AAEE8; --black: #0E1116; --white: #FFFFFF; --lemon: #F5FF1F; --gold: #C99A0E;--g900: #1A212B; --g800: #2C3542; --g700: #545E6B; --g400: #9AA4B0; --g200: #DDE2E8; --g50: #F4F6F8;--bg: var(--white); --surface: var(--g50); --ink: var(--black); --muted: var(--g700); --line: var(--g200);--link: var(--navy); --text-link: var(--navy); --focus: var(--navy); --pin: var(--navy); --pin-edge: var(--white);--good: #1E7D43; --fair: #B06D00; --exposed: #B3261E; --none: var(--g200);--head: 'Outfit', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;--text: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', 'Noto Naskh Arabic', Tahoma, sans-serif;--r-s: 8px; --r-m: 12px; --r-l: 16px; --wrap: 1120px; --gut: 16px;--frieze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cpath d='M0 30 C10 30 14 22 14 15 C14 7 8 3 3 6 C-1 9 2 15 6 13 M14 15 C14 26 22 30 30 30' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");color-scheme: light dark;}@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {--bg: var(--black); --surface: var(--g900); --ink: var(--g50); --muted: var(--g400); --line: var(--g800);--link: var(--blue); --text-link: var(--white); --focus: var(--lemon); --pin: var(--blue); --pin-edge: var(--black);--good: #4CBF7E; --fair: #FFB400; --exposed: #FF6B60; --none: var(--g800);}}:root[data-theme="dark"] {--bg: var(--black); --surface: var(--g900); --ink: var(--g50); --muted: var(--g400); --line: var(--g800);--link: var(--blue); --text-link: var(--white); --focus: var(--lemon); --pin: var(--blue); --pin-edge: var(--black);--good: #4CBF7E; --fair: #FFB400; --exposed: #FF6B60; --none: var(--g800);}* { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }html:has(#menu:popover-open) { overflow: hidden; }body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--text); overflow-x: hidden; }a { color: var(--text-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }img { max-width: 100%; }h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 8px 0 10px; }h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 44px 0 10px; }h3 { font-size: 1.08rem; margin: 18px 0 6px; }p { margin: 0 0 12px; }.i { display: inline-block; flex: none; vertical-align: -0.2em; overflow: visible; }h2 > .i { color: var(--link); margin-inline-end: 10px; vertical-align: -0.15em; }.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--lemon); color: var(--black); padding: 8px 12px; z-index: 50; border-radius: var(--r-s); }.skip:focus { top: 8px; }.wrap { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gut) 48px; }.note { color: var(--muted); font-size: .9rem; }.lead p, p.lead { font-size: 1.12rem; max-width: 68ch; }header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }.bar { max-width: var(--wrap); margin: 0 auto; height: 64px; padding: 0 var(--gut); display: flex; align-items: center; gap: 14px; }.brand { display: flex; align-items: center; margin-inline-end: auto; min-height: 44px; }.brand .logo { height: 30px; width: auto; display: block; }.nav { display: flex; gap: 22px; }.nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 10px 0; }.nav a:hover { color: var(--link); text-decoration: underline; }.langbtn, .menubtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 600 .85rem var(--text); padding: 0 12px; cursor: pointer; }.menubtn { display: none; padding: 0; }.langpop { inset: 72px var(--gut) auto auto; margin: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); color: var(--ink); padding: 14px; width: min(92vw, 420px); box-shadow: 0 12px 40px rgb(0 0 0 / 22%); }[dir="rtl"] .langpop { inset: 72px auto auto var(--gut); }.langpop p { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }.langpop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2px 8px; }.langpop a { display: flex; align-items: center; gap: 8px; padding: 9px 8px; min-height: 40px; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }.langpop a:hover { background: var(--surface); }.langpop a[aria-current] { background: var(--navy); color: var(--white); }.panel { inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none; width: min(85vw, 360px); border: 0; padding: 64px 20px 24px; background: var(--bg); color: var(--ink); box-shadow: -12px 0 40px rgb(0 0 0 / 25%); flex-direction: column; gap: 6px; overflow-y: auto; }[dir="rtl"] .panel { inset: 0 auto 0 0; }.panel:popover-open { display: flex; }.panel::backdrop { background: rgb(0 0 0 / 40%); }.panel .close { position: absolute; top: 10px; inset-inline-end: 12px; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); cursor: pointer; }.plinks { display: flex; flex-direction: column; margin-bottom: 18px; }.plinks a { padding: 12px 0; min-height: 44px; font: 600 1.15rem var(--head); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }.panel .btn { margin-top: auto; text-align: center; }@media (prefers-reduced-motion: no-preference) {.panel:popover-open { animation: slidein .3s ease-out; }@keyframes slidein { from { transform: translateX(100%); } }[dir="rtl"] .panel:popover-open { animation-name: slidein-rtl; }@keyframes slidein-rtl { from { transform: translateX(-100%); } }}@media (max-width: 959px) {.nav { display: none; }.menubtn { display: inline-flex; }}@media (max-width: 599px) { header .app { display: none; } .bar .langbtn span { display: none; } .bar .langbtn { padding: 0; } }.langbtn.wide { justify-content: flex-start; padding: 0 16px; gap: 8px; }.flag { flex: none; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 18%); }.panel .langbtn.wide { margin: 4px 0 16px; }.langpop { z-index: 40; }.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 15px; border-radius: 10px; background: var(--navy); color: var(--white); text-decoration: none; font: 500 .95rem var(--text); border: 1px solid var(--navy); }.btn:hover { filter: brightness(1.12); }.btn.lemon { background: var(--lemon); color: var(--black); border-color: var(--black); }.btn.ghost { background: transparent; color: var(--link); border-color: currentColor; }.btn.ghost.light { color: var(--white); border-color: rgb(255 255 255 / 75%); }header .btn.app { min-height: 40px; padding: 8px 16px; font-size: .92rem; }.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }.cta { margin: 20px 0 12px; }.cta .buttons .btn:first-child { background: var(--lemon); color: var(--black); border-color: var(--black); }.cta.inline { background: var(--surface); border-radius: var(--r-m); padding: 14px; }.cta.inline .buttons .btn:first-child, .cta.box .buttons .btn + .btn { background: transparent; color: var(--link); border-color: currentColor; }.sticky { display: none; }@media (max-width: 759px) {.sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; transition: transform .25s ease; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }.sticky .btn { display: flex; background: var(--lemon); color: var(--black); border-color: var(--black); }.sticky.off { transform: translateY(110%); }body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }}@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .sticky { transition: none; } }.hero { position: relative; isolation: isolate; color: var(--white); background: var(--navy); min-height: min(72vh, 640px); display: flex; align-items: flex-end; }.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 22 40 / 70%) 0%, rgb(8 22 40 / 25%) 55%, transparent 80%), linear-gradient(180deg, rgb(11 46 87 / 0%) 30%, rgb(11 46 87 / 50%) 60%, rgb(8 22 40 / 92%) 100%); }[dir="rtl"] .hero::before { background: linear-gradient(270deg, rgb(8 22 40 / 70%) 0%, rgb(8 22 40 / 25%) 55%, transparent 80%), linear-gradient(180deg, rgb(11 46 87 / 0%) 30%, rgb(11 46 87 / 50%) 60%, rgb(8 22 40 / 92%) 100%); }.hero-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gut) 56px; }.hero h1 { color: var(--white); max-width: 20ch; font-size: clamp(2.1rem, 5.4vw, 3.9rem); text-wrap: balance; }.hero .lead { color: rgb(255 255 255 / 92%); max-width: 56ch; }.hero .note { color: rgb(255 255 255 / 80%); }.hero .crumbs ol, .hero .crumbs a { color: rgb(255 255 255 / 88%); }.hero-cap { position: absolute; bottom: 6px; inset-inline-end: 12px; margin: 0; font-size: .75rem; color: rgb(255 255 255 / 80%); text-shadow: 0 1px 2px rgb(0 0 0 / 60%); }.hero-cap a { color: inherit; }.hero.plain { min-height: 0; background: var(--navy); }.hero.plain::before { background: none; }.hero.plain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--blue); opacity: .3; -webkit-mask: var(--frieze) repeat-x left center / auto 100%; mask: var(--frieze) repeat-x left center / auto 100%; }body:not(.has-hero) main .wrap { padding-top: 12px; }.has-hero .hero ~ main .wrap { padding-top: 4px; }.hero .cta .note { color: rgb(255 255 255 / 80%); }.hero .cta .buttons .btn:first-child { border-color: var(--lemon); }@media (max-width: 599px) { .hero { min-height: 520px; } .hero-in { padding: 32px var(--gut) 72px; } .hero-cap { inset-inline-start: 12px; } }.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; padding: 0; margin: 8px 0; font-size: .85rem; color: var(--muted); }.crumbs li + li::before { content: "›"; margin: 0 6px; }[dir="rtl"] .crumbs li + li::before { content: "‹"; }.crumbs a { display: inline-block; min-height: 24px; padding: 2px 0; }.cmap { margin: 12px 0 8px; }.cmap-in { position: relative; width: 100%; border-radius: var(--r-l); overflow: hidden; background: #B9DCE8; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%); }.cmap-in > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }.cmap figcaption, figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; }.cmap a, .cmap .me { position: absolute; width: 0; height: 0; color: var(--black); text-decoration: none; direction: ltr; }.cmap i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: block; }.cmap a i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }.cmap span { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; font: 600 12.5px/1.25 var(--text); background: rgb(255 255 255 / 92%); color: var(--black); padding: 2px 6px; border-radius: 6px; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); }.cmap a:not(.m) span { clip-path: inset(50%); }@media (min-width: 1100px) { .cmap a.on span { clip-path: none; } }.cmap a:hover span, .cmap a:focus-visible span { clip-path: none; }.cmap a span, .cmap .me span { left: calc(var(--r, 6px) + 4px); }.cmap .l span, .cmap .me.l span { left: auto; right: calc(var(--r, 6px) + 4px); }.cmap .pk { --r: 6px; } .cmap .pk.top { --r: 7px; } .cmap .pk.me { --r: 10px; }.cmap .rg.s1 { --r: 5px; } .cmap .rg.s2 { --r: 6.5px; } .cmap .rg.s3 { --r: 8.5px; } .cmap .rg.s4 { --r: 11px; }.cmap a:hover span, .cmap a:focus-visible span { z-index: 3; background: var(--navy); color: var(--white); }.cmap a:hover, .cmap a:focus-visible { z-index: 4; }.cmap span b { font-weight: 400; opacity: .7; margin-inline-start: 3px; }.pk i { width: 11px; height: 11px; background: var(--navy); border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); }.pk.port i { border-radius: 2px; }.pk.buoy i { background: var(--white); border: 3px solid var(--navy); }.pk.top i { background: var(--gold); width: 13px; height: 13px; }.pk.me i { width: 20px; height: 20px; background: var(--lemon); border: 3px solid var(--black); }.pk.me span { font-size: 14px; }.ar { z-index: 2; }.ar i { display: none; }.cmap .ar span { left: 0; right: auto; transform: translate(-50%, -50%); background: var(--navy); color: var(--white); font-family: var(--head); font-size: 13px; padding: 3px 8px; }.ar:hover span, .ar:focus-visible span { background: var(--black); }.rg i { background: var(--navy); border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 35%); }.rg.s1 i { width: 10px; height: 10px; } .rg.s2 i { width: 13px; height: 13px; } .rg.s3 i { width: 17px; height: 17px; } .rg.s4 i { width: 22px; height: 22px; }.rg.s4 span { font-size: 13.5px; }.rg:hover i, .rg:focus-visible i { background: var(--lemon); border-color: var(--black); }.mlegend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 4px 0 0; font-size: .85rem; color: var(--muted); }.mlegend li { display: flex; align-items: center; gap: 8px; }.mlegend .pk { position: relative; width: 14px; height: 14px; display: inline-block; }.mlegend .pk i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }.mapsec h2 { margin-top: 32px; }.mapsec > .note { margin-bottom: 4px; }.cmap-sc { border-radius: var(--r-l); }@media (max-width: 699px) {.med-map .cmap-sc, .group-map .cmap-sc { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }.med-map .cmap-in { width: 700px; }.group-map .cmap-in { width: 560px; }}.steps { list-style: none; counter-reset: s; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }.steps li { counter-increment: s; border-top: 3px solid var(--navy); padding-top: 14px; position: relative; }.steps .step-i { position: absolute; top: 18px; inset-inline-end: 0; color: var(--link); }.steps li::before { content: counter(s); font: 600 2.4rem/1 var(--head); color: var(--blue); }.steps h3 { font-size: 1.2rem; margin-top: 10px; }.cards { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }.card > a { display: block; position: relative; border-radius: var(--r-m); overflow: hidden; color: var(--white); text-decoration: none; aspect-ratio: 3 / 2; background: var(--navy); }.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.card > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(8 22 40 / 85%)); }.card .cname, .card .cn { position: absolute; inset-inline-start: 14px; z-index: 1; }.card .cname { bottom: 30px; font: 600 1.25rem/1.15 var(--head); }.card .cn { bottom: 10px; font-size: .85rem; opacity: .9; }.card small { display: block; font-size: .72rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }.card small a { color: inherit; }@media (prefers-reduced-motion: no-preference) { .card > a:hover img { transform: scale(1.04); } }.explain p { max-width: 68ch; }.ticks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 28px; }.ticks li { padding-inline-start: 34px; position: relative; }.ticks .i { position: absolute; inset-inline-start: 0; top: .1em; color: var(--link); }.countries { columns: 3 240px; column-gap: 32px; }.country { break-inside: avoid; margin-bottom: 14px; }.country h3 { margin: 10px 0 4px; }.country ul { list-style: none; margin: 0; padding: 0; }.country li { padding: 3px 0; }.country a { display: inline-block; min-height: 24px; }.country span, .chips span, ul.list .meta, ul.near span { color: var(--muted); font-size: .88rem; }.endcta { margin: 56px calc(50% - 50vw) -48px; padding: 56px max(var(--gut), calc(50vw - var(--wrap) / 2 + var(--gut))) 64px; background: var(--navy); color: var(--white); position: relative; }.endcta h2 { margin-top: 0; color: var(--white); }.endcta p { max-width: 60ch; }.endboat { position: absolute; top: 44px; inset-inline-end: max(var(--gut), calc(50vw - var(--wrap) / 2 + var(--gut))); width: 220px; height: auto; color: var(--blue); opacity: .6; }[dir="rtl"] .endboat { transform: scaleX(-1); }@media (max-width: 899px) { .endboat { position: static; display: block; width: 150px; margin: 0 0 6px; } }ul { padding-inline-start: 20px; }ul.list, ul.near { list-style: none; padding: 0; }ul.list li, ul.near li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }ul.list li > .pk { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }ul.list li > .pk i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }ul.list a { font-weight: 400; }ul.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }ul.chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }ul.chips a { text-decoration: none; font-weight: 400; }.phead { padding-top: 4px; }.sub { color: var(--muted); margin-bottom: 16px; }figure { margin: 0 0 16px; }.photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); background: var(--surface); }.gallery { margin: -4px 0 16px; }.gallery ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }.gallery figure { margin: 0; }.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); background: var(--surface); }.gallery figcaption { margin-top: 4px; overflow-wrap: anywhere; }.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }.facts div { background: var(--surface); border-radius: var(--r-m); padding: 10px 12px; }.facts dt { font-size: .78rem; color: var(--muted); }.facts dd { margin: 0; font-weight: 700; }.pgrid section, .pgrid .lead { max-width: 70ch; }.cta.box { background: var(--surface); border-radius: var(--r-l); padding: 16px; margin: 12px 0; }.cta.box .buttons { flex-direction: column; }.cta.box .btn { width: 100%; text-align: center; }@media (min-width: 1000px) {.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 44px; }.pgrid > * { grid-column: 1; }.pgrid > .pside { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 84px; }}.rosebox { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 8px 0; }.rose { width: 160px; height: 160px; direction: ltr; }.rose text { font-size: 9px; text-anchor: middle; fill: var(--muted); }.rose path { stroke: var(--bg); stroke-width: 1.5; }.w-good { fill: var(--good); background: var(--good); }.w-fair { fill: var(--fair); background: var(--fair); }.w-exposed { fill: var(--exposed); background: var(--exposed); }.w-none { fill: var(--none); }.legend { list-style: none; padding: 0; margin: 0; font-size: .9rem; }.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }.faq summary { cursor: pointer; list-style-position: outside; padding: 6px 0; min-height: 44px; display: flex; align-items: center; }.faq summary h3 { margin: 0; font-size: 1rem; }.prose { max-width: 70ch; }.foot { background: var(--black); color: var(--g200); margin-top: 0; position: relative; }.frieze { height: 30px; background: var(--blue); opacity: .45; -webkit-mask: var(--frieze) repeat-x left center / auto 100%; mask: var(--frieze) repeat-x left center / auto 100%; }.fin { max-width: var(--wrap); margin: 0 auto; padding: 36px var(--gut) 12px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 28px; }.foot h2 { font-size: .9rem; color: var(--white); margin: 4px 0 8px; }.foot ul { list-style: none; padding: 0; margin: 0; }.foot li a, .foot a { color: var(--g200); text-decoration: none; display: inline-block; min-height: 24px; padding: 3px 0; font-size: 13px; }.foot a:hover { color: var(--white); text-decoration: underline; }.foot .langbtn { color: var(--g200); border-color: var(--g700); }.fbrand .logo { height: 30px; width: auto; margin-bottom: 8px; }.sig { font: 600 1.1rem var(--head); color: var(--white); margin: 6px 0 2px; }.fbrand p { font-size: .9rem; }.fnote { max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gut) 28px; font-size: .78rem; color: var(--g400); border-top: 1px solid var(--g800); }@media (max-width: 899px) { .fin { grid-template-columns: 1fr 1fr; } }@media (max-width: 520px) { .fin { grid-template-columns: 1fr; } body { font-size: 16px; } }#suggest { position: fixed; z-index: 30; bottom: calc(84px + env(safe-area-inset-bottom)); inset-inline-start: var(--gut); max-width: calc(100vw - 2 * var(--gut)); display: flex; align-items: center; gap: 4px; background: var(--navy); color: var(--white); border-radius: 999px; padding: 4px 4px 4px 16px; box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }#suggest[hidden] { display: none; }#suggest a { color: var(--white); font-weight: 600; padding: 8px 0; }#suggest .x { background: none; border: 0; color: var(--white); font-size: 1.4rem; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; }@media (min-width: 760px) { #suggest { bottom: 24px; } }@media (min-width: 1160px) {.cmap.wide { width: min(calc(100vw - 32px), 1400px); position: relative; left: 50%; transform: translateX(-50%); }.cmap.wide .cmap-sc { width: min(100%, calc(88vh * var(--ar, 1))); margin: 0 auto; }}.zframe { position: relative; }.cmap.zoomable .cmap-sc { overflow: hidden; touch-action: pan-x pan-y; }.cmap.zoomable.zoomed .cmap-sc { overflow: auto; overscroll-behavior: contain; cursor: grab; scrollbar-width: thin; }.cmap.zoomable.dragging .cmap-sc { cursor: grabbing; }.cmap.zoomable .cmap-in { max-width: none; }.cmap.zoomable a:not(.zv) span { clip-path: inset(50%); }.cmap.zoomable a.zv span, .cmap.zoomable a:hover span, .cmap.zoomable a:focus-visible span { clip-path: none; }.zbar { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }.zbar button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--white); color: var(--navy); font: 600 22px/1 var(--text); cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / 25%); }.zbar button:disabled { opacity: .45; cursor: default; }.zbar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }@media (min-width: 1160px) {.cmap.wide .zframe { width: min(100%, calc(88vh * var(--ar, 1))); margin: 0 auto; }.cmap.wide .zframe .cmap-sc { width: 100%; }}.photo a.lbx, .gallery a.lbx { display: block; cursor: zoom-in; }html.lb-open { overflow: hidden; }dialog.lb { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 10 14 / 96%); color: var(--white); }dialog.lb::backdrop { background: rgb(8 10 14 / 96%); }.lb figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 12px; box-sizing: border-box; }.lb img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; user-select: none; -webkit-user-drag: none; }.lb figcaption { color: rgb(255 255 255 / 80%); font-size: .82rem; margin-top: 10px; text-align: center; overflow-wrap: anywhere; }.lb figcaption a { color: inherit; }.lb-n { position: absolute; top: 18px; left: 18px; margin: 0; font-size: .9rem; color: rgb(255 255 255 / 80%); }.lb button { position: absolute; border: 0; background: rgb(255 255 255 / 12%); color: var(--white); width: 48px; height: 48px; border-radius: 50%; font: 400 30px/1 var(--text); cursor: pointer; }.lb button:hover { background: rgb(255 255 255 / 24%); }.lb button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }.lb-x { top: 8px; right: 8px; }.lb-p, .lb-f { top: 50%; transform: translateY(-50%); }.lb-p { left: 10px; } .lb-f { right: 10px; }.lb [hidden] { display: none; }@media (max-width: 699px) { .lb-p, .lb-f { top: auto; bottom: 10px; transform: none; } }details.grp { border-bottom: 1px solid var(--line); }details.grp > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; padding: 10px 0; min-height: 48px; }details.grp > summary h3 { margin: 0; font-size: 1.12rem; }details.grp > summary span { color: var(--muted); font-size: .9rem; }details.grp .list { margin: 0 0 6px; }details.grp .more { margin: 6px 0 14px; font-weight: 500; }.how .more { margin: 18px 0 0; font-weight: 600; }.apphero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 28px 0 40px; }.apphero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; max-width: 14ch; margin: 0 0 16px; }.apphero .lead { max-width: 52ch; }.apphero .buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }.btn.big { min-height: 48px; padding: 12px 22px; font-size: 1rem; border-radius: 12px; }.appctx { margin: 14px 0 0; padding: 10px 14px; border-inline-start: 4px solid var(--lemon); background: var(--surface); border-radius: 0 var(--r-s) var(--r-s) 0; font-weight: 500; max-width: 52ch; }[dir="rtl"] .appctx { border-radius: var(--r-s) 0 0 var(--r-s); }.ahshots { position: relative; padding-top: 24px; padding-bottom: 72px; padding-inline-end: 16%; }.ahshots .shot.desk { max-width: none; }.ahshots .shot.phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 29%; min-width: 120px; padding: 6px; border-radius: 26px; }.ahshots .shot.phone img { border-radius: 21px; }.stores { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 22px 0 0; max-width: 520px; }.stores li { display: flex; }.store { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: var(--r-m); border: 1.5px solid var(--black); text-decoration: none; }.store > span { display: flex; flex-direction: column; line-height: 1.2; text-align: start; min-width: 0; }.store small { font: 400 .78rem var(--text); }.store b { font: 600 1.02rem var(--head); }.btn.store.web { background: var(--black); color: var(--white); border-color: var(--black); justify-content: flex-start; }.btn.store.web small { color: var(--lemon); }.store.soon { color: var(--muted); border: 1.5px dashed var(--g400); background: var(--surface); cursor: default; }.endcta .stores { margin-top: 24px; }.endcta .store.soon { color: var(--g200); background: transparent; border-color: rgb(255 255 255 / 45%); }.endcta .btn.store.web { border-color: var(--white); }.how-app { border-top: 1px solid var(--line); padding-top: 8px; }.appsteps { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: none; }.appstep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }.appstep:first-child { border-top: 0; }.appstep:nth-child(even) .stext { order: 2; }.stext h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 12px 0 8px; }.stext p { max-width: 52ch; }.snum { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--link); }.snum span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--lemon); color: var(--black); font: 600 1.2rem/1 var(--head); border: 1.5px solid var(--black); }.seg { display: inline-flex; gap: 0; margin: 14px 0 0; padding: 3px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--muted); }.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }.seg label:has(input:checked) { background: var(--navy); color: var(--white); }.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }.shots { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; min-width: 0; }.appstep:has(input[value="desk"]:checked) .shot.phone, .appstep:has(input[value="phone"]:checked) .shot.desk { display: none; }.appstep:has(input[value="desk"]:checked) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }.appstep:nth-child(even):has(input[value="desk"]:checked) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }.shot { margin: 0; }.shot img { display: block; width: 100%; height: auto; }.shot.phone { width: min(300px, 72vw); padding: 9px; border-radius: 40px; background: var(--g900); box-shadow: 0 18px 40px -18px rgb(11 46 87 / 55%), inset 0 0 0 1.5px var(--g700); }.shot.phone img { border-radius: 31px; }.shot.desk { width: 100%; max-width: 720px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background: var(--g200); box-shadow: 0 18px 40px -20px rgb(11 46 87 / 50%); }.shot.desk::before { content: ""; display: block; height: 22px; background: radial-gradient(circle at 14px 11px, #FF5F57 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, #FEBC2E 4px, transparent 4.5px), radial-gradient(circle at 42px 11px, #28C840 4px, transparent 4.5px), var(--g50); border-bottom: 1px solid var(--line); }@media (prefers-reduced-motion: no-preference) { .appstep .shot { animation: shotin .25s ease-out; } }@keyframes shotin { from { opacity: .4; } to { opacity: 1; } }.pricing { padding-top: 8px; border-top: 1px solid var(--line); }.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 12px 0 32px; }.pack { background: var(--navy); color: var(--white); border-radius: var(--r-l); padding: 22px 20px; }.pack p { margin: 0 0 10px; }.pack p:last-child { margin-bottom: 0; }.pk-name { font-weight: 600; color: var(--lemon); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }.pk-big { font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.15 var(--head); }.costs table { width: 100%; border-collapse: collapse; font-size: .98rem; }.costs caption { text-align: start; font: 600 1.08rem var(--head); margin-bottom: 8px; }.costs th, .costs td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }.costs thead th { font-size: .82rem; font-weight: 500; color: var(--muted); padding-top: 0; }.costs tbody th { font-weight: 400; }.costs td { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }.example { margin: 16px 0 6px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-s); }.pfacts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 28px; }.pfacts li { display: flex; gap: 10px; align-items: flex-start; }.pfacts .i { color: var(--link); margin-top: 3px; }@media (max-width: 959px) {.apphero { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; }.packs { grid-template-columns: 1fr; }}@media (max-width: 759px) {.appstep, .appstep:has(input[value="desk"]:checked), .appstep:nth-child(even):has(input[value="desk"]:checked) { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }.appstep:nth-child(even) .stext { order: 0; }.stores { grid-template-columns: 1fr 1fr; }.stores li:first-child { grid-column: 1 / -1; }.apphero .buttons .btn { flex: 1 1 auto; }}@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.store.web { border-color: var(--g400); } :root:not([data-theme="light"]) .pack { background: var(--g900); border: 1px solid var(--g700); } }:root[data-theme="dark"] .btn.store.web { border-color: var(--g400); }:root[data-theme="dark"] .pack { background: var(--g900); border: 1px solid var(--g700); }html[dir="rtl"] .lb-p { left: auto; right: 10px; }html[dir="rtl"] .lb-f { right: auto; left: 10px; }html[dir="rtl"] .lb-p, html[dir="rtl"] .lb-f { scale: -1 1; }.trip-tag { font-weight: 600; margin: 0 0 6px; color: var(--lemon); }.trip-figs { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-weight: 500; }.trip-figs li { display: inline-flex; align-items: center; gap: 6px; }.btn .i { flex: none; margin-inline-end: 8px; }.trip-day { padding: 14px 0; border-top: 1px solid var(--line); }.trip-day h3 { margin: 0 0 2px; }.trip-day > .note { margin: 0 0 8px; }.trip-stops { list-style: none; margin: 0; padding: 0; }.trip-stop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding: 8px 0; }.trip-stop h4 { margin: 0; font: 600 1.05rem var(--head); }.trip-stop .meta, .trip-stop .note { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }.trip-ph { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-s); background: var(--surface); }.trip-ph.none { display: flex; align-items: center; justify-content: center; color: var(--navy); }.ai-tag { display: inline-block; padding: 0 6px; border-radius: var(--r-s); background: rgb(0 0 0 / 68%); color: var(--white); font-size: .7rem; font-weight: 600; line-height: 1.5; text-shadow: none; }.trip-ph-box { position: relative; display: block; }.trip-ph-box .ai-tag { position: absolute; inset-inline-start: 4px; inset-block-end: 4px; max-width: calc(100% - 8px); font-size: .62rem; line-height: 1.3; }.trip-band { background: var(--navy); color: var(--white); border-radius: var(--r-m); padding: 18px 20px; margin: 18px 0; }.trip-band h2 { color: var(--white); margin-top: 0; }@media (max-width: 520px) { .trip-stop { grid-template-columns: 84px minmax(0, 1fr); } .trip-ph { width: 84px; height: 60px; } }.hero-lead { max-width: 56ch; font-size: 1.15rem; margin: 8px 0 0; }.zone-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }.zone-cards .card > a { aspect-ratio: 4 / 3; }.zone-cards .card .cname { font-size: 1.6rem; }@media (min-width: 760px) { .zone-cards .card:first-child { grid-column: span 2; } .zone-cards .card > a { aspect-ratio: auto; height: 280px; } }.trip-cards .card .cname { font-size: 1.1rem; bottom: 28px; inset-inline-end: 14px; }.trip-cards .card > a::after { background: linear-gradient(180deg, transparent 20%, rgb(8 22 40 / 90%)); }.method-fig { margin: 20px 0 8px; }.method-svg { display: block; width: 100%; height: auto; border-radius: var(--r-m); }:root[data-theme="dark"] .method-svg { filter: brightness(.9); }.share { margin: 16px 0 20px; }.share-t { margin: 0 0 6px; color: var(--muted); font-size: .88rem; }.share ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }.share a, .share button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-link); font: 500 .95rem var(--text); text-decoration: none; cursor: pointer; }.share .share-net { padding: 0; }.share a:hover, .share button:hover { border-color: currentColor; }.share-ok { margin: 6px 0 0; font-size: .88rem; color: var(--good); }.share-ok:empty { margin: 0; }