/* MapsPin — landing page
   Colours come from the app: icon gradient (MapsPin.icon), onboarding
   background (mapspinbck), red pin head, and the extension's button blue. */

:root {
    color-scheme: light dark;

    --blue-900: #003a78;
    --blue-700: #0053a3;   /* icon gradient top */
    --blue-500: #006aff;   /* splash background top */
    --blue-400: #0a84ff;   /* app accent */
    --blue-300: #00b5ff;   /* icon gradient bottom */
    --blue-200: #0ac8ff;   /* splash background bottom */
    --button:   #1a73e8;   /* extension overlay button */
    --button-hover: #1765cc;
    --pin:      #d11a0a;   /* pin head */
    --ok:       #1e9e57;   /* positive state: checkmarks, "today" in the timeline */
    --ok-light: #34c759;   /* the pulsing "today" dot */
    --ring:     #62c1ee;

    --bg: #ffffff;
    --bg-soft: #f3f7fc;
    --card: #ffffff;
    --fg: #0d1b2a;
    --muted: #5a6778;
    --border: rgba(13, 27, 42, 0.09);
    --shadow: 0 1px 2px rgba(13, 27, 42, .06), 0 10px 30px rgba(13, 27, 42, .08);
    --shadow-lg: 0 30px 80px rgba(0, 40, 110, .28);

    --map-land: #eef1ea;
    --map-park: #cfe8c6;
    --map-water: #aad6f5;
    --map-road: #ffffff;
    --map-road-major: #fbd98b;

    --radius: 18px;
    --max: 1120px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #07111f;
        --bg-soft: #0b1a2e;
        --card: #0f2139;
        --fg: #eaf2fb;
        --muted: #9fb0c4;
        --border: rgba(255, 255, 255, 0.09);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);

        --map-land: #1d2a36;
        --map-park: #1f3b2d;
        --map-water: #17405f;
        --map-road: #34475a;
        --map-road-major: #6b5a2e;
    }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 64px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--blue-400); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 650; }

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0;
}

.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--blue-400);
    margin-bottom: 14px;
}

.section { padding: 110px 0; }
.section.soft { background: var(--bg-soft); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h1, .section-head h2 { font-size: clamp(32px, 4.4vw, 50px); }
.section-head p { color: var(--muted); font-size: 19px; margin: 18px 0 0; }

/* ---------- Nav ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
    color: #fff;
}

.nav.scrolled {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 1px 0 var(--border);
    color: var(--fg);
}

.nav .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 19px;
    color: inherit;
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.nav-links {
    display: flex;
    gap: 4px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 500;
}
/* Padding instead of a wide gap, so the hover pill has room */
.nav-links a {
    color: inherit;
    padding: 6px 11px;
    border-radius: 999px;
    transition: background-color .15s ease;
}
.nav-links a:hover { background: color-mix(in srgb, currentColor 10%, transparent); text-decoration: none; }

.lang { position: relative; }
.lang summary {
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 999px;
    padding: 7px 28px 7px 12px;
    position: relative;
    user-select: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
    content: "";
    position: absolute;
    right: 12px; top: 50%;
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .7;
}
.lang ul {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    /* two columns: 16 languages would make one very tall list */
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow), 0 20px 40px rgba(0, 30, 80, .18);
    max-height: 70vh;
    overflow: auto;
}
.lang li a {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--fg);
    font-size: 15px;
}
.lang li a:hover { background: var(--bg-soft); text-decoration: none; }
.lang li a[aria-current="page"] { color: var(--blue-400); font-weight: 650; }

.nav .btn-small { display: none; }
.nav.scrolled .btn-small { display: inline-flex; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-weight: 600;
    border-radius: 14px;
    padding: 14px 24px;
    border: 0;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Official Apple badge: used as-is, never recoloured or re-lettered.
   Apple asks for at least 40px height and clear space of 1/4 badge height. */
.store-badge {
    display: inline-block;
    line-height: 0;
    border-radius: 12px;
    transition: transform .15s ease;
}
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { height: 60px; width: auto; }

.btn-ghost {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .24); }

