@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("assets/fonts/HankenGrotesk_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("assets/fonts/HankenGrotesk_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-display: swap; src: url("assets/fonts/HankenGrotesk_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 800; font-display: swap; src: url("assets/fonts/HankenGrotesk_800ExtraBold.ttf") format("truetype"); }

:root {
  --blue: #1C86D6; --blue-dark: #145F94; --blue-light: #6FB8EA; --ocean: #124D73; --mist: #E4F1FB; --border: #C8E1F2;
  --ink: #1B2A36; --slate: #5E7384; --white: #FFFFFF; --green: #2E9E5B;
  --shadow: 0 10px 30px rgba(18, 77, 115, 0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--white); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }

/* The app's own look: a blue wash fading to white from a top corner, with dotted travel trails drawn over it (js draws the trail). */
.page { position: relative; overflow-x: clip; }
.page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; background: linear-gradient(200deg, rgba(28,134,214,.34) 0%, rgba(28,134,214,0) 70%); pointer-events: none; z-index: 0; }
.wash { position: absolute; left: 0; right: 0; height: 900px; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 55%, transparent 100%); }
.wash.a { background: linear-gradient(160deg, rgba(28,134,214,.26) 0%, rgba(28,134,214,0) 65%); }
.wash.b { background: linear-gradient(200deg, rgba(28,134,214,.26) 0%, rgba(28,134,214,0) 65%); }
#trail { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }

