/* ============================================================================
   EasyGeotag — landing page

   A single dark world, deliberately. Photographers live in dark tools all day
   (Lightroom, Capture One), the app's own Mac window is dark, and the map reads
   better against it. No light theme: this is a committed look, not an omission.

   The palette is lifted from the product. --brand is the azure of the app icon,
   which is the colour a buyer actually associates with EasyGeotag — it leads
   here exactly as it does on their Home Screen. --track is the orange the app
   strokes its GPS polyline with, and it is used for nothing but the route: the
   scroll rail and the drawn track in the hero. That mirrors the real
   relationship rather than inventing one.

   The near-blacks carry a slight blue bias so the azure sits in the ground
   rather than on top of it.
   ========================================================================= */

:root {
  /* Ground — near-blacks biased blue, to seat the brand azure */
  --ink:      #090D12;
  --ink-2:    #101720;
  --ink-3:    #151D27;
  --rule:     #1E2833;

  /* Text */
  --chalk:    #E9EEF4;
  --mist:     #91A0B0;

  /* Brand — the app icon's azure. The lead accent. */
  --brand:     #4A9BEF;
  --brand-dim: #2E6EB8;

  /* The GPS track, and only the GPS track: the scroll rail and the hero
     polyline. Same orange the app strokes its map with. */
  --track:     #FF8A3D;
  --track-dim: #C4682C;

  /* Data marks. Desaturated teal, so numbers never read as either accent. */
  --fix:      #5FB3A1;

  --display: "Archivo Expanded", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --f-xs:   0.8125rem;
  --f-sm:   0.9375rem;
  --f-base: 1.0625rem;
  --f-md:   1.1875rem;
  --f-lg:   1.5rem;
  --f-xl:   clamp(1.9rem, 3.6vw, 2.9rem);
  --f-2xl:  clamp(2.5rem, 6vw, 4.6rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(4.5rem, 10vw, 8.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: it stops sideways scroll without turning the root
     into a scroll container, which would break position: sticky/fixed. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font: 400 var(--f-base)/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--brand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--ink);
  padding: .7rem 1.1rem;
  font: 500 var(--f-sm) var(--mono);
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- helpers --- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}
.narrow { width: min(100% - (var(--gutter) * 2), 760px); }
.center { text-align: center; }

.eyebrow {
  font: 500 var(--f-xs)/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.4rem;
}

.label {
  font: 500 var(--f-xs)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--mist); }
.small { font-size: var(--f-sm); }

.section-lede {
  color: var(--mist);
  font-size: var(--f-md);
  max-width: 58ch;
  margin-top: 1.4rem;
}

