/* ECOAI Agent, public page.
 *
 * One look, one family. The card values here are the ECOAI Agent design system's card values
 * (docs/design/2026-09-23-ecoai-agent-design-system.md, sections 4.1 to 4.4), so this page reads as
 * the same product as the screens it shows; the neutral palette is the same one the ECO Certification
 * page uses, so the pages on this domain read as one hand. Tokens from both, widgets from neither:
 * no rounded tag controls, no toggle groups, no tab roles, anywhere.
 *
 * EVERY colour, radius, border width, shadow and duration is a custom property declared once in
 * :root below. Nothing further down this file, and nothing in the HTML, carries a literal value, so
 * a token correction from the shared Workbench parity contract is a one-line change here. The single
 * unavoidable exception is marked at .control::after.
 *
 * Light only. Fonts: Noto Sans, self hosted (assets/OFL.txt).
 */
@font-face {
  font-family: "Noto Sans";
  src: url("./NotoSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("./NotoSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

:root {
  /* --- Colour. Nothing else on this page is a colour. --- */
  --canvas: #f5f5f7; /* page ground */
  --paper: #ffffff; /* every surface: panel, screen frame, notice */
  --ink: #1d1d1f; /* all primary text */
  --secondary: #6e6e73; /* 5.07:1 on paper; the floor for readable text */
  --meta: #86868b; /* never readable text: disabled only */
  --line: #d2d2d7; /* hairlines and surface edges */
  --field-line: #8e8e93; /* input boundaries, >= 3:1 non-text contrast */
  --fill: #e8e8ed; /* inert fills */
  --forest: #3a6b52; /* the one accent, used once, as the submit fill */
  --forest-hover: #2c553f;
  --on-forest: #ffffff;
  --focus: #0071e3; /* focus ring only; never a fill on this page */
  --error: #b3261e;
  --select-bg: #d3e9dc;

  /* --- Geometry. --- */
  --hairline: 0.5px; /* surface edges, as the product draws them */
  --border: 1px; /* input and screen-frame edges */
  --radius-surface: 18px; /* every top level surface: panel, screen frame */
  --radius-control: 12px; /* buttons, inputs, selects, the notice */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* --- Elevation. --- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-window: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.06);

  /* --- Motion. Three motions on this page and no more. --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 100ms; /* 1. submit press */
  --dur-tint: 200ms; /* 2. input border and button fill */
  --dur-reveal: 220ms; /* 3. screens reveal */

  /* --- Type. --- */
  --font: "Noto Sans", system-ui, sans-serif;
  --size-body: 15px;
  --size-lede: 16px;
  --size-lede-wide: 18px;
  --size-promise: 18px;
  --size-heading: 22px;
  --size-input: 16px; /* below 16 iOS zooms on focus */
  --size-label: 13px;
  --size-legal: 12px; /* nothing on this page is smaller */
  --line-body: 1.55;

  /* One reading measure for every text block below the hero, so the headings and the body they
     head share a left edge and a centre line. A ch unit cannot do this: it scales with font-size,
     so a 22px heading and a 15px paragraph set to 62ch do not line up. */
  --measure: 540px;
  --art-opacity: 0.18;
  --art-opacity-mobile: 0.11;

  color-scheme: light;
  font-family: var(--font);
  font-synthesis: none;
  color: var(--ink);
  background: var(--canvas);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--line-body);
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}
::selection {
  background: var(--select-bg);
  color: var(--ink);
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute;
  left: 20px;
  top: -80px;
  z-index: 5;
  background: var(--paper);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  padding: 12px 16px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* --- Header: the name, nothing else. --- */

.top {
  padding-block: 24px 8px;
}
.word {
  display: inline-block;
  font-size: var(--size-lede-wide);
  font-weight: 600;
  letter-spacing: -0.4px;
}
.word span {
  font-weight: 400;
  color: var(--secondary);
}

/* --- Hero --- */

.hero {
  display: grid;
  gap: 40px;
  padding-block: 24px 48px;
  align-items: start;
}
h1 {
  font-size: clamp(34px, 7.2vw, 62px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -1.2px;
  text-wrap: balance;
}
.subhead {
  margin-top: 20px;
  font-size: var(--size-lede);
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--secondary);
  max-width: 54ch;
  text-wrap: pretty;
}
.promise {
  margin-top: 16px;
  font-size: var(--size-promise);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  text-wrap: balance;
}
/* The one image rides in the hero. On a phone it follows the form, so the form is still one
   thumb scroll down; on a wide screen it fills the column beside the form, which is the only
   thing that stops a 340px block of copy sitting next to an 890px panel. */
.hero-shot {
  margin-top: 16px;
}

/* --- Surfaces: the product's card shell. --- */

.panel {
  background: var(--paper);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.panel h2 {
  font-size: var(--size-heading);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.panel .intro {
  margin-top: 6px;
  color: var(--secondary);
}

/* --- Form --- */

.grid {
  display: grid;
  gap: 16px 14px;
  margin-top: 18px;
}
.control {
  position: relative;
}
.field label {
  display: block;
  font-size: var(--size-label);
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 6px;
}
.field label .hint {
  font-weight: 400;
  color: var(--secondary);
  /* A label is a name, not a sentence: it breaks between the name and its hint or not at all,
     so "optional, so ECOAI can / text you" can never happen again. */
  white-space: nowrap;
}
.field input,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: var(--border) solid var(--field-line);
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: var(--size-input);
  line-height: 1.375;
  transition: border-color var(--dur-tint) var(--ease);
}
.field input:hover,
.field select:hover {
  border-color: var(--ink);
}
.field input::placeholder {
  color: var(--secondary);
}
.field select {
  appearance: none;
  padding-right: 38px;
}
/* A select's own arrow cannot be styled, so it is drawn here. An SVG data URI cannot read a custom
   property, so the chevron is a mask and takes its colour from --ink like everything else. */
.control::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}
[aria-invalid="true"] {
  border-color: var(--error) !important;
}
.error {
  margin-top: 6px;
  font-size: var(--size-legal);
  line-height: 1.45;
  color: var(--error);
}

.consent {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px 10px;
  align-items: start;
}
.consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--forest);
}
.consent label {
  min-height: 44px;
  line-height: 1.4;
  font-weight: 600;
}
.consent input:disabled + label {
  color: var(--secondary);
}
.consent .terms,
.consent .hint,
.consent .error {
  grid-column: 2;
}
/* The reason the box above is off. It is an instruction, not legal text, so it sits with the
   label it explains instead of at the end of six lines of carrier terms. */
