/* Energy Saving Plan: white with a faint blue grid, one working blue (rgb 26 111 213), Space Grotesk headings
   and DM Sans text. Both fonts are served from this site under the SIL Open Font Licence (fonts/*-OFL.txt).
   The colours are the Airo page's, read on 25 Oct 2026 (work 018); contrast on white is noted beside each. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
  --text: hsl(0 0% 4%);
  --primary: hsl(213 78% 47%); /* rgb(26 111 213): the button and the headline's blue, 4.9:1 */
  --primary-strong: hsl(213 78% 40%); /* small blue text and the button's hover, 6.3:1 (5.6:1 on --muted) */
  --accent: hsl(212 79% 57%);
  --navy: hsl(213 66% 17%);
  --card: hsl(216 100% 97%);
  --muted: hsl(215 70% 95%);
  --muted-text: hsl(216 27% 40%); /* 6.0:1, and 5.5:1 on --card */
  --border: hsl(216 71% 87%);
  --field-border: #6b7f9e; /* a field's edge must reach 3:1; this is 4.1:1 */
  --danger: #b42318; /* 10.5:1 */
  --good: #067647; /* 5.7:1 */
  --radius: 12px;
  --heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* The faint blue grid, tinted towards the right. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0) 30%, hsl(216 100% 97% / 0.9)),
    linear-gradient(hsl(216 71% 87% / 0.5) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, hsl(216 71% 87% / 0.5) 1px, transparent 1px) 0 0 / 48px 48px,
    #fff;
  font: 1rem/1.6 var(--body);
  overflow-wrap: break-word;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  line-height: 1.12;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: wrap; /* "Smarter Energy / Audits.", as on the Airo page; balance gives "Smarter / Energy Audits." */
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--primary-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--navy);
}

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

.wrap {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
}

.narrow {
  max-width: 760px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}

.skip:focus {
  top: 1rem;
  color: #fff;
}

/* Header: the logo alone. */
.top {
  padding-block: 1.25rem;
}

.brand {
  display: inline-block;
}

.brand img {
  display: block;
  width: auto;
  height: 44px;
}

@media (max-width: 480px) {
  .brand img {
    height: 36px;
  }
}

/* Buttons and fields */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: 600 1rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button:hover {
  background: var(--primary-strong);
  color: #fff;
}

.button-wide {
  width: 100%;
  margin-top: 0.4rem;
}

.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

input::placeholder {
  color: var(--muted-text);
  opacity: 1;
}

input:focus-visible {
  outline-offset: 1px;
  border-color: var(--primary);
}

/* Hero: the words at the left, the picture at the right. */
.hero {
  padding-block: clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  color: var(--primary-strong);
  font: 600 0.8rem/1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

h1 .line {
  display: block;
}

.accent {
  color: var(--primary);
}

.lead {
  max-width: 34rem;
  color: var(--muted-text);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 34rem;
  margin-top: 2rem;
}

.quick input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

@media (max-width: 480px) {
  .quick .button {
    flex: 1 1 100%;
  }
}

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.note svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.22em;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The picture: a dashed hexagon, spokes, and a bolt in a pale inner hexagon (our own drawing). */
.picture svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .picture svg {
    max-width: 300px;
  }
}

.hex-outer {
  fill: hsl(216 100% 97% / 0.6);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.spokes line {
  stroke: var(--accent);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
}

.hex-inner {
  fill: var(--muted);
  stroke: var(--border);
  stroke-width: 2;
}

.bolt {
  fill: var(--primary);
}

.dots circle {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 3;
}

/* The three cards */
.features {
  padding-block: 0 clamp(3rem, 7vw, 5rem);
}

.cards {
  list-style: none;
  margin-block: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 700px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cards li {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  background: var(--primary);
}

.icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cards h2 {
  font-size: 1.125rem;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

.cards p {
  margin: 0;
  color: var(--muted-text);
}

/* The early-access form */
.signup-section {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--border);
}

.signup {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .signup {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 16px 40px -24px hsl(213 66% 17% / 0.3);
}

.field {
  margin-bottom: 1rem;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 1rem;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.field input:user-invalid,
.field input[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.error {
  display: none;
  margin: 0.35rem 0 0;
  color: var(--danger);
  font-size: 0.9rem;
}

.field input:user-invalid ~ .error,
.field input[aria-invalid="true"] ~ .error {
  display: block;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.small {
  margin: 1rem 0 0;
  color: var(--muted-text);
  font-size: 0.85rem;
}

.status:empty {
  display: none;
}

.status {
  margin: 1rem 0 0;
  font-weight: 600;
}

.status.is-good {
  color: var(--good);
  font-size: 1.1rem;
}

.status.is-bad {
  color: var(--danger);
}

.form.is-done .form-fields {
  display: none;
}

/* Footer */
.foot {
  padding-block: 1.75rem;
  border-top: 1px solid var(--border);
  background: rgb(255 255 255 / 0.85);
  color: var(--muted-text);
  font-size: 0.95rem;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.foot-row p {
  margin: 0;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.foot a {
  color: var(--muted-text);
}

.foot a:hover {
  color: var(--primary-strong);
}

/* The cookie banner (site.js): Accept and Reject look the same, so neither is the easy one (ICO guidance). */
.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  padding-block: 1rem;
  border-top: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 -12px 32px -20px hsl(213 66% 17% / 0.35);
}

.consent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.consent h2 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.consent p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.consent-actions {
  display: flex;
  gap: 0.75rem;
}

.consent-actions .button {
  min-width: 7.5rem;
}

@media (max-width: 480px) {
  .consent-actions {
    width: 100%;
  }

  .consent-actions .button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Plain pages (privacy, thanks, 404, and the form's answer without JavaScript) */
.page {
  padding-block: clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
}

.page h1 {
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.25rem);
}

.page h2 {
  font-size: 1.35rem;
  margin-top: 2.25rem;
}

.page p,
.page li {
  color: var(--muted-text);
}

.page strong {
  color: var(--text);
}

.page ul {
  padding-left: 1.25rem;
}

/* A table of facts (the cookies page). Below 600px each row becomes a card with its labels, so nothing scrolls
   sideways. */
.table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table th,
.table td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--card);
  font-weight: 600;
}

.table td {
  color: var(--muted-text);
}

.table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
  }

  .table tbody th,
  .table td {
    display: block;
    border: 0;
    padding: 0.35rem 0.85rem;
  }

  .table tbody th {
    padding-top: 0.75rem;
    background: var(--card);
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .table td:last-child {
    padding-bottom: 0.75rem;
  }

  .table td::before {
    content: attr(data-label) ": ";
    color: var(--text);
    font-weight: 600;
  }
}