/* Terralio Watershed landing page.
   Standalone static stylesheet: the landing must render without the React bundle,
   so nothing here is shared with map-studio. Colour tokens are kept in sync with
   map-studio/src/index.css by hand so the landing and the app feel like one product. */

:root {
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);
  --max: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-main);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
/* height:auto is required, not cosmetic: the width/height attributes on <img>
   map to CSS width/height, so a CSS width alone would stretch the image. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* The hero CTA carries a full sentence, and `.btn`'s `nowrap` would make its
   min-content wider than a phone. It is the one button allowed to wrap. */
.hero-actions .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* --- nav --- */

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text-main);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.brand:hover { text-decoration: none; }

/* The delivered WebP is cropped to the wordmark bounds and sized for the
   header, avoiding needless transfer of the original PNG's white margins. */
.brand-logo,
.footer-logo {
  display: block;
  overflow: hidden;
}

.brand-logo { width: 128px; height: 42px; }
.footer-logo { width: 104px; height: 34px; }

.brand-logo img,
.footer-logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-inline-end: auto;
  font-size: 0.93rem;
}
.nav-links a { color: var(--text-muted); white-space: nowrap; }

/* Language switch: a native <details> menu — one compact button in the bar
   (the bar is capped at --max, and six links + CTA already fill it), opening
   three plain links to /, /fr/ and /ar/. No JavaScript, and the links are in
   the HTML for a crawler to follow. Never hidden, unlike .nav-links: a reader
   who landed on the wrong language must be able to leave it on a phone too. */
.lang-switch { position: relative; }

.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-switch summary:hover,
.lang-switch[open] summary { color: var(--text-main); background: var(--surface-muted); }

.lang-switch nav {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lang-switch nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-main);
  font-size: 0.95rem;
}
.lang-switch nav a:hover { text-decoration: none; background: var(--surface-muted); }
.lang-switch nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* --- hero --- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.kicker {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.02em; }

.lead {
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 34em;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-note { font-size: 0.9rem; color: var(--text-muted); }
/* The Beta sentence (G6): a line under the lead, never a coloured banner. */
.beta-note { max-width: 60ch; font-size: 0.9rem; color: var(--text-muted); }

/* Product shot. The source is a full application screenshot; the frame crops it
   to the exported sheet itself — title, map, legend and locator inset. Crop box
   measured on the capture: x 60..1008, y 205..702 of 1534 x 937. `left`/`width`
   resolve against the frame width, `top` against its height, which the
   aspect-ratio pins — so the three percentages below must be recomputed together
   if the source image is ever replaced. */
.shot { margin: 0; }

.shot-frame {
  overflow: hidden;
  aspect-ratio: 948 / 497;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--surface-muted);
}

/* Offsets are margins, never `top`/`left`: a percentage margin always resolves
   against the containing block's width, whereas a percentage `top` inside an
   aspect-ratio box does not resolve to the height you expect. */
.shot-crop {
  width: 161.81%;        /* 1534 / 948 — scales the capture to the crop width */
  margin-left: -6.33%;   /* -60 / 948, of the frame width */
}

.shot-crop img {
  width: 100%;
  max-width: none;
  margin-top: -13.36%;   /* -205 / 1534, of the crop width */
}

.shot figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- sections --- */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 24px;
}

.section-alt {
  max-width: none;
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-alt > * { max-width: var(--max); margin-inline: auto; }

.section h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.01em; }

.section-lead { margin-top: 12px; color: var(--text-muted); font-size: 1.05rem; }

/* --- cards --- */