.consent .hint {
  font-size: var(--size-label);
  line-height: 1.4;
  color: var(--secondary);
}
.consent .terms {
  font-size: var(--size-legal);
  line-height: 1.45;
  color: var(--secondary);
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One primary action, naming its exact effect. */
.submit {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--forest);
  color: var(--on-forest);
  font-size: var(--size-input);
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: background-color var(--dur-tint) var(--ease), transform var(--dur-press) var(--ease);
}
.submit:hover {
  background: var(--forest-hover);
}
.submit:active {
  transform: scale(0.98);
}
.submit[disabled] {
  background: var(--fill);
  color: var(--meta);
  cursor: default;
  transform: none;
}

/* Who operates this, and the required line, at the point of decision. */
.operator-line {
  margin-top: 14px;
  font-size: var(--size-legal);
  line-height: 1.45;
  color: var(--secondary);
  max-width: 52ch;
}

.notice {
  margin-top: 16px;
  border: var(--border) solid var(--line);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  line-height: 1.5;
}
.notice.is-error {
  border-color: var(--error);
}
.notice b {
  display: block;
  font-weight: 600;
}
.done h2 {
  font-size: var(--size-heading);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.done p {
  margin-top: 10px;
}
.done b {
  font-weight: 600;
}

/* --- Sections --- */

.band {
  padding-block: 56px;
  border-top: var(--border) solid var(--line);
}
h2.section-title {
  font-size: var(--size-heading);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.lede {
  margin-top: 10px;
  color: var(--secondary);
  text-wrap: pretty;
}
/* Below the hero the page is one centred column with the screenshot bands running wider than it.
   Every text block shares --measure, so the headings and the paragraphs under them line up on the
   same left edge at every width instead of hugging the far left of a 1080px frame. */
.section-title,
.lede,
.rows,
.lines,
.coming,
.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

/* --- Screens: flat on the page ground. No frame, no tilt, no glow. --- */

.shot {
  border: var(--border) solid var(--line);
  border-radius: var(--radius-surface);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-window);
}
.shot img {
  width: 100%;
}
figure {
  display: grid;
  gap: 14px;
  justify-items: center;
}
figure .shot {
  max-width: 390px;
  width: 100%;
}
/* A figure standing on its own, not in the three-across loop. */
figure.solo {
  margin-top: 32px;
}
figure.wide {
  margin-top: 40px;
}
figure.wide .shot {
  max-width: 100%;
}
figcaption {
  color: var(--secondary);
  max-width: 44ch;
  text-align: center;
  text-wrap: pretty;
}
figure.wide figcaption {
  max-width: var(--measure);
}
.loop {
  display: grid;
  gap: 48px;
  margin-top: 32px;
}

/* --- Plain rows. No tag shapes, no icon grid. --- */

.rows {
  margin-top: 24px;
}
.rows li {
  padding-block: 16px;
  border-top: var(--border) solid var(--line);
}
.rows li:last-child {
  border-bottom: var(--border) solid var(--line);
}
.rows h3,
.coming h3 {
  font-weight: 600;
  line-height: 1.4;
}
.rows p,
.coming p {
  margin-top: 4px;
  color: var(--secondary);
  text-wrap: pretty;
}
.lines {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}
.lines li {
  text-wrap: pretty;
}
.coming {
  margin-top: 28px;
}
.prose {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  text-wrap: pretty;
}

/* The closing ask is one link back to the one form, never a second capture. It is outlined rather
   than filled: the forest fill belongs to the submit button alone, so the primary action stays
   unmistakable even after 7000 pixels of scrolling. */
.closing {
  padding-block: 56px;
  border-top: var(--border) solid var(--line);
  text-align: center;
}
.closing a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: 32px;
  background: var(--paper);
  border: var(--border) solid var(--field-line);
  border-radius: var(--radius-control);
  font-size: var(--size-promise);
  font-weight: 600;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: border-color var(--dur-tint) var(--ease);
}
.closing a:hover {
  border-color: var(--ink);
}

