/* Rules that were byte-identical in all ten pages' <style> blocks: the page
   shell (body, nav, logo, footer) plus the two utilities below. Extracted so a
   nav or footer change is one edit rather than ten.

   Only exact duplicates moved. Rules that already differed per page stayed
   where they were — .eyebrow had six variants across the site, .page-header h1
   four, .demo-btn and .lang-btn two each. Collapsing those would have changed
   how pages look, which is a separate decision from removing duplication.

   Load order: this file, then japanese.css, then mobile.css, then the page's own
   <style>. Page-local rules still win at equal specificity by source order, and
   mobile.css keeps its !important overrides, so nothing about the existing
   cascade changes. */

:root {
  /* Every value below appeared at least eight times across the site. Named for
     the role it plays, not the colour it is, so a rebrand touches one line. */
  --ink: #0A1E3A;              /* headings, primary text */
  --ink-strong: rgba(10, 30, 58, 0.9);
  --ink-muted: rgba(10, 30, 58, 0.6);
  --hairline: rgba(10, 30, 58, 0.1);

  --page-bg: #EAF4FC;          /* the pale blue every page sits on */
  --surface: #FFFFFF;          /* cards, form panels */

  --link: #5B9BD5;             /* nav and footer links */
  --link-hover: #0A1E3A;

  --accent: #AA51EF;           /* the Budd-E product name */
  --accent-strong: #C487FF;    /* hover states */
  --accent-soft: #E1C0FF;      /* demo button fill */
  --accent-ink: #480473;       /* text on the demo button */

  --font-latin: 'Figtree', sans-serif;
  --nav-height: 52px;          /* logo height, which sets the nav's height */
}

/* ── page shell ─────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background-color: var(--page-bg);
  font-family: var(--font-latin);
  animation: pageFadeIn 0.4s ease both;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background-color: var(--page-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── logo ───────────────────────────────────────────────────────────────── */

.logo-wrap {
  position: relative;
  display: inline-block;
}

.logo {
  height: var(--nav-height);
  margin-top: 1px;
  display: block;
  transition: opacity 0.3s ease;
}

.logo-hover {
  position: absolute;
  top: 1px;
  left: 0;
  height: var(--nav-height);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-wrap:hover .logo { opacity: 0; }
.logo-wrap:hover .logo-hover { opacity: 1; }

/* ── nav links ──────────────────────────────────────────────────────────── */

.hamburger-btn { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-left { margin-left: 32px; }
.nav-right { margin-left: auto; }

/* 16px here and 15px in Japanese (japanese.css) are measured against the
   1400px hamburger breakpoint in mobile.css, not chosen by eye. Re-measure on
   index.html — the widest nav — before changing either. */
.nav-links a {
  color: var(--link);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--link-hover); }
.nav-links a.active { color: var(--link-hover); font-weight: 700; }

.lang-btn:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.footer {
  background-color: var(--page-bg);
  border-top: 1px solid var(--hairline);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 32px;
}

.footer-links a {
  color: var(--link);
  text-decoration: none;
  font-size: 15px;
}

.footer-links a.active { color: var(--link-hover); font-weight: 700; }

/* ── utilities ──────────────────────────────────────────────────────────── */

/* Available to a screen reader, absent from the layout. Used for the page
   headings on the pages whose visible title was deliberately removed: without
   one, the document outline starts at a form label and nothing announces which
   page the reader is on. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot wrapper — off-screen rather than display:none, which some bots treat
   as a signal to skip the field. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}