.cards {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.card h3 { font-size: 1.05rem; }

.card ul {
  margin: 14px 0 0;
  padding-inline-start: 18px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.card li { margin-bottom: 7px; }

/* --- steps --- */

.steps {
  /* `auto` inline margins, not 0: this shorthand would otherwise override the
     centring that `.section-alt > *` applies at equal specificity. */
  margin: 36px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}

.steps h3 { font-size: 1.05rem; margin-bottom: 8px; }
.steps p { color: var(--text-muted); font-size: 0.95rem; }

.steps-note {
  margin-top: 36px;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  color: var(--text-main);
  font-size: 0.95rem;
}

/* --- facts --- */

.facts {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.fact h3 { font-size: 1rem; margin-bottom: 8px; }
.fact p { color: var(--text-muted); font-size: 0.95rem; }

/* --- pricing --- */

/* Two packs, so the grid is capped rather than auto-fit: on a wide screen a
   full-width pair of cards reads as a placeholder for a missing third tier. */
.price-cards {
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 720px;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
}

.price-card h3 { font-size: 1.05rem; }

.price {
  margin-top: 10px;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.price-credits { margin-top: 6px; font-weight: 600; }
.price-tagline { margin-top: 4px; color: var(--text-muted); font-size: 0.95rem; }
.price-unit { margin-top: 2px; color: var(--text-muted); font-size: 0.85rem; }
.price-card .btn { margin-top: 20px; }

.price-note {
  margin-top: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- cta --- */

.cta {
  text-align: center;
  padding: 80px 24px;
  border-top: 1px solid var(--border);
}
.cta h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.cta p { margin: 14px 0 28px; color: var(--text-muted); }

/* --- footer --- */

.footer {
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  padding: 40px 24px;
}

.footer-brand,
.attribution {
  max-width: var(--max);
  margin-inline: auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}
.footer-brand span { color: var(--text-muted); }

.attribution {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- responsive --- */

/* Six links, the language switch and the CTA no longer fit one bar below this
   width (the French labels are the longest): the links take a row of their
   own under the bar, and the switch moves to sit beside the CTA. */
@media (max-width: 1180px) {
  .nav { flex-wrap: wrap; row-gap: 12px; }
  .nav-links { order: 3; width: 100%; margin-inline-end: 0; flex-wrap: wrap; row-gap: 4px; }
  .lang-switch { margin-inline-start: auto; }
}

@media (max-width: 900px) {
  /* `minmax(0, 1fr)`, not `1fr`: an implicit `min-width: auto` lets the track
     grow to the widest unbreakable child — the long hero CTA — and the page
     then scrolls horizontally on a phone. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 32px; }
  .nav { flex-wrap: wrap; gap: 16px; }
  .nav-links { order: 3; width: 100%; margin-inline-end: 0; }
}

@media (max-width: 560px) {
  .nav-links { display: none; }
  /* Logo, switch and CTA share one row down to a 375 px phone. */
  .nav { gap: 12px; padding-inline: 16px; }
  .brand-logo { width: 110px; height: 36px; }
  .nav > .btn { padding: 8px 14px; }
  .lang-switch summary { padding: 6px 10px; }
  .lang-switch summary::after { display: none; }
  .section, .cta { padding-block: 52px; }
}

/* B12 — Privacy · Terms · Contact, in the footer. Quiet, but not hidden: a
   reader who is looking for them must not have to guess a URL. */
.footer-legal {
  margin: 0 0 12px;
  font-size: 14px;
}

.footer-legal a {
  color: inherit;
}

/* --- Arabic (right-to-left) --- */

/* The Arabic page is <html lang="ar" dir="rtl">: flex, grid, text alignment and
   every logical property above (margin-inline-*, padding-inline-*,
   border-inline-*) follow the direction on their own. What remains is
   typographic. */
:root:lang(ar) body {
  font-family: "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, "Geeza Pro",
    "Arabic UI Text", system-ui, sans-serif;
  line-height: 1.8;
}

/* Arabic letters join: letter-spacing pulls the joined letters apart, and
   uppercase does not exist. */
:root:lang(ar) .kicker { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
:root:lang(ar) h1,
:root:lang(ar) h2 { letter-spacing: 0; line-height: 1.35; }

/* The product shot is cropped with physical offsets (see .shot-crop): in a
   right-to-left box the over-wide crop would be anchored to the right edge
   and the margin would push the wrong way. The image itself has no direction,
   so the frame stays left-to-right and only the caption reads right-to-left. */
.shot-frame { direction: ltr; }

.lang-note { font-style: italic; }