/* wanderwalks.app: the app's own colours (WanderKit Colors.swift) and Nunito, on the
   App Store frames' blue and navy with their dotted trail (MARKETING §4). Plain CSS,
   no scripts, no build step. */
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;
  --navy: #234D84;        /* primaryDefault: Home */
  --blue: #2C61A5;        /* primaryLight: the bars, the bands */
  --band: #28589A;        /* the darker bands: between navy and blue, gentler than navy */
  --navy-deep: #1D4275;   /* navyDeep: cards on the blue */
  --green: #A3CD29;       /* accentDefault */
  --green-light: #B9DD52;
  --paper: #FCFEFC;       /* secondaryDefault */
  --text-secondary: rgba(252, 254, 252, 0.8);
  --hairline: rgba(252, 254, 252, 0.14);
}

* { box-sizing: border-box; }
html { background: var(--band); overflow-x: clip; }
/* No background on body: it would paint over the bands' colours and the trail, which
   sit behind the content; the page's colour is on html. */
body {
  position: relative;
  margin: 0;
  color: var(--paper);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

.page { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0; position: relative; z-index: 1;
}
.wordmark { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 26px; color: var(--paper); letter-spacing: -0.01em; }
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 34px; height: 34px; }
header.top nav { display: flex; align-items: center; }
nav a { color: var(--text-secondary); margin-left: 20px; font-size: 16px; font-weight: 700; }
.button {
  display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px;
  background: var(--green); color: var(--paper); font-weight: 800;
  box-shadow: 0 4px 0 #6E9428; /* the app's buttons sit on a shelf */
}
nav a.button { color: var(--paper); margin-left: 24px; }
.button:hover { background: var(--green-light); text-decoration: none; }

h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }

/* Bands: each section runs edge to edge, the darker blue and the blue in turn, while the
   content stays in the page's column. Their colours sit at the back (z-index -2). */
.band { position: relative; padding: 88px 0; }
.band::before {
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw);
  background: var(--band);
}
.band:nth-of-type(even)::before { background: var(--blue); }

/* The dotted trail: one layer the whole height of the page, above the bands' colours and
   below everything else, so it runs on from one section into the next. Its tile's
   meanders repeat seamlessly top to bottom (assets/trail.svg). */
.trail {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: url("/assets/trail.svg") top center / 1600px auto repeat-y;
}
.band > :last-child { margin-bottom: 0; }
.band.hero { padding: 24px 0 88px; }
/* The hero's band reaches up behind the header. */
.band.hero::before { top: -120px; }

/* The hero: words on the left, the iPhone with the Watch in front on the right. */
.hero { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6vw, 72px); margin: 0 0 20px; }
.hero h1 span { color: var(--green); }
.lede { color: var(--text-secondary); font-size: 21px; max-width: 540px; margin: 0; }
.download { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
/* Apple's badge ships at 40pt tall in its own SVG; 50px keeps its clear space. */
.store-badge { display: inline-flex; }
.store-badge img { height: 50px; width: auto; }
.note { color: var(--text-secondary); font-size: 17px; }
.devices { position: relative; max-width: 360px; justify-self: center; }
.devices .phone { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.devices .watch { position: absolute; width: 52%; right: -22%; bottom: 8%; height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4)); }

/* A header and its line, as the App Store frames write them. */
/* The header: its icon tile left of the word, as the App Store frames set it, the tile
   in the other band's blue; then the line under it, its key words in green capitals. */
h2 .title { display: flex; align-items: center; gap: 16px; }
h2 .line { display: block; color: var(--paper); font-weight: 700; font-size: 0.55em; margin-top: 10px; letter-spacing: 0; }
h2 .key { color: var(--green); font-weight: 800; text-transform: uppercase; }
.tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue); }
.band:nth-of-type(even) .tile { background: var(--navy); }
.tile img { width: 28px; height: 28px; }
.watch h2 .title { justify-content: center; }

.points { list-style: none; padding: 0; margin: 22px 0 0; }
.points li, .plan li, .trust li { position: relative; padding-left: 26px; margin: 10px 0; color: var(--text-secondary); font-size: 17px; }
/* Every bullet is a dot of the trail. */
.points li::before, .plan li::before, .trust li::before {
  content: ""; position: absolute; left: 4px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
}