.terms a,
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.foot {
  border-top: var(--border) solid var(--line);
  padding-block: 24px 48px;
  font-size: var(--size-legal);
  line-height: 1.45;
  color: var(--secondary);
  display: grid;
  gap: 8px;
  text-align: center;
}

/* --- Reveal: screens fade in with a 4px rise, once. Nothing hides without JavaScript. --- */

.js .shot {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .shot.in {
  opacity: 1;
  transform: none;
}

/* --- Wider viewports --- */

/* Tablet: still one column, but a 728px-wide text input is not a form, it is a runway. The hero
   blocks take a readable width and centre on the same spine as everything below the hero. */
@media (min-width: 620px) and (max-width: 999px) {
  .hero {
    justify-items: center;
  }
  .hero-copy,
  .hero-form,
  .hero-shot {
    width: 100%;
    max-width: 600px;
  }
}

@media (min-width: 900px) {
  .panel {
    padding: 28px;
  }
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Name and State are the only pair. Everything else runs the full width of the panel, so no
     field is narrower than the one above it without a reason, and no label has to wrap. */
  .field-email,
  .field-business_type,
  .field-interest,
  .field-mobile {
    grid-column: 1 / -1;
  }
  .band {
    padding-block: 88px;
  }
  .closing {
    padding-block: 72px;
  }
  .loop {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* The hero goes two-column only when the copy column can still hold a 62px headline on two lines.
   Below this it would be a 336px column, and "Your Business Partner." would break three ways. */
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(392px, 448px);
    column-gap: 64px;
    row-gap: 36px;
    padding-block: 28px 80px;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .hero-shot {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    justify-items: start;
  }
  .hero-shot .shot {
    max-width: 316px;
  }
  .hero-shot figcaption {
    text-align: left;
    max-width: 44ch;
  }
  h1 {
    letter-spacing: -2.9px;
  }
  .subhead {
    font-size: var(--size-lede-wide);
    line-height: 1.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .submit,
  .field input,
  .field select,
  .closing a {
    transition: none;
  }
  .submit:active {
    transform: none;
  }
  .js .shot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Original EE ASCII artwork sits behind the hero; the form remains on paper. */
.hero {
  position: relative;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 420px;
  opacity: var(--art-opacity-mobile);
  pointer-events: none;
}
@media (min-width: 1000px) {
  .hero-art {
    opacity: var(--art-opacity);
    height: 560px;
  }
}