/* Header */
header.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: rgba(255,255,255,.72); border-bottom: 1px solid rgba(200,225,242,.7); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none; color: var(--ocean); white-space: nowrap; min-width: 0; }
.brand .bt { font-weight: 600; color: var(--slate); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; padding: 12px 20px; font: 700 15px/1 "Hanken Grotesk", sans-serif; text-decoration: none; border: 0; cursor: pointer; }
.btn.primary { color: #fff; background: linear-gradient(225deg, var(--blue) 0%, var(--blue-light) 140%); box-shadow: 0 8px 20px rgba(28,134,214,.35); }
.btn.store { background: var(--ocean); color: #fff; padding: 12px 22px 12px 18px; text-align: left; align-items: center; }
.btn.store > span:not(.tag) { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.btn.store small { display: block; font-weight: 600; font-size: 11px; opacity: .8; letter-spacing: .02em; }
.btn.store b { display: block; font-size: 17px; line-height: 1.1; }
.btn.store svg { width: 26px; height: 26px; flex: none; }
.btn.store svg { color: #fff; }
.btn.store.soon { background: #fff; color: var(--ocean); border: 1.5px dashed var(--blue); box-shadow: none; cursor: default; }
.btn.store.soon svg { color: var(--ocean); }
.btn.store.soon .tag { margin-left: 4px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; background: var(--mist); color: var(--blue-dark); border-radius: 999px; padding: 4px 9px; }

/* Hero */
.hero { padding: 64px 0 40px; position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; }
.eyebrow { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); background: rgba(255,255,255,.7); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; margin-bottom: 18px; }
h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
h1 em { font-style: normal; color: var(--blue); }
.lead { font-size: clamp(17px, 1.7vw, 20px); color: var(--slate); max-width: 34em; margin-top: 18px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.free { margin-top: 14px; font-size: 14px; color: var(--slate); }
.hero-art { position: relative; height: 560px; }
.hero-art .phone { position: absolute; }
.hero-art .p1 { left: 0; top: 14px; --s: 10.4px; transform: rotate(-4deg); }
.hero-art .p2 { right: -2%; top: 100px; --s: 9.6px; transform: rotate(5deg); }

/* Phones: all sizes in em, so one --s scales a whole phone */
.phone { --s: 10px; font-size: var(--s); width: 26em; height: 54em; border-radius: 4em; background: #0F2A3A; padding: .45em; box-shadow: 0 30px 60px rgba(18,77,115,.30), 0 6px 14px rgba(18,77,115,.18); position: relative; flex: none; }
.phone::after { content: ""; position: absolute; top: 1.3em; left: 50%; transform: translateX(-50%); width: 7em; height: 1.7em; background: #0F2A3A; border-radius: 1em; z-index: 5; }
.screen { width: 100%; height: 100%; border-radius: 3.55em; overflow: hidden; position: relative; background: linear-gradient(200deg, #CFE5F7 0%, #F3F9FE 38%, #fff 70%); display: flex; flex-direction: column; color: var(--ink); }
.status { display: flex; justify-content: space-between; padding: 1.5em 2.2em 0; font-weight: 700; font-size: 1.15em; height: 3.4em; flex: none; }
.status i { font-style: normal; letter-spacing: .1em; font-size: .8em; opacity: .8; }
.body { flex: 1; padding: 0 1.4em; overflow: hidden; position: relative; }
.tabs { display: flex; justify-content: space-around; border-top: 1px solid #DCE9F3; background: rgba(255,255,255,.92); padding: .8em 0 1.4em; flex: none; }
.tab { display: flex; flex-direction: column; align-items: center; gap: .25em; font-size: .95em; color: #6B7F8E; font-weight: 600; }
.tab svg { width: 2.1em; height: 2.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--blue); }
.fab { position: absolute; right: 1.3em; bottom: 7em; width: 3.6em; height: 3.6em; border-radius: 50%; background: linear-gradient(225deg, var(--blue), var(--blue-light)); box-shadow: 0 .35em .9em rgba(28,134,214,.4); display: grid; place-items: center; z-index: 3; }
.fab span { width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.fab img { width: 1.9em; height: 1.9em; }
.h { font-weight: 800; font-size: 1.9em; letter-spacing: -.02em; margin: .5em 0 .15em; }
.sub { font-size: 1.05em; color: var(--slate); }
.card { background: #fff; border-radius: 1.6em; padding: 1.1em 1.2em; box-shadow: 0 .5em 1.4em rgba(18,77,115,.10); margin-top: 1em; position: relative; }
.cap { font-size: 1em; color: var(--slate); font-weight: 600; }
.t { font-weight: 800; font-size: 1.35em; letter-spacing: -.01em; }
.pill { display: inline-flex; align-items: center; gap: .4em; font-size: .95em; font-weight: 700; color: var(--ocean); background: var(--mist); border-radius: 999px; padding: .35em .9em; }
.pill.solid { background: linear-gradient(225deg, var(--blue), var(--blue-light)); color: #fff; }
.btnm { display: block; text-align: center; font-weight: 800; font-size: 1.2em; color: #fff; background: linear-gradient(225deg, var(--blue), var(--blue-light)); border-radius: 1.3em; padding: .9em 1em; margin-top: .9em; }
.line { position: absolute; left: 2.35em; top: 0; bottom: 0; width: .22em; background: #CBE2F3; border-radius: 1em; }
.tl { position: relative; padding-left: 2.4em; }
.tl .dot { position: absolute; left: .6em; top: 1.4em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--green); border: .25em solid #fff; box-shadow: 0 0 0 .1em #CBE2F3; z-index: 2; }
.tl .dot.next { background: var(--blue); }
.hero-img { height: 17em; margin: 0 -1.4em; border-radius: 0 0 2.2em 2.2em; position: relative; overflow: hidden; background: linear-gradient(180deg, #7FB7E3 0%, #CFE6F6 55%, #F5E3D0 100%); }
.hero-img svg.sk { position: absolute; bottom: 0; left: 0; width: 100%; }
.hero-img .ttl { position: absolute; left: 1.6em; bottom: 1.4em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero-img .ttl b { display: block; font-size: 1.9em; letter-spacing: -.02em; }
.hero-img .ttl span { font-size: 1.05em; }
.bubble { max-width: 82%; padding: .8em 1.1em; border-radius: 1.5em; font-size: 1.1em; margin-top: .8em; line-height: 1.4; box-shadow: 0 .3em .9em rgba(18,77,115,.08); }
.bubble.me { margin-left: auto; background: var(--ocean); color: #fff; border-bottom-right-radius: .4em; }
.bubble.ai { background: #fff; border-bottom-left-radius: .4em; }
.bubble small { display: block; margin-top: .3em; font-size: .8em; opacity: .65; }
.chathead { display: flex; align-items: center; gap: .8em; padding: .8em 1.2em; background: #fff; border-bottom: 1px solid #DCE9F3; margin: 0 -1.4em; }
.avatar { width: 3em; height: 3em; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; flex: none; }
.avatar svg { width: 2em; height: 2em; stroke: var(--blue); fill: none; stroke-width: 1.8; }
.avatar img { width: 2em; height: 2em; }
.avatar.c1 { background: #FAD6C8; border: 0; font-weight: 800; font-size: 1em; color: #8A3B1E; }
.avatar.c2 { background: #CDE8D6; border: 0; font-weight: 800; color: #1F6B3E; }
.avatar.c3 { background: #E3D9F7; border: 0; font-weight: 800; color: #51379B; }
.inputbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .7em; padding: .8em 1.2em; background: #fff; border-top: 1px solid #DCE9F3; align-items: center; }
.inputbar .field { flex: 1; background: var(--mist); border-radius: 2em; padding: .8em 1.2em; color: #7C93A4; font-size: 1.05em; }
.send { width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--blue); display: grid; place-items: center; }
.send svg { width: 1.6em; height: 1.6em; fill: #fff; }
.row2 { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.chk { width: 1.7em; height: 1.7em; border-radius: .45em; border: .15em solid var(--blue); display: grid; place-items: center; flex: none; }
.chk.on { background: var(--blue); }
.chk.on::after { content: ""; width: .5em; height: .9em; border: solid #fff; border-width: 0 .2em .2em 0; transform: rotate(45deg) translate(-.05em,-.1em); }
.link { display: flex; align-items: center; justify-content: space-between; gap: .6em; background: var(--mist); border-radius: 1em; padding: .65em .9em; margin-top: .55em; font-size: 1em; }
.link b { font-weight: 800; }
.link span { color: var(--slate); font-size: .9em; }
.link em { font-style: normal; font-weight: 800; color: var(--ocean); }
.map { height: 22em; margin: 0 -1.4em; position: relative; background: #DDEBF6; border-radius: 0 0 2.2em 2.2em; overflow: hidden; }
.map svg { width: 100%; height: 100%; display: block; }
.chip { position: absolute; top: 1em; right: 1em; background: rgba(255,255,255,.92); border-radius: 999px; padding: .4em 1em; font-weight: 700; font-size: .95em; }
.photo { height: 17em; border-radius: 1.3em; position: relative; overflow: hidden; }
.photo.p-a { background: linear-gradient(180deg, #F6C58B 0%, #E88B6B 45%, #6B4E8A 100%); }
.photo.p-b { background: linear-gradient(180deg, #8EC9EE 0%, #CBE7F5 60%, #E9D8B7 100%); }
.photo svg { position: absolute; bottom: 0; left: 0; width: 100%; }
.dots { display: flex; justify-content: center; gap: .4em; margin-top: .7em; }
.dots i { width: .6em; height: .6em; border-radius: 50%; background: #C8D9E6; }
.dots i.on { background: var(--ocean); }
.acts { display: flex; gap: 1.4em; margin-top: .7em; align-items: center; }
.acts svg { width: 2.2em; height: 2.2em; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acts svg.liked { fill: var(--blue); stroke: var(--blue); }
.upl { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: .8em; }
.upl div { background: var(--mist); border-radius: 1em; padding: .8em .5em; text-align: center; font-weight: 700; font-size: 1em; color: var(--ocean); }
.cover { height: 11em; border-radius: 1.5em; position: relative; overflow: hidden; background: linear-gradient(160deg, #F3B7A0 0%, #D9798B 50%, #5A5E9C 100%); }
.cover b { position: absolute; left: 1em; bottom: .8em; color: #fff; font-size: 1.6em; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.cover svg { position: absolute; right: 0; bottom: 0; width: 70%; }

/* Features: screenshot beside its description, but never in a straight line: alternating sides, tilts, offsets, a second phone overlapping */
.feature { position: relative; padding: 70px 0; }
.feature .wrap { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 0 24px; }
.f-art { position: relative; display: flex; justify-content: center; }
.f-copy { position: relative; z-index: 2; }
.f-copy .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border); color: var(--blue-dark); font-weight: 800; font-size: 15px; margin-bottom: 14px; box-shadow: var(--shadow); }
.f-copy h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
.f-copy p { font-size: 18px; color: var(--slate); margin-top: 14px; max-width: 30em; }
.f-copy ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.f-copy li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.f-copy li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C86D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.tag { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--blue-dark); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.f1 .f-art { grid-column: 1 / 6; grid-row: 1; } .f1 .f-copy { grid-column: 7 / 13; grid-row: 1; margin-top: 90px; }
.f1 .phone { transform: rotate(-3deg); --s: 10.5px; }
.f2 .f-copy { grid-column: 1 / 7; grid-row: 1; margin-bottom: 110px; } .f2 .f-art { grid-column: 8 / 13; grid-row: 1; margin-top: 70px; }
.f2 .phone { transform: rotate(3.5deg); --s: 10.5px; }
.f3 .f-art { grid-column: 2 / 7; grid-row: 1; margin-top: 40px; } .f3 .f-copy { grid-column: 8 / 13; grid-row: 1; margin-top: -60px; }
.f3 .phone { transform: rotate(-2deg); --s: 10.5px; }
.f3 .f-art .phone.back { position: absolute; left: -8%; top: 70px; --s: 8.4px; transform: rotate(-9deg); opacity: .96; z-index: 0; }
.f3 .f-art .phone.front { position: relative; z-index: 1; }
.f4 .f-copy { grid-column: 1 / 7; grid-row: 1; margin-top: 60px; } .f4 .f-art { grid-column: 7 / 12; grid-row: 1; margin-top: -30px; }
.f4 .phone { transform: rotate(2.5deg); --s: 10.5px; }
.f5 .f-art { grid-column: 1 / 6; grid-row: 1; margin-top: -20px; } .f5 .f-copy { grid-column: 7 / 13; grid-row: 1; margin-top: 120px; }
.f5 .phone { transform: rotate(-3.5deg); --s: 10.5px; }
.f6 .f-copy { grid-column: 2 / 7; grid-row: 1; margin-top: -40px; } .f6 .f-art { grid-column: 8 / 13; grid-row: 1; margin-top: 60px; }
.f6 .phone { transform: rotate(3deg); --s: 10.5px; }
.f7 .f-art { grid-column: 2 / 7; grid-row: 1; } .f7 .f-copy { grid-column: 8 / 13; grid-row: 1; margin-top: 80px; }
.f7 .phone { transform: rotate(-2.5deg); --s: 10.5px; }
.f7 .f-art .phone.back { position: absolute; left: -8%; top: 90px; --s: 8.4px; transform: rotate(-9deg); z-index: 0; }
.f7 .f-art .phone.front { position: relative; z-index: 1; }

.trust { padding: 40px 0 10px; }
.trust .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust .item { background: rgba(255,255,255,.85); border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.trust .item b { display: block; font-size: 18px; margin-bottom: 4px; }
.trust .item span { color: var(--slate); font-size: 15px; }
.final { padding: 70px 0 90px; text-align: center; position: relative; }
.final h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.03em; font-weight: 800; line-height: 1.08; }
.final p { color: var(--slate); font-size: 18px; margin-top: 12px; }
.final .cta { justify-content: center; }
footer { position: relative; z-index: 1; border-top: 1px solid rgba(200,225,242,.8); background: rgba(255,255,255,.7); padding: 28px 0 40px; font-size: 14px; color: var(--slate); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { text-decoration: none; font-weight: 600; } footer a:hover { color: var(--blue-dark); text-decoration: underline; }
.note { font-size: 12px; color: var(--slate); text-align: center; margin-top: 10px; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; } .hero-art { height: 520px; margin-top: 10px; }
  .hero-art .p1 { left: 2%; } .hero-art .p2 { right: -2%; top: 110px; }
  .feature { padding: 36px 0; }
  .feature .wrap { grid-template-columns: 1fr; gap: 26px; }
  .f1 .f-art, .f2 .f-art, .f3 .f-art, .f4 .f-art, .f5 .f-art, .f6 .f-art, .f7 .f-art { grid-column: 1; grid-row: 1; margin-top: 0; }
  .f1 .f-copy, .f2 .f-copy, .f3 .f-copy, .f4 .f-copy, .f5 .f-copy, .f6 .f-copy, .f7 .f-copy { grid-column: 1; grid-row: 2; margin: 0; }
  .f2 .f-art, .f4 .f-art, .f6 .f-art { justify-content: flex-end; padding-right: 6%; } .f1 .f-art, .f3 .f-art, .f5 .f-art, .f7 .f-art { justify-content: flex-start; padding-left: 6%; }
  .f3 .f-art .phone.back, .f7 .f-art .phone.back { display: none; }
  .trust .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero { padding-top: 36px; } .hero-art { height: 470px; }
  .hero-art .p1 { --s: 9.4px; } .hero-art .p2 { --s: 8.2px; top: 120px; }
  .phone { --s: 9px !important; } .f1 .phone, .f2 .phone, .f3 .phone, .f4 .phone, .f5 .phone, .f6 .phone, .f7 .phone { --s: 9px; }
  header.top .btn { padding: 10px 14px; font-size: 14px; }
  .brand { font-size: 15px; gap: 8px; } .brand img { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: no-preference) { .btn.primary:hover { transform: translateY(-1px); } .btn { transition: transform .15s; } }

/* The first-run "Get started" screen (blue, like the app's welcome) */
.screen.gs { background: linear-gradient(200deg, #3E9BE0 0%, #7BBDEB 45%, #A9D3F2 100%); color: #fff; }
.gs-top { padding: 2.2em 2em 0; flex: 1; }
.gs-logo { width: 3.8em; height: 3.8em; border-radius: 1.2em; background: #fff; display: grid; place-items: center; box-shadow: 0 .4em 1.2em rgba(18,77,115,.25); }
.gs-logo img { width: 2.6em; height: 2.6em; }
.gs-line { margin-top: 1em; font-weight: 600; font-size: 1.25em; }
.gs-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; }
.gschip { background: rgba(255,255,255,.55); color: var(--ocean); font-weight: 700; font-size: .95em; padding: .4em .9em; border-radius: 999px; }
.gs-sheet { background: #fff; color: var(--ink); border-radius: 2.2em 2.2em 0 0; padding: 1.6em 1.6em 2em; }
.gs-emoji { font-size: 1.7em; margin-bottom: .3em; }

/* The Relive trip page (reading pane): cover, then the Itinerary / Memories folder tabs */
.hero-img .bk { position: absolute; left: 1em; top: 1em; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(255,255,255,.35); display: grid; place-items: center; color: #fff; font-size: 1.6em; line-height: 1; }
.ftabs { display: flex; gap: .3em; margin-top: .9em; }
.ftabs .ft { flex: 1; text-align: center; font-weight: 700; font-size: 1.1em; padding: .6em 0; border-radius: 1.1em 1.1em 0 0; background: #DCEAF5; color: #6B7F8E; }
.ftabs .ft.on { background: #fff; color: var(--ocean); box-shadow: 0 -.2em .8em rgba(18,77,115,.08); }

/* Travel home: the world map card (dotted texture, continents, visited / upcoming / home markers) and the trip tile */
.tmap { margin: .7em -1.4em 0; background: #fff; position: relative; overflow: hidden; background-image: radial-gradient(rgba(28,134,214,.22) 1px, transparent 1.4px); background-size: 7px 7px; padding-bottom: .5em; }
.tmap-t { text-align: center; font-weight: 800; font-size: 1.3em; padding: .8em 1em .2em; }
.wm { position: relative; width: 100%; aspect-ratio: 2000 / 857; }
.wm > img { width: 100%; height: 100%; display: block; }
.mk { position: absolute; width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 .45em rgba(46,158,91,.28); background: var(--green); }
.mk.up { background: #E8A33A; box-shadow: 0 0 0 .45em rgba(232,163,58,.3); }
.mk.home { background: var(--ocean); box-shadow: 0 0 0 .45em rgba(18,77,115,.25); }
.mk img { width: 55%; height: 55%; } .mk svg { width: 60%; height: 60%; }
.tmap-f { display: flex; align-items: center; gap: .6em; padding: 0 1.2em; font-weight: 600; color: var(--slate); font-size: .95em; }
.tmap-f i { flex: 1; height: 1px; background: var(--border); } .tmap-f img { width: 1.6em; height: 1.6em; }
.tc { text-align: center; font-size: .9em; color: var(--slate); font-weight: 600; } .tc i { display: block; width: 4.4em; height: 4.4em; border-radius: 50%; border: .22em solid var(--blue); margin-bottom: .2em; }

.screen.shot { background: #0F2A3A; display: block; position: relative; }
.screen.shot img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; background: #E4F1FB; }