.btn-small {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 999px;
    background: var(--button);
    color: #fff;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    color: #fff;
    background:
        radial-gradient(1200px 600px at 85% 10%, rgba(10, 200, 255, .55), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(0, 58, 120, .6), transparent 60%),
        linear-gradient(170deg, var(--blue-500) 0%, #0088ff 55%, var(--blue-200) 100%);
    padding: 150px 0 120px;
    overflow: hidden;
    isolation: isolate;
}

.hero::before {
    /* faint street grid, like a map under the page */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
}

.hero .wrap {
    display: grid;
    gap: 72px;
    justify-items: center;
}
.hero-copy { text-align: center; max-width: 860px; }

.hero h1 {
    font-size: clamp(42px, 6.2vw, 76px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-wrap: balance;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #fff, #d6f3ff);
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    white-space: nowrap;
}

.hero .lead {
    font-size: 20px;
    line-height: 1.5;
    opacity: .92;
    margin: 24px auto 36px;
    max-width: 640px;
    text-wrap: pretty;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 30px;
    font-size: 14px;
    opacity: .85;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 16px; height: 16px; }

/* ---------- Devices: MacBook with an iPhone in front ----------
   Both screens are drawn at a fixed design size ([data-fit] = design width)
   and zoomed by main.js to the size their frame gets. The zoom values here
   are exact for the widest layout and only matter until main.js runs. */

.stage {
    position: relative;
    width: min(1040px, 100%);
}

/* macbook-frame.webp (2000x1299): transparent screen at x 186–1812, y 123–1175 */
.mac {
    position: relative;
    width: 150%;
    aspect-ratio: 2000 / 1299;
    filter: drop-shadow(0 30px 50px rgba(0, 30, 80, .3));
}
.mac-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}
.mac-screen {
    position: absolute;
    left: 9.3%; top: 9.47%;
    width: 81.35%; height: 81.06%;
    border-radius: 1.2% 1.2% 0 0 / 1.9% 1.9% 0 0;
    overflow: hidden;
    background: #fff;
}
.mac-ui {
    position: relative;
    width: 820px;
    height: 531px;
    zoom: .8447;
    color: #202124;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
}

/* The laptop is wider than the stage and gets cropped by the page's right
   edge (only side cards there). The phone stands on the same line as the
   laptop, in front of those cards, clear of the map and popover.
   Width is ~21% of the laptop's, close to a Pro Max next to a 13" MacBook. */
.phone-wrap {
    position: absolute;
    left: 76%; bottom: 0;
    width: 31.5%;
}
.phone { zoom: .518; }

/* The frame image (980x2000) has a transparent screen cutout at
   x 50–929, y 44–1955 with ~125px corners; .screen fills exactly that. */
.phone {
    position: relative;
    width: 345px;
    aspect-ratio: 980 / 2000;
    filter: drop-shadow(0 24px 40px rgba(0, 30, 80, .4));
}
.phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.screen {
    position: absolute;
    left: 5.1%; top: 2.2%;
    width: 89.8%; height: 95.6%;
    border-radius: 14.2% / 6.54%;
    overflow: hidden;
    background: #fff;
    color: #202124;
    font-family: arial, var(--font);
    display: flex;
    flex-direction: column;
}


.statusbar { height: 48px; }

.searchbox {
    margin: 8px 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #dfe1e5;
    box-shadow: 0 1px 6px rgba(32,33,36,.18);
    font-size: 14px;
}
.searchbox svg { width: 16px; height: 16px; flex: none; color: #5f6368; }
.searchbox .q { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { display: inline-block; width: 1px; height: 15px; background: #1a73e8; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tabs {
    display: flex;
    gap: 18px;
    padding: 14px 16px 0;
    font-size: 13px;
    color: #5f6368;
    border-bottom: 1px solid #ebebeb;
    white-space: nowrap;
    overflow: hidden;
}
.tabs span { padding-bottom: 10px; }
.tabs .on { color: #1a73e8; border-bottom: 3px solid #1a73e8; font-weight: 600; }
.tabs .maps-tab {
    color: #1a73e8;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transform-origin: center 40%;
}
/* main.js adds .pulse each time the demo switches provider */
.pulse { animation: pop .6s ease-in-out; }
@keyframes pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.12); }
}

.result {
    padding: 22px 16px 0;
    font-size: 12px;
    color: #4d5156;
}
.result h4 {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 400;
    color: #202124;
}
.stars { color: #fbbc04; letter-spacing: 1px; }

.mapcard {
    position: relative;
    margin: 12px 16px 0;
    border-radius: 14px;
    overflow: hidden;
    height: 190px;
    background: var(--map-land);
}
.screen .mapcard { --map-land: #eef1ea; --map-park: #cfe8c6; --map-water: #aad6f5; --map-road: #ffffff; --map-road-major: #fbd98b; }
.mapcard svg.map { position: absolute; inset: 0; width: 100%; height: 100%; }

.mapcard .marker {
    position: absolute;
    left: 50%; top: 42%;
    width: 64px;
    transform: translate(-50%, -72%);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.25));
    animation: drop 3.6s cubic-bezier(.3,1.6,.5,1) infinite;
}
@keyframes drop {
    0% { transform: translate(-50%, -140%); opacity: 0; }
    12%, 100% { transform: translate(-50%, -72%); opacity: 1; }
}

.overlay-btn {
    position: absolute;
    left: 50%; bottom: 12px;
    transform: translateX(-50%);
    background: var(--button);
    color: #fff;
    font: 500 13px arial, var(--font);
    padding: 9px 16px;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    white-space: nowrap;
    transition: background .2s ease;
}
.overlay-btn::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    border: 2px solid rgba(26,115,232,.55);
    animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
    0% { opacity: .9; transform: scale(.96); }
    70%, 100% { opacity: 0; transform: scale(1.18); }
}

