/* LeaveBy: a clear morning map. The app's primary blue (#1565C0), secondary teal (#00897B), sky background (#F7F9FC) and
   Plus Jakarta Sans, from its res/values/colors.xml and res/font. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus_jakarta_sans_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus_jakarta_sans_bold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --blue: #1565C0; --blue-deep: #0D3F7A; --sky: #BBDEFB; --teal: #00897B; --amber: #FFB020;
  --bg: #F7F9FC; --bg2: #FFFFFF; --fg: #0D1B2E; --fg2: #46566B; --fg3: #7A889B; --line: rgba(13, 27, 46, .1); --card: #FFFFFF;
  --accent: #1565C0; --accent-ink: #FFFFFF; --accent2: #00897B;
  --display: "Plus Jakarta Sans", system-ui, sans-serif; --display-weight: 800; --body: "Plus Jakarta Sans", system-ui, sans-serif; --radius: 24px;
}
body { background: linear-gradient(180deg, #EAF3FD 0, var(--bg) 900px); }
h1, h2, h3 { letter-spacing: -.035em; }
.hl { color: var(--blue); }
.title { font-size: clamp(64px, 9.4vw, 148px); }
.tagline { color: var(--teal); font-weight: 700; letter-spacing: -.02em; }
.eyebrow::before { background: var(--teal); }
.btn { box-shadow: 0 10px 24px -10px rgba(21, 101, 192, .6); }
.btn.ghost { background: #fff; box-shadow: none; }
.hero-shade { background: linear-gradient(90deg, rgba(247, 249, 252, .97) 0%, rgba(247, 249, 252, .6) 42%, transparent 66%), linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
@media (max-width: 900px) { .hero-shade { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(247, 249, 252, .92) 56%, var(--bg) 100%); } }

/* the leave-by clock beside the scene */
.clock { margin-top: 28px; display: inline-grid; grid-template-columns: auto auto; column-gap: 14px; align-items: baseline; padding: 14px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(13, 63, 122, .5); }
.c-k { grid-column: 1 / -1; font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; }
.clock b { font: 800 40px/1 var(--display); color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.c-in { font: 700 15px/1 var(--body); color: var(--teal); }
html:not(.js) .clock { display: none; }

.feat { box-shadow: 0 1px 0 rgba(13, 27, 46, .04), 0 20px 40px -28px rgba(13, 63, 122, .45); border-color: transparent; }
.feat:hover { border-color: rgba(21, 101, 192, .25); }
.feat-n { padding: 7px 12px; border-radius: 999px; background: #E3F0FD; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; }

/* the estimate labels */
.mode-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -28px rgba(13, 63, 122, .45); }
.mode > * { transform: translateZ(22px); }
.tag { display: inline-block; padding: 7px 12px; border-radius: 10px; font: 700 13px/1 var(--body); margin-bottom: 20px; }
.t-smart { background: #E0F2EF; color: var(--teal); } .t-live { background: #E3F0FD; color: var(--blue); } .t-cache { background: #F1F3F7; color: #46566B; } .t-off { background: #FFF2DB; color: #8A5300; }
.mode h3 { font-size: 26px; margin-bottom: 8px; }
.mode p { color: var(--fg2); font-size: 16px; }
@media (max-width: 1000px) { .mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mode-row { grid-template-columns: 1fr; } }

.step b { background: #fff; border: 0; color: #fff; background: var(--blue); box-shadow: 0 0 0 8px #E3F0FD; }
.steps::before { background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 18px); opacity: .5; }
@media (max-width: 760px) { .steps::before { background: repeating-linear-gradient(180deg, var(--blue) 0 10px, transparent 10px 18px); } }
.promise { background: var(--blue); }
.early { background: linear-gradient(135deg, #fff, #EEF6FE); border: 0; box-shadow: 0 30px 60px -36px rgba(13, 63, 122, .5); }
.fam { background: #fff; }