.aside {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1.4rem;
  border-left: 2px solid var(--brand);
  color: var(--mist);
  font-size: var(--f-md);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- route --- */
/* Scroll progress that doubles as section nav. It is the page's spine: the
   route you walked, filling in as you go. */

.route {
  position: fixed;
  left: clamp(1rem, 2.6vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}
/* 1280px, not 1080: below that the gutter beside the 1180px column is too
   narrow and the hover label runs under the content. */
@media (min-width: 1280px) { .route { display: block; } }

.route-line {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.route-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--track);
  transition: height .12s linear;
}

.route-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}
.route-stops a {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--mist);
}
.route-stops .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--ink);
  flex: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.route-stops .lbl {
  font: 500 var(--f-xs)/1 var(--mono);
  letter-spacing: .06em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.route-stops a:hover .lbl,
.route-stops a:focus-visible .lbl { opacity: 1; transform: none; }
.route-stops a.is-passed .dot { border-color: var(--track-dim); background: var(--track-dim); }
.route-stops a.is-here .dot {
  border-color: var(--track);
  background: var(--track);
  transform: scale(1.25);
}
/* The label stays hidden even for the current stop — the lit dot already says
   where you are, and a permanently visible label would sit over the content. */
.route-stops a:hover .lbl { color: var(--chalk); }

/* ----------------------------------------------------------------- hero --- */

.hero {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  /* Contains the bloom below. Without this it bled 10% past each edge and
     gave the page 38px of horizontal scroll on a phone. */
  overflow: hidden;
}

.hero::before {
  /* A soft bloom behind the hero, in the brand azure. */
  content: "";
  position: absolute;
  inset: -20% 0 40%;
  background: radial-gradient(60% 50% at 62% 30%, rgba(74, 155, 239, .13), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

h1 {
  font-size: var(--f-2xl);
  font-weight: 800;
  letter-spacing: -0.035em;
}
h1 em {
  font-style: normal;
  color: var(--brand);
}

.hero-copy .lede {
  margin-top: 1.6rem;
  font-size: var(--f-md);
  color: var(--mist);
  max-width: 46ch;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.2rem;
}
.center-cta { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font: 600 var(--f-sm) var(--body);
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--brand);
  color: #04121F;
}
.btn-primary:hover { background: #6BB0F5; }

/* Honest state: the store link does not exist yet. */
.btn-primary.is-pending {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand-dim);
  position: relative;
  padding-left: 2.4rem;
}
.btn-primary.is-pending::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s var(--ease) infinite;
}
.btn-primary.is-pending:hover { background: rgba(74, 155, 239, .09); border-color: var(--brand); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.btn-quiet {
  color: var(--chalk);
  border: 1.5px solid var(--rule);
}
.btn-quiet:hover { border-color: var(--mist); }

.cta-note {
  margin-top: 1.1rem;
  font: 400 var(--f-sm) var(--mono);
  color: var(--mist);
}

/* Hero canvas + telemetry readout */
.hero-map { margin: 0; position: relative; }
#trackCanvas { width: 100%; height: auto; display: block; }

.readout {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.1rem;
  background: rgba(10, 15, 12, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font: 400 var(--f-xs) var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}
.readout b {
  color: var(--mist);
  font-weight: 500;
  letter-spacing: .1em;
  margin-right: .6rem;
}

.hero-shot {
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  width: min(100% - (var(--gutter) * 2), 1180px);
}
.hero-shot img {
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02);
}

/* ---------------------------------------------------------------- bands --- */

.band { padding-block: var(--band-y); position: relative; }
.band.alt { background: var(--ink-2); }
.band h2 { font-size: var(--f-xl); max-width: 20ch; }
.band.get h2 { max-width: none; }

/* --------------------------------------------------------------- the gap --- */

.gap-pair {
  display: grid;
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px) { .gap-pair { grid-template-columns: 1fr 1fr; } }

.card {
  padding: 1.8rem;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.band.alt .card { background: var(--ink-3); }

.big {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--fix);
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- steps --- */

.steps {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  counter-reset: none;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  padding: 2rem 1.8rem;
  background: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.step-n {
  font-size: var(--f-xs);
  letter-spacing: .14em;
  color: var(--brand);
}
.step h3 { font-size: var(--f-lg); }
.step p { color: var(--mist); }
.step p.small { color: #6F7E76; }

/* -------------------------------------------------------------- devices --- */

.devices {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}
@media (min-width: 860px) {
  .devices { grid-template-columns: .8fr 1.1fr 1.4fr; }
}

.device { margin: 0; }
.device img {
  border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .85);
}
.device figcaption {
  margin-top: 1rem;
  font-size: var(--f-sm);
  color: var(--mist);
}
.device figcaption b {
  display: block;
  color: var(--chalk);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- grid --- */

.grid {
  display: grid;
  gap: 1.2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 680px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.tile {
  padding: 1.7rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--ink-3);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tile:hover { border-color: var(--brand-dim); transform: translateY(-3px); }
.tile h3 {
  font-size: var(--f-md);
  margin-bottom: .6rem;
  letter-spacing: -0.012em;
}
.tile p { color: var(--mist); font-size: var(--f-sm); }

/* -------------------------------------------------------------- formats --- */

.formats {
  display: grid;
  gap: 1.2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .formats { grid-template-columns: repeat(3, 1fr); } }

.format {
  padding: 1.7rem;
  border-top: 2px solid var(--brand);
  background: linear-gradient(180deg, rgba(74, 155, 239, .05), transparent 60%);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.format p:last-child { color: var(--mist); font-size: var(--f-sm); }

/* ---------------------------------------------------------------- split --- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; } }

.split-copy { display: flex; flex-direction: column; gap: 1.3rem; }
.split-copy p { color: var(--mist); max-width: 52ch; }
.split-copy p b { color: var(--chalk); font-weight: 600; }
.split-shot { margin: 0; }
.split-shot img {
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9);
}

/* ------------------------------------------------------------------ get --- */

.get { text-align: center; }
.get::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 50%, rgba(74, 155, 239, .10), transparent 70%);
  pointer-events: none;
}
.get .wrap { position: relative; }
.get h2 { font-size: var(--f-2xl); font-weight: 800; letter-spacing: -0.035em; }
.get .section-lede { margin-inline: auto; }
.mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 2rem;
  border-radius: 21%;
  box-shadow: 0 20px 50px -18px rgba(74, 155, 239, .4);
}

/* ----------------------------------------------------------------- foot --- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 3rem;
  background: var(--ink);
}
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; align-items: baseline; }
.foot-brand { font-size: var(--f-sm); }
.foot-brand b { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.foot-links { display: flex; gap: 1.4rem; }
.foot-links a {
  font: 400 var(--f-sm) var(--mono);
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot-links a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.foot-legal { flex-basis: 100%; max-width: 62ch; }

/* --------------------------------------------------------------- reveal --- */

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

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

/* ============================================================ prose pages ===
   Support and Privacy. Same world as the landing page, but built for reading:
   one narrow column, larger line height, no decoration competing with the text.
   ========================================================================= */

.doc-head {
  border-bottom: 1px solid var(--rule);
  padding-block: 2rem 2.5rem;
}
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 500 var(--f-xs) var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
}
.doc-back:hover { color: var(--brand); }
.doc-back::before { content: "←"; }

.doc {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
}
.doc h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  margin-bottom: .9rem;
}
.doc-meta {
  font: 400 var(--f-sm) var(--mono);
  color: var(--mist);
  margin-bottom: 2.5rem;
}
.doc h2 {
  font-size: var(--f-lg);
  margin-top: 2.8rem;
  margin-bottom: .9rem;
  max-width: none;
}
/* Only the heading that directly follows the standfirst loses its top margin.
   `:first-of-type` also caught the first h2 on the support page, which follows
   the contact card and collided with it. */
.doc-meta + h2 { margin-top: 0; }
.doc p, .doc li {
  color: var(--mist);
  max-width: 68ch;
}
.doc p + p { margin-top: 1rem; }
.doc p b, .doc li b { color: var(--chalk); font-weight: 600; }
.doc ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.doc ul li::marker { color: var(--brand-dim); }
.doc a:not(.btn):not(.doc-back) {
  color: var(--chalk);
  text-decoration-color: var(--brand-dim);
  text-underline-offset: 3px;
}
.doc a:not(.btn):not(.doc-back):hover { color: var(--brand); }

/* The one thing a support page must not bury. */
.contact-card {
  margin-top: 1.6rem;
  padding: 1.8rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.contact-card .addr {
  font: 500 var(--f-md) var(--mono);
  color: var(--brand);
  word-break: break-all;
}
/* `a { color: inherit }` leaves the address looking like plain text, so the
   underline is what says it is clickable. */
.contact-card .addr a {
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 155, 239, .35);
}
.contact-card .addr a:hover { border-bottom-color: var(--brand); }

/* Marks a value that still has to be filled in before this goes live. */
.fillme {
  background: rgba(74, 155, 239, .14);
  border-bottom: 1px dashed var(--brand);
  padding: 0 .25em;
  color: var(--brand);
  font-style: normal;
}