.skeleton { padding: 16px; display: grid; gap: 8px; }
.skeleton i { display: block; height: 9px; border-radius: 5px; background: #eceef1; }
.skeleton i:nth-child(1) { width: 40%; height: 12px; background: #dfe7fb; }
.skeleton i:nth-child(2) { width: 92%; }
.skeleton i:nth-child(3) { width: 76%; }

/* Provider picker: the extension's iOS sheet sliding up over the page.
   Fixed light colours: the mock screen is always light. */
.sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 14px 18px 38px;
    border-radius: 26px 26px 0 0;
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 -6px 24px rgba(0, 20, 60, .14);
    font-family: var(--font);
    font-size: 13px;
}
.sheet-head {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 30px;
}
.sheet-head b { font-size: 15px; font-weight: 650; }
.sheet-done {
    position: absolute; right: -4px; top: 50%;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #0a84ff;
    color: #fff;
}
.sheet-done svg { width: 16px; height: 16px; }
.sheet-icon {
    display: block;
    width: 34px; height: 34px;
    margin: 8px auto 10px;
    border-radius: 8px;
}
.sheet .label {
    padding-top: 10px;
    border-top: 1px solid #eceef1;
    color: #6e6e73; font-size: 12px; font-weight: 550;
    margin-bottom: 7px;
}
.segmented {
    display: flex;
    padding: 2px;
    border-radius: 9px;
    background: #eef0f3;
}
.segmented button {
    flex: 1;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: 0;
    border-radius: 7px;
    padding: 7px 6px;
    background: transparent;
    color: #1d1d1f;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.segmented button[aria-pressed="true"] {
    background: var(--button);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.sheet .segmented button { font-size: 13.5px; padding: 9px 6px; }

/* Large screens: copy on the left, the laptop slides in from the right
   edge with the phone in front of it */
@media (min-width: 961px) {
    .hero .wrap { grid-template-columns: .9fr 1.1fr; justify-items: stretch; align-items: center; gap: 40px; }
    .hero-copy { text-align: left; }
    .hero h1 { font-size: clamp(44px, 4.6vw, 64px); }
    .hero .lead { margin-left: 0; }
    .hero-cta, .hero-meta { justify-content: flex-start; }
    .stage { width: 100%; }
    /* Side by side the hero is shorter than a tall screen; fill it so the
       next section doesn't peek in at the bottom */
    .hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
    /* Push the phone right as far as the window allows (keeping ~18px from
       its edge), up to about 60% across the laptop on wide screens */
    .phone-wrap { left: min(92%, calc(68.5% + max(8px, 50vw - 552px))); }
}

/* ---------- Mac screen: Safari (light) on a Google search ---------- */

.m-menubar {
    display: flex; align-items: center;
    height: 22px; padding: 0 14px;
    font-size: 11.5px;
    background: #dfe1e6;
    color: #1d1d1f;
}
/* stays left of the notch (~45% of the screen): items that don't fit
   wrap onto a hidden second line, so no word is cut in half */
.m-menu {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 13px;
    max-width: 330px; height: 22px; line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
}
.m-menu b { font-weight: 700; }
.m-clock { margin-left: auto; white-space: nowrap; }
.m-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #1d1d1f; }

.m-toolbar {
    display: flex; align-items: center; gap: 10px;
    height: 42px; padding: 0 14px;
    background: #f6f6f7;
    color: #56565b;
}
.m-lights { display: flex; gap: 7px; margin-right: 8px; }
.m-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.m-lights i:nth-child(2) { background: #febc2e; }
.m-lights i:nth-child(3) { background: #28c840; }
.m-btn {
    display: flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 9px;
    border-radius: 14px;
    background: #ebebed;
}
.m-btn svg { width: 15px; height: 15px; }
.m-btn .m-chev { width: 11px; height: 11px; }
.m-dim { opacity: .35; }
/* MapsPin's toolbar button */
.m-ext {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 50%;
    background: #ebebed;
}
.m-ext svg { width: 17px; height: 17px; color: #1d1d1f; }
.m-space { flex: 1; }
/* Like Safari: a fixed-width address field in the middle, not up to the right edge */
.m-address {
    flex: 0 0 340px;
    display: flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 9px;
    border-radius: 14px;
    background: #ebebed;
    color: #1d1d1f;
    font-size: 12px;
}
.m-address svg { width: 11px; height: 11px; color: #8e8e93; flex: none; }
.m-address .m-reader, .m-address .m-reload { width: 13px; height: 13px; color: #6e6e73; }
.m-q { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.m-round { width: 28px; padding: 0; justify-content: center; }
.m-tool { width: 16px; height: 16px; flex: none; color: #56565b; }

.m-tabbar {
    display: flex; gap: 6px;
    height: 28px; padding: 0 10px 4px;
    background: #f6f6f7;
    border-bottom: 1px solid #e2e3e6;
}
.m-tabbar span {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 7px;
    font-size: 11px; color: #1d1d1f;
}
.m-tabbar span i { width: 45%; height: 6px; border-radius: 3px; background: #dcdde0; }
.m-tabbar .on { background: #fff; box-shadow: 0 0 0 1px #e2e3e6; }
/* neutral favicon placeholder, no third-party logo */
.m-tabbar .m-fav { flex: none; width: 13px; height: 13px; border-radius: 3px; background: #c7cbd1; }

.m-page { flex: 1; font-family: arial, var(--font); overflow: hidden; }
.m-head { display: flex; align-items: center; gap: 22px; padding: 14px 24px 0; }
.m-logo { width: 58px; height: 18px; border-radius: 9px; background: #e3e5e8; }
.m-search {
    display: flex; align-items: center; justify-content: space-between;
    width: 420px; height: 34px; padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #dfe1e5;
    box-shadow: 0 1px 6px rgba(32,33,36,.18);
    font-size: 13px;
}
.m-search svg { width: 15px; height: 15px; color: #1a73e8; }
.tabs.m-tabs { padding: 12px 24px 0 104px; gap: 22px; font-size: 12px; }
.tabs.m-tabs span { padding-bottom: 8px; }

.m-kp { padding: 16px 24px 0 104px; color: #4d5156; font-size: 11.5px; }
.m-kp h4 { margin: 0; font-size: 22px; font-weight: 400; color: #202124; }
.m-rating { margin: 3px 0 12px; }
.m-rating .stars { letter-spacing: 0; }
.m-cards { display: flex; gap: 10px; height: 152px; margin-bottom: 18px; }
.m-cards .mapcard {
    flex: none; width: 250px;
    margin: 0; height: auto; border-radius: 12px;
    --map-land: #eef1ea; --map-park: #cfe8c6; --map-water: #aad6f5; --map-road: #ffffff; --map-road-major: #fbd98b;
}
.m-cards .marker { width: 46px; }
.m-cards .overlay-btn { font-size: 11px; padding: 7px 12px; bottom: 10px; }
.m-side {
    flex: 1;
    display: grid; align-content: start; gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #f1f3f4;
}
.m-side i { display: block; height: 7px; border-radius: 4px; background: #dcdfe3; }
.m-side i:nth-child(1) { width: 50%; height: 9px; }
.m-side i:nth-child(2) { width: 85%; }
.m-side i:nth-child(3) { width: 65%; }
.m-hit { display: grid; gap: 6px; width: 58%; }
.m-hit i { display: block; height: 7px; border-radius: 4px; background: #eceef1; }
.m-hit i:nth-child(1) { width: 34%; height: 6px; }
.m-hit i:nth-child(2) { width: 62%; height: 11px; background: #d7e2fb; margin-bottom: 2px; }
.m-hit i:nth-child(3) { width: 96%; }
.m-hit i:nth-child(4) { width: 78%; }

/* ---------- Problem / DMA ---------- */

.dma-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.dma-text h2 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 26px; }
.dma-text p { color: var(--muted); font-size: 18px; margin: 0 0 18px; }
.dma-text p strong { color: var(--fg); }

.quote {
    margin: 28px 0 0;
    padding: 20px 24px;
    border-left: 4px solid var(--blue-400);
    background: var(--bg-soft);
    border-radius: 0 14px 14px 0;
    font-size: 16px;
    color: var(--muted);
}
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; }

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 11px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--blue-300), var(--ok-light));
    border-radius: 2px;
}
.timeline li {
    position: relative;
    padding: 0 0 30px 46px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: "";
    position: absolute;
    left: 4px; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--blue-400);
}
.timeline li.now::before {
    border-color: var(--ok-light);
    background: color-mix(in srgb, var(--ok-light) 22%, var(--bg));
    animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-light) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ok-light) 0%, transparent); }
}
.timeline time { font-size: 13px; font-weight: 700; color: var(--blue-400); text-transform: uppercase; letter-spacing: .06em; }
.timeline li.now time { color: var(--ok); }
.timeline h3 { font-size: 20px; margin: 4px 0 4px; letter-spacing: -0.01em; }
.timeline p { margin: 0; color: var(--muted); font-size: 16px; }

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 72px;
}
.stat {
    padding: 26px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.source-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- Before / After ---------- */

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.panel {
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    font-weight: 650;
    border-bottom: 1px solid var(--border);
}
.panel-head .chip {
    white-space: nowrap;
    flex: none;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.panel.before .chip { background: color-mix(in srgb, var(--pin) 14%, transparent); color: var(--pin); }
.panel.after .chip { background: color-mix(in srgb, var(--blue-400) 16%, transparent); color: var(--blue-400); }

.browser {
    margin: 22px;
    border-radius: 14px;
    background: #fff;
    color: #202124;
    font-family: arial, var(--font);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
}
.browser .bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px;
    background: #f1f3f4;
}
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #d0d4d8; }
.browser .bar .url {
    margin-left: 10px;
    flex: 1;
    background: #fff;
    border-radius: 999px;
    font-size: 11px;
    color: #5f6368;
    padding: 4px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser .tabs { padding-top: 12px; }
.browser .mapcard { margin: 14px 16px 16px; height: 170px; --map-land: #eef1ea; --map-park: #cfe8c6; --map-water: #aad6f5; --map-road: #ffffff; --map-road-major: #fbd98b; }
.browser .mapcard .marker { animation: none; }
.browser .overlay-btn::after { display: none; }

.missing {
    display: inline-block;
    padding: 0 6px;
    border: 1.5px dashed #e0443a;
    border-radius: 6px;
    color: #e0443a;
    font-weight: 600;
}
.nolink {
    position: absolute;
    right: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 6px;
    font: 600 12px var(--font);
    color: #b3261e;
    background: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.nolink svg { width: 14px; height: 14px; }

.panel ul {
    list-style: none;
    margin: 0;
    padding: 0 22px 24px;
    display: grid;
    gap: 10px;
    font-size: 16px;
}
.panel li { display: flex; gap: 10px; align-items: flex-start; }
.panel li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.panel.before li svg { color: var(--pin); }
.panel.after li svg { color: var(--ok); }

/* ---------- Features ---------- */

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.feature {
    padding: 30px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 20px 40px rgba(0, 60, 140, .1); }
/* Icon sits inline before the title; the text spans the full card below */
.feature {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: start;
    align-content: start;
}
.feature .ico { color: var(--fg); display: flex; }
.feature .ico svg { width: 24px; height: 24px; }
.feature h3 { font-size: 20px; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.01em; }
.feature p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 16px; }

/* ---------- Setup ---------- */

.platform-toggle {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    margin-bottom: 36px;
}
.platform-toggle button {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    padding: 10px 22px;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
}
.platform-toggle button { position: relative; z-index: 1; }
/* The highlight under the picked button; main.js sets its position */
.platform-toggle::before {
    content: "";
    position: absolute;
    top: 4px; bottom: 4px; left: 0;
    width: var(--pill-w, 0);
    transform: translateX(var(--pill-x, 0));
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow);
}
.platform-toggle.ready::before { transition: transform .35s cubic-bezier(.3, .7, .2, 1), width .35s cubic-bezier(.3, .7, .2, 1); }
.platform-panels.resizing { overflow: hidden; transition: height .35s cubic-bezier(.3, .7, .2, 1); }
.panel-in { animation: panel-in .4s cubic-bezier(.3, .7, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}
.steps li {
    position: relative;
    padding: 30px 28px 28px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 16px;
    color: var(--muted);
}
.steps li strong { color: var(--fg); }
.steps li::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    margin-bottom: 16px;
    font-weight: 800;
    font-size: 17px;
    color: #fff;
    background: var(--pin);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--pin) 35%, transparent);
}
/* Steps with a cropped iPhone screenshot under the text */
.steps.shots li { display: flex; flex-direction: column; padding-bottom: 22px; }
.steps.shots li p { margin: 0 0 18px; }
.shot {
    position: relative;
    margin: auto 0 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
}
.shot img { display: block; width: 100%; height: auto; }
/* What to tap: a ring in the pin's red */
.shot .tap { position: absolute; }
/* The box marks the target itself; the ring sits around it with room for the
   rounded ends, so it never cuts through the label */
.shot .tap::before {
    content: "";
    position: absolute;
    inset: -7px -14px;
    border: 3px solid var(--pin);
    border-radius: 999px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pin) 22%, transparent);
    animation: tap-pulse 2.4s ease-in-out infinite;
}
.shot .tap.round::before { inset: -7px; }
@keyframes tap-pulse {
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pin) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .shot .tap::before { animation: none; } }

/* Safari's page menu button, drawn inline in the step text */
.ui-menu {
    display: inline-grid;
    place-items: center;
    width: 1.9em; height: 1.4em;
    vertical-align: -0.35em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fg) 9%, transparent);
}
.ui-menu::before {
    content: "";
    width: 1em; height: 1em;
    background: var(--fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.steps-alt { margin-top: 20px; color: var(--muted); font-size: 15px; }
.steps-more { display: inline-block; margin-top: 14px; font-weight: 600; }

/* ---------- Setup guide page ---------- */

.setup-page { padding: 130px 0 90px; }
.setup-help {
    margin-top: 48px;
    max-width: 760px;
    padding: 28px 30px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.setup-help h2 { font-size: 22px; margin-bottom: 14px; }
.setup-help ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.setup-help li { margin-bottom: 10px; }
.setup-help li:last-child { margin-bottom: 0; }
.setup-help strong { color: var(--fg); }
[data-platform-panel][hidden] { display: none; }

/* ---------- FAQ ---------- */

.faq { max-width: 800px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: none;
    width: 12px; height: 12px;
    border-right: 2.5px solid var(--blue-400);
    border-bottom: 2.5px solid var(--blue-400);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin: 0 0 22px; color: var(--muted); font-size: 17px; max-width: 700px; }

/* ---------- CTA ---------- */

.cta {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 72px 56px;
    color: #fff;
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(10, 200, 255, .6), transparent 60%),
        linear-gradient(160deg, var(--blue-700), var(--blue-500) 55%, var(--blue-300));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    box-shadow: var(--shadow-lg);
}
.cta img.appicon {
    width: 120px; height: 120px;
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.cta h2 { font-size: clamp(30px, 3.6vw, 42px); }
.cta p { margin: 12px 0 0; opacity: .9; font-size: 18px; }
.cta .price { font-size: 14px; opacity: .85; margin-top: 12px; text-align: center; }

/* ---------- Footer ---------- */

footer {
    padding: 56px 0 48px;
    color: var(--muted);
    font-size: 14px;
}
footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    justify-content: space-between;
    align-items: center;
}
footer .brand { color: var(--fg); font-size: 17px; }
footer .brand img { width: 28px; height: 28px; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a { color: var(--muted); }
footer .footer-langs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
}
footer .footer-langs a { color: var(--muted); }
footer .footer-langs a[aria-current="page"] { color: var(--fg); font-weight: 600; }
footer .legal { width: 100%; font-size: 12.5px; line-height: 1.6; margin-top: 8px; }

.section-cta { padding-top: 0; }

/* ---------- Document pages (privacy policy) ---------- */

.doc { max-width: 760px; margin: 0 auto; padding: 120px 24px 40px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 10px; }
.doc h2 { font-size: 22px; margin: 44px 0 10px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--fg); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc code { font-size: .9em; background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; }
.doc .updated { font-size: 14px; }
.doc-summary {
    margin: 32px 0 8px;
    padding: 22px 26px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.doc-summary h2 { margin-top: 0; }
.doc-summary p { margin-bottom: 0; }
.page-doc .nav-links { margin-left: auto; }
@media (max-width: 640px) {
    .doc { padding: 100px 16px 24px; }
    .setup-page { padding: 100px 0 56px; }
    .setup-help { padding: 22px 20px; }
}

/* ---------- Language hint ---------- */

.lang-hint {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 6px 6px 6px 18px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow), 0 16px 40px rgba(0, 30, 80, .2);
    font-size: 15px;
    font-weight: 600;
}
.lang-hint[hidden] { display: none; }
.lang-hint a {
    color: var(--blue-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lang-hint button {
    flex: none;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lang-hint button:hover { background: var(--bg-soft); }

/* Cookie consent for Google Analytics. Both answers are equally easy to give. */
.consent {
    position: fixed;
    left: 20px; bottom: 20px;
    z-index: 70;
    width: min(420px, calc(100% - 32px));
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow), 0 16px 40px rgba(0, 30, 80, .22);
    font-size: 15px;
    line-height: 1.45;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 14px; color: var(--muted); }
.consent p a { color: var(--blue-400); }
.consent-buttons { display: flex; gap: 10px; }
.consent .btn { flex: 1; padding: 11px 16px; font-size: 15px; border-radius: 12px; }
.consent-decline { background: var(--bg-soft); color: var(--fg); }
.consent-accept { background: var(--button); color: #fff; }
footer .footer-link {
    padding: 0; border: 0; background: none;
    font: inherit; color: var(--muted); cursor: pointer;
}
footer .footer-link:hover { text-decoration: underline; }

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

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

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .hero { padding: 120px 0 90px; }
    .hero .wrap { gap: 56px; }
    .stage { width: min(640px, 100%); }
    .dma-grid { grid-template-columns: 1fr; gap: 48px; }
    .features { grid-template-columns: 1fr 1fr; }
    .steps.shots { grid-template-columns: 1fr 1fr; }
    .compare { grid-template-columns: 1fr; }
    .cta { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 56px 28px; }
    .nav-links { display: none; }
    .lang { margin-left: auto; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding: 0 16px; }
    .section { padding: 80px 0; }
    .section-head { margin-bottom: 40px; }
    .section-head p { font-size: 17px; }
    .hero .lead { font-size: 18px; }
    .steps, .steps.shots, .stats { grid-template-columns: 1fr; }
    /* Two compact columns so the six features don't become a long scroll */
    .features { grid-template-columns: 1fr 1fr; gap: 12px; }
    .feature { padding: 18px 16px; }
    /* Cards are too narrow here for icon + title in one row: stack them */
    .feature { grid-template-columns: 1fr; }
    .feature .ico { margin-bottom: 10px; }
    .feature .ico svg { width: 22px; height: 22px; }
    .feature h3 { font-size: 16px; line-height: 1.25; }
    .feature p { font-size: 14px; line-height: 1.45; }
    .stats { margin-top: 48px; }
    .hero { padding-bottom: 56px; }
    .phone-wrap { left: auto; right: -16px; }
    .browser { margin: 14px; }
    .panel-head { padding: 14px 16px; }
    .panel ul { padding: 0 16px 20px; }
    .nav .btn-small { display: none !important; }
    .cta img.appicon { width: 96px; height: 96px; border-radius: 22px; }
    .lang-hint { font-size: 14px; bottom: 14px; }
    .consent { left: 16px; bottom: 14px; }
    .store-badge img { height: 54px; }
}