/*
  Forebay's website. The colours are the app icon's: the teal and deep
  blue of the water, the white of the dam, and the dashed blue of its
  rule curve, with the orange the app draws shortages and power in.

  Author: Alexius Academia
  Date: 2026-10-18
*/

:root {
  --ink: #12283d;
  --ink-soft: #4d6275;
  --paper: #ffffff;
  --mist: #f0f6f9;
  --line: #d9e5ec;
  --blue: #1e6fc4;
  --blue-deep: #0f3f6e;
  --steel: #e2eef5;
  --coral: #e8902a;
  --green: #2a9a62;
  --radius: 14px;
  --wide: 1120px;
}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }

.sub { color: var(--ink-soft); margin: 10px 0 0; max-width: 60ch; }

/* The bar at the top */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 63, 110, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }

.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand img { border-radius: 8px; }

nav { display: flex; align-items: center; gap: 22px; }
nav a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.95rem; }
nav a:hover { color: #fff; }
nav .pill { color: var(--blue-deep); background: #fff; padding: 6px 16px; border-radius: 999px; font-weight: 600; }
nav .pill:hover { color: var(--blue-deep); background: var(--steel); }

/* The hero: a lake, its surface across the middle */

.hero {
  color: var(--ink);
  text-align: center;
  padding: 72px 0 0;
  background:
    linear-gradient(180deg, transparent 0 64%, #b9e2ec 64.15% 100%),
    linear-gradient(180deg, #d6eef6 0%, #f3fafc 64%);
}

.hero-icon { margin: 0 auto 22px; filter: drop-shadow(0 14px 26px rgba(15, 63, 110, 0.3)); }

.lead { max-width: 62ch; margin: 20px auto 0; font-size: 1.15rem; color: var(--ink-soft); }

.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.button {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650;
  color: var(--ink);
  border: 1.5px solid rgba(15, 63, 110, 0.4);
  background: rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, background 0.15s ease;
}
.button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.85); }
.button.primary { background: var(--coral); border-color: var(--coral); color: #fff; }
.button.primary:hover { background: #cf7a18; }

.hero-shot {
  margin: 54px auto -150px;
  max-width: 1020px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15, 63, 110, 0.2);
  box-shadow: 0 34px 80px rgba(15, 63, 110, 0.35);
  background: #fff;
}

/* Sections */

section { padding: 84px 0; }

.hero + .band { padding-top: 230px; }

.band { background: var(--mist); }

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

.grid article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  border-top: 3px solid var(--blue);
}
.grid article p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.98rem; }

/* The tour */

.step {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: 44px;
  align-items: center;
  margin-top: 64px;
}
.step.flip .words { order: 2; }
.step.flip { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }

.step img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(15, 63, 110, 0.16);
}

.step p { color: var(--ink-soft); margin: 10px 0 0; }

.num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Examples */

.examples {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.examples li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.examples strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }

/* The methods table */

.checks { width: 100%; border-collapse: collapse; margin-top: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 0.97rem; }
.checks th, .checks td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--line); }
.checks th { background: var(--steel); font-weight: 650; }
.checks th:first-child, .checks td:first-child { text-align: left; }
.checks tr:last-child td { border-bottom: 0; }
.checks td small { display: block; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* Limits */

.limits ul { margin: 26px 0 0; padding: 0; list-style: none; }
.limits li {
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.limits li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 23px;
  width: 12px;
  height: 2px;
  background: var(--coral);
}
.note {
  margin-top: 26px;
  padding: 16px 20px;
  background: var(--mist);
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  color: var(--ink-soft);
}

/* Downloads */

.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

.card {
  flex: 1 1 240px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--blue-deep);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 63, 110, 0.3); }
.card strong { font-size: 1.2rem; }
.card span { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.card.pending { background: var(--paper); color: var(--ink); border: 1px dashed #a9c3d3; }
.card.pending span { color: var(--ink-soft); }

/* The privacy page */

.privacy { padding-top: 56px; }
.privacy h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); }
.privacy h2 { font-size: 1.4rem; margin-top: 40px; }
.privacy p, .privacy ul { margin: 14px 0 0; }
.privacy li { margin-top: 6px; }
.privacy table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.95rem; }
.privacy th, .privacy td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.privacy th { background: var(--steel); font-weight: 650; }
.privacy code { font-size: 0.9em; overflow-wrap: anywhere; }

/* The foot */

footer { background: var(--blue-deep); color: rgba(255, 255, 255, 0.7); padding: 26px 0; font-size: 0.92rem; }
footer a { color: #fff; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Narrow screens */

@media (max-width: 760px) {
  nav a:not(.pill) { display: none; }
  .hero { padding-top: 48px; }
  .hero-shot { margin-bottom: -70px; }
  .hero + .band { padding-top: 130px; }
  section { padding: 60px 0; }
  .step, .step.flip { grid-template-columns: 1fr; gap: 20px; margin-top: 44px; }
  .step.flip .words { order: 0; }
}