/* brand.css: the www.feasibility.earth design system for the app's public pages ("/", /order/*, /login, /link,
   /account*). Tokens from the marketing site's globals.css, plus accessible additions, and the shared parts: header,
   hero band, card, buttons, fields, alerts, footer. Mobile first; light only, as the app is.

   The typefaces (Bricolage Grotesque for headings, Manrope for text, both OFL) are declared in fonts.css, which every
   page links before this file; the pages preload the two latin files (templates/components/fe_assets.html).

   Accessibility: text on amber is always dark (--fe-text, 7.3:1), amber is never text on a light background, every
   control has a visible focus ring that keeps its corners, inputs are 16px (no zoom on phones) and at least 48px
   tall, field borders reach 3:1, and nothing moves under prefers-reduced-motion. */

:root {
  /* Greens */
  --fe-green: #1B4332;
  --fe-green-mid: #2D6A4F;
  --fe-green-light: #40916C;
  --fe-green-pale: #D8F3DC;
  /* Earth and amber */
  --fe-earth: #6B4226;
  --fe-amber: #D4A017;
  --fe-amber-lt: #F4C430;
  --fe-sand: #F5ECD7;
  /* Neutrals */
  --fe-bg: #FAFAF8;
  --fe-surface: #FFFFFF;
  --fe-text: #1A1A18;
  --fe-muted: #5C5C58;
  --fe-border: #E2DDD6;
  --fe-hover: #F0EDE8;
  /* Accessible additions */
  --fe-label: #374151;
  --fe-field-border: #7f8a85;
  --fe-error: #b42318;
  --fe-error-bg: #FEF2F2;
  --fe-info-bg: #EEF6F0;
  --fe-focus: #2D6A4F;
  --fe-focus-on-dark: #F4C430;
  --fe-on-dark: #FFFFFF;
  --fe-on-dark-muted: rgba(255, 255, 255, 0.78);
  --fe-on-dark-faint: rgba(255, 255, 255, 0.72);
  --fe-on-dark-line: rgba(255, 255, 255, 0.12);
  /* Shape and rhythm */
  --fe-radius: 8px;
  --fe-radius-card: 16px;
  --fe-gutter: 16px;
  --fe-wrap: 1140px;
  --fe-wrap-pad: var(--fe-gutter);
  --fe-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --fe-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Type */
  --fe-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --fe-font-body: 'Manrope', system-ui, sans-serif;
}

/* The marketing site's container: 1140px wide, 40px inside from 768px, so the logo sits where the site's does. */
@media (min-width: 641px) {
  :root { --fe-wrap-pad: 24px; }
}
@media (min-width: 768px) {
  :root { --fe-wrap-pad: 40px; }
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* The sticky header (60px, 68px from 641px) never covers a field that keyboard focus or a skip link scrolls to
   (WCAG 2.2 2.4.11). */
html { scroll-padding-top: 76px; }
@media (min-width: 641px) {
  html { scroll-padding-top: 84px; }
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fe-bg);
  color: var(--fe-text);
  font-family: var(--fe-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Headings are the display face, bold (this file comes after fonts.css, whose 600 is for the workspace). */
h1, h2, h3, h4 {
  font-family: var(--fe-font-display);
  font-weight: 700;
  line-height: 1.2;
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: var(--fe-green-mid); text-underline-offset: 2px; }
a:hover { color: var(--fe-green); }

/* Focus: a 2px ring 3px outside, in the brand green (amber on the dark bands), and the control keeps its corners. */
:focus-visible {
  outline: 2px solid var(--fe-focus);
  outline-offset: 3px;
}
.fe-hero :focus-visible,
.fe-footer :focus-visible { outline-color: var(--fe-focus-on-dark); }

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

.fe-skip-link {
  position: absolute;
  left: var(--fe-gutter);
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--fe-green);
  color: var(--fe-on-dark);
  border-radius: var(--fe-radius);
  font-weight: 700;
  text-decoration: none;
}
.fe-skip-link:focus { top: 10px; color: var(--fe-on-dark); outline-color: var(--fe-focus-on-dark); }

/* ── the survey mark (templates/components/fe_mark.html) ── */
.fe-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fe-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe-mark svg { width: 20px; height: 20px; }
.fe-wordmark {
  font-family: var(--fe-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--fe-green);
  white-space: nowrap;
}
.fe-wordmark span { color: var(--fe-green-light); }

/* ── header (templates/components/fe_header.html) ── */
.fe-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 250, 248, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fe-border);
}
.fe-header-inner {
  max-width: var(--fe-wrap);
  height: 60px;
  margin: 0 auto;
  padding: 0 var(--fe-wrap-pad);
  display: flex;
  align-items: center;
  gap: 16px;
}
.fe-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: var(--fe-radius);
}
.fe-header-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fe-muted);
  white-space: nowrap;
}
.fe-header-cta .fe-long { display: none; }
/* The marketing nav's buttons: outline ("Log in") and solid green ("Start Study"), 14px, never wrapping. */
.fe-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1.5px solid var(--fe-green);
  border-radius: var(--fe-radius);
  background: transparent;
  color: var(--fe-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s var(--fe-ease), color 0.2s var(--fe-ease);
}
.fe-btn-nav:hover { background: var(--fe-green); color: var(--fe-on-dark); }
.fe-btn-nav.is-primary { background: var(--fe-green); color: var(--fe-on-dark); }
.fe-btn-nav.is-primary:hover { background: var(--fe-green-mid); border-color: var(--fe-green-mid); color: var(--fe-on-dark); }
@media (min-width: 481px) {
  .fe-header-cta .fe-long { display: inline; }
}
@media (max-width: 380px) {
  .fe-header-inner { gap: 10px; }
  .fe-btn-nav { padding: 8px 12px; }
}
@media (min-width: 641px) {
  .fe-header-inner { height: 68px; }
}

