:root {
  --forest: #102f2a;
  --forest-2: #0c231f;
  --moss: #2f6755;
  --lime: #cdeb58;
  --orange: #ff5a36;
  --paper: #f3f0e6;
  --cream: #fbf9f2;
  --ink: #12201d;
  --muted: #727a73;
  --line: #d7d8cf;
}

.brand-logo { width: 39px; height: 39px; border-radius: 11px; object-fit: cover; box-shadow: 0 4px 14px #0c231f2e; }
.footer-inner .brand-logo { box-shadow: 0 4px 14px #0005; }

.locale-switch {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 800 11px/1 monospace;
  letter-spacing: .08em;
}

.product-ribbon { background: var(--orange); color: var(--forest-2); }
.ribbon-grid { min-height: 118px; display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; gap: 28px; align-items: center; }
.ribbon-grid > span { font: 800 28px Manrope, sans-serif; opacity: .65; }
.ribbon-grid small,.ribbon-grid strong { display: block; }
.ribbon-grid small { font: 800 10px monospace; letter-spacing: .13em; margin-bottom: 5px; }
.ribbon-grid strong { font: 800 17px Manrope, sans-serif; }
.ribbon-result { padding: 19px 23px; border-radius: 14px; background: var(--forest-2); color: white; }
.ribbon-result small { color: var(--lime); }

.anytime { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.anytime-map { position: relative; min-height: 430px; overflow: hidden; padding: 40px; border-radius: 28px; color: white; background: repeating-radial-gradient(ellipse at 10% 90%, transparent 0 28px,#a1724c55 29px 31px),linear-gradient(145deg,#173f35,#0c231f); }
.anytime-map:after { content: ""; position: absolute; inset: 0; background: linear-gradient(116deg,transparent 46%,#ff5a36 47% 48%,transparent 49%); }
.availability { position: relative; z-index: 2; display: inline-block; padding: 8px 10px; background: var(--lime); color: var(--forest-2); font: 800 10px monospace; letter-spacing: .13em; }
.anytime-map b { position: absolute; left: 40px; bottom: 42px; z-index: 2; font: 800 44px/1.02 Manrope,sans-serif; letter-spacing: -.04em; }
.mini-controls i { position: absolute; z-index: 2; display: grid; place-items: center; width: 43px; height: 43px; border: 4px solid #d1338c; border-radius: 50%; background: #f3f0e6dd; color: #d1338c; font: normal 800 13px sans-serif; }
.mini-controls i:nth-child(1){left:23%;top:37%}.mini-controls i:nth-child(2){left:53%;top:22%}.mini-controls i:nth-child(3){right:13%;top:42%}
.anytime h2 { margin-bottom: 25px; }
.anytime p { color: var(--muted); font-size: 18px; }
.check-list { list-style: none; padding: 0; margin: 28px 0 0; }
.check-list li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); font-weight: 700; }
.check-list li:before { content: "↗"; float: left; margin-left: -30px; color: var(--orange); }

@media (max-width: 850px) {
  .ribbon-grid { grid-template-columns: 1fr; gap: 7px; padding-block: 25px; }
  .ribbon-grid > span { display: none; }
  .anytime { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 560px) {
  .locale-switch { width: 34px; height: 34px; }
  .nav-actions { gap: 8px; }
  .nav-actions .button { display: none; }
  .anytime-map { min-height: 350px; padding: 24px; }
  .anytime-map b { left: 24px; bottom: 28px; font-size: 35px; }
}


/* Dark theme for the landing pages. The palette tokens are simply given night
   values; the forest chrome already reads as dark, so only the paper surfaces
   and the ink need to flip. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b211f;
    --cream: #242b29;
    --ink: #ecefec;
    --muted: #8d9791;
    --line: #3a4441;
    --moss: #7fbfa4;
  }
  .brand-logo { box-shadow: 0 4px 14px #0007; }
  /* Thin weights bloom on dark ground; nudge body copy up one step. */
  body { font-weight: 420; }
}

/* Why we built it: a personal note, so it is set as prose rather than as
   another feature grid — one column, a readable measure, the closing line
   given the weight of a statement. */
.story-head h2 { max-width: 12ch; margin-top: 0; }
.story-body { max-width: 620px; }
.story-body p { font-size: 18px; line-height: 1.62; margin: 0 0 22px; }
.story-body .lede { font-size: 22px; line-height: 1.5; }
.story-body .closing {
  margin-top: 34px;
  padding-top: 26px;
  /* Follows the text colour, so it reads on the dark page and on paper. */
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.45;
}
@media (min-width: 900px) {
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
}

/* Photographs on the landing page.
   Sized in the markup and served at two widths, so a phone does not pull a
   desktop file and nothing shifts while they load. */
.section-photo {
  margin: 0 0 34px;
  border-radius: 22px;
  overflow: hidden;
  background: #12201d0f;
}
.section-photo img { display: block; width: 100%; height: auto; }
.section-photo.wide { margin: 8px 0 45px; }

/* The anytime panel: a real trail instead of the gradient that stood in for
   one. The scrim is what keeps the white lettering legible over it. */
.anytime-map { background: var(--forest-2); }
.anytime-map .section-photo.fill {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
}
.anytime-map .section-photo.fill img { height: 100%; object-fit: cover; }
.anytime-map:after {
  background: linear-gradient(to top, #0c231fdd 0%, #0c231f55 42%, transparent 70%);
}
.anytime-map .availability, .anytime-map b, .anytime-map .mini-controls { position: relative; z-index: 2; }
.anytime-map b { position: absolute; }

/* On paper-coloured sections the photo carries a hairline; on the dark one it
   would only muddy the edge. */
.dark-section .section-photo { background: #ffffff14; }

/* The hero photograph, in place of the drawn map that stood in for one.
   It fills the panel and the product card sits over it, so the first thing
   anyone sees is an actual orienteering map rather than an impression of one. */
.hero-visual { background: var(--forest-2); }
.hero-visual:before { display: none; }        /* the fabricated contour wash */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* the panel stacks: photo, scrim, then the card */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No scrim over the photograph. One was tried and it blacked the panel out
   whatever its colour stops said; the product card carries its own near-opaque
   background and reads perfectly well on the map without help. */
.hero-visual:after { display: none; }
.phone-card, .map-note { z-index: 3; }

/* Ink on the lime fill.
   Lime is the same colour at night as by day, so the ink on it has to be too.
   .mark, .feature-icon and .success-symbol set no colour of their own, so they
   inherited --ink — which flips to near-white after dark and took a lime chip
   from 11:1 down to 1.4:1. This token deliberately has no dark-mode value. */
:root { --on-lime: #0e2d26; }
.mark, .feature-icon, .success-symbol { color: var(--on-lime); }

/* A ghost button has no fill, so it takes the page's ink rather than the ink
   meant for a lime one. On the dark page it was #0e2d26 on #1b211f — the
   "see how it works" button was there the whole time, just invisible. */
.button.ghost { color: var(--ink); }