/* One band per screen, the screenshot alternating sides. */
.feature { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 72px; align-items: center; }
.feature:nth-of-type(odd) { grid-template-columns: 1fr minmax(0, 360px); }
.feature:nth-of-type(odd) > img { order: 2; }
.feature > img { width: 100%; height: auto; justify-self: center; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.feature h2, .watch h2, .pricing h2, .trust h2 { font-size: clamp(34px, 4.4vw, 50px); margin: 0 0 18px; }
.feature p { color: var(--text-secondary); font-size: 19px; max-width: 540px; margin: 0; }
.feature-text { max-width: 560px; }

/* The Watch: three screens in a row under a centred heading. */
.watch, .pricing { text-align: center; }
.watch-lede, .pricing-lede { color: var(--text-secondary); font-size: 19px; max-width: 660px; margin: 0 auto; }
.watch-shots { display: flex; justify-content: center; align-items: flex-end; gap: 28px; margin: 44px 0 12px; }
.watch-shots figure { margin: 0; flex: 0 1 250px; }
.watch-shots img { width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35)); }
.watch-shots figcaption { color: var(--paper); font-weight: 800; margin-top: 10px; }
.watch-points { display: inline-block; text-align: left; max-width: 660px; }

/* Free and Pro, side by side, beside the paywall's screen. */
.pricing-body { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 48px; align-items: center; margin-top: 44px; text-align: left; }
.pricing-body > img { width: 100%; height: auto; justify-self: center; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan { background: var(--navy-deep); border: 1px solid var(--hairline); border-radius: 22px; padding: 26px 28px; }
.plan.pro { border-color: rgba(163, 205, 41, 0.6); }
.plan h3 { margin: 0 0 4px; font-size: 24px; }
.plan.pro h3 { color: var(--green); }
.plan .price { color: var(--paper); font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { font-size: 16px; margin: 9px 0; line-height: 1.45; padding-left: 30px; }
/* The plans' points are ticks: the app's green with a navy check. */
.plan li::before { left: 0; top: 0.15em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23A3CD29'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6' fill='none' stroke='%231D4275' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pricing .small { color: var(--text-secondary); font-size: 15px; margin: 18px 0 0; }

.trust-card { max-width: 780px; margin: 0 auto; background: var(--navy-deep); border: 1px solid var(--hairline); border-radius: 24px; padding: 32px 36px; }
.trust h2 { margin-top: 0; text-align: center; }
.trust ul { list-style: none; padding: 0; margin: 0; }
.trust li strong { color: var(--paper); }

/* The policy, terms and support pages. */
.doc { max-width: 780px; margin: 0 auto; }
.doc .band { padding: 40px 0; }
.doc .band:first-child { padding-top: 16px; }
.doc h1 { font-size: 48px; margin: 0 0 6px; }
.doc .updated { color: var(--text-secondary); margin-top: 0; }
.doc h2 { font-size: 28px; margin: 0 0 10px; color: var(--green); }
.doc p, .doc li { color: var(--text-secondary); }
.doc strong { color: var(--paper); }
.doc ul { padding-left: 22px; }
.short { background: var(--navy-deep); border: 1px solid var(--hairline); border-radius: 20px; padding: 8px 24px; margin-top: 24px; }

footer { position: relative; padding: 28px 0 48px; color: var(--text-secondary); font-size: 15px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
footer::before { content: ""; position: absolute; top: 0; height: 1px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--hairline); }
footer nav a { margin-left: 0; margin-right: 18px; }

@media (max-width: 860px) {
  .band { padding: 60px 0; }
  /* On a phone the words split around the picture: the heading and its text first,
     then the screen, then the rest. The text blocks dissolve into the grid so each
     piece can take its own place. */
  .hero, .feature, .feature:nth-of-type(odd) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero-text, .feature-text { display: contents; }
  .hero, .feature { text-align: center; }
  h2 .title { justify-content: center; }
  .hero h1, .feature h2 { order: 1; margin: 0; }
  .devices { order: 2; max-width: 280px; }
  .devices .watch { right: -18%; }
  .lede { order: 3; margin: 0 auto; }
  .download { order: 4; justify-content: center; margin-top: 0; }
  .feature-text > p { order: 2; margin: 0 auto; }
  .feature > img, .feature:nth-of-type(odd) > img { order: 3; max-width: 300px; }
  .feature .points { order: 4; margin: 0 auto; max-width: 520px; text-align: left; }
  .pricing-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pricing-body > img { max-width: 280px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .watch-shots { flex-direction: column; align-items: center; }
  .watch-shots figure { flex-basis: auto; width: min(250px, 80%); }
  header.top nav a:not(.button) { display: none; }
}