/* ── hero band: the marketing pages' dark green band with its faint dot grid ── */
.fe-hero {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(150deg, #060E08 0%, #1B4332 60%, #2D6A4F 100%);
  color: var(--fe-on-dark);
}
.fe-hero-inner {
  max-width: var(--fe-wrap);
  margin: 0 auto;
  padding: 40px var(--fe-wrap-pad) 104px;
}
.fe-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fe-green-mid);
}
.fe-hero .fe-eyebrow { color: var(--fe-green-pale); }
.fe-hero h1 {
  max-width: 820px;
  margin-top: 10px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.fe-hero p.fe-lede {
  max-width: 600px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fe-on-dark-muted);
}
@media (min-width: 768px) {
  .fe-hero-inner { padding-top: 64px; padding-bottom: 120px; }
  .fe-hero p.fe-lede { font-size: 17px; }
}

/* ── main column and card ── */
.fe-main {
  flex: 1;
  width: 100%;
  max-width: var(--fe-wrap);
  margin: 0 auto;
  padding: 0 var(--fe-wrap-pad) 64px;
}
.fe-card {
  background: var(--fe-surface);
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius-card);
  box-shadow: var(--fe-shadow-card);
  padding: 22px 18px;
}
@media (min-width: 481px) {
  .fe-card { padding: 28px; }
}
.fe-card h2 {
  font-size: 24px;
  line-height: 1.2;
}

/* ── fields ── */
.fe-field { margin-top: 18px; }
.fe-field label,
.fe-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--fe-label);
  margin-bottom: 6px;
}
.fe-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px; /* 16px: phones do not zoom into the field */
  line-height: 1.4;
  background: var(--fe-surface);
  border: 1px solid var(--fe-field-border);
  border-radius: var(--fe-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fe-input::placeholder { color: var(--fe-muted); opacity: 1; }
.fe-input:focus {
  outline: none;
  border-color: var(--fe-green-mid);
  box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.35);
}
.fe-input[aria-invalid="true"] { border-color: var(--fe-error); }
.fe-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25); }
.fe-field-error {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fe-error);
}
.fe-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  cursor: pointer;
}
/* A checkbox's label is a sentence beside its box, also inside a field (where labels are otherwise blocks). */
.fe-field label.fe-check {
  display: flex;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fe-text);
}
.fe-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--fe-green-mid); }

/* ── buttons (the marketing site's .btn-amber, .btn-primary, .btn-outline) ── */
.fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--fe-radius);
  border: 1.5px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--fe-ease), color 0.2s var(--fe-ease), border-color 0.2s var(--fe-ease),
    transform 0.15s var(--fe-ease);
}
.fe-btn-block { width: 100%; }
/* The one primary call to action of a step: amber with dark text (never white on amber). */
.fe-btn-amber { background: var(--fe-amber); color: var(--fe-text); }
.fe-btn-amber:hover { background: var(--fe-amber-lt); color: var(--fe-text); transform: translateY(-1px); }
.fe-btn-primary { background: var(--fe-green); color: var(--fe-on-dark); }
.fe-btn-primary:hover { background: var(--fe-green-mid); color: var(--fe-on-dark); transform: translateY(-1px); }
.fe-btn-outline { background: transparent; color: var(--fe-green); border-color: var(--fe-green); }
.fe-btn-outline:hover { background: var(--fe-green); color: var(--fe-on-dark); }
.fe-btn-arrow { width: 16px; height: 16px; flex: 0 0 16px; }
.fe-btn:disabled,
.fe-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }
/* Only the narrowest phones let a long label wrap rather than overflow. */
@media (max-width: 400px) {
  .fe-btn { white-space: normal; text-align: center; }
}

/* ── alerts ── */
.fe-alert {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--fe-radius);
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.fe-alert-error { background: var(--fe-error-bg); color: var(--fe-error); border-color: rgba(180, 35, 24, 0.25); }
.fe-alert-info { background: var(--fe-info-bg); color: var(--fe-green); border-color: rgba(45, 106, 79, 0.25); }
.fe-alert-warn { background: var(--fe-sand); color: var(--fe-earth); border-color: rgba(107, 66, 38, 0.25); }

/* ── footer (templates/components/fe_footer.html): the marketing footer's colours, condensed ── */
.fe-footer {
  margin-top: auto;
  background: var(--fe-green);
  color: var(--fe-on-dark-faint);
  font-size: 13px;
}
.fe-footer-inner {
  max-width: var(--fe-wrap);
  margin: 0 auto;
  padding: 28px var(--fe-wrap-pad) 24px;
}
.fe-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fe-on-dark-line);
}
.fe-footer .fe-logo { gap: 9px; }
/* The footer variant of the mark: translucent tile, the mark at 80%, the wordmark in solid white. */
.fe-footer .fe-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.fe-footer .fe-mark svg { width: 18px; height: 18px; opacity: 0.8; }
.fe-footer .fe-wordmark { font-size: 17px; color: var(--fe-on-dark); }
.fe-footer .fe-wordmark span { color: inherit; }
.fe-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  padding: 0;
}
.fe-footer a { color: var(--fe-on-dark-muted); text-decoration: none; }
.fe-footer a:hover { color: var(--fe-on-dark); text-decoration: underline; }
.fe-footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
.fe-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  padding-top: 18px;
  font-size: 12px;
}
.fe-footer-legal > * + *::before { content: "\00B7"; margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .fe-btn:hover { transform: none; }
}