/* SyncGrid marketing site — plain CSS, no build step.
   Tokens taken from the GRIDDOT theme (griddot.json); component classes
   (.btn/.nav/.tag/.grayscale) ported from the design-system source. */

/* Google Fonts is the primary source (linked in index.html — likely already
   CDN-cached in the visitor's browser). These faces are the offline fallback,
   registered under a distinct family so they only kick in when "Outfit" is
   unavailable. */
@font-face {
  font-family: "Outfit Local";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit Local";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #F6F6F6;
  --color-surface: #ECECEC;
  --color-text: #252824;
  --color-accent: #408100;
  --color-accent-600: #3C7600;
  --color-accent-700: #2E5B00;
  --color-accent-100: #F7FCF2;
  --color-accent-200: #E2F3CC;
  --color-accent-300: #C6E89C;
  --color-accent-800: #234500;
  --color-divider: rgba(37, 40, 36, 0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-heading: "Outfit", "Outfit Local", system-ui, sans-serif;
  --font-body: "Outfit", "Outfit Local", system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — skip link — */
.skip-link {
  border-radius: var(--radius-sm);
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 12px 18px;
}
.btn svg { display: block; }
.btn { border-radius: var(--radius-sm); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); background: #FFFFFF; }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, #FFFFFF); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, #FFFFFF); }

/* — navigation — */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bg);
  padding: 12px max(24px, calc((100% - 1200px) / 2 + 24px));
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
}
.nav-brand .mark { width: 14px; height: 14px; background: var(--color-accent); display: inline-block; border-radius: 4px; }
.nav-links { display: flex; align-items: center; gap: 16px; }
.nav a[data-navlink],
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; }
.nav-links a:hover,
.nav a[data-navlink][aria-current="page"] { color: var(--color-accent); }
.nav-toggle {
  border-radius: var(--radius-sm);
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  padding: 8px;
  cursor: pointer;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
    padding: 8px 24px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 8px 0; font-size: 15px; }
}

/* — tags — */
.tag {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* — layout helpers — */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}
.band-grey { background: var(--color-surface); }
.section-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 600;
  margin-bottom: 24px;
}
.section-h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: #0D0D0D;
}
.section-intro {
  font-size: 16px;
  line-height: 27px;
  color: #333;
  max-width: 62ch;
  margin: 0 0 48px;
}
.todo-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #737373;
  margin: 20px 0 0;
}

/* — hero — */
.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 66px);
}
.hero-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vh, 72px) 0 clamp(48px, 8vh, 96px);
}
.hero-copy { max-width: 640px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 16px;
  border: 1px solid var(--color-accent-300);
  border-radius: 999px;
  background: var(--color-accent-100);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-accent-700);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); display: inline-block; }
.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: #0D0D0D;
}
.hero h1 > span { display: block; }
.hero h1 .accent { display: inline; color: var(--color-accent); }
.hero-lead {
  font-size: 18px;
  line-height: 30px;
  color: #333;
  margin: 28px 0 0;
  max-width: 50ch;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* — problem — white band — */
.problem { background: #FFFFFF; border-bottom: 2px solid var(--color-divider); }
.problem .container {
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.problem-card { border-top: 2px solid var(--color-divider); padding-top: 24px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.problem-card svg { margin-bottom: 16px; }
.problem-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #0D0D0D;
}
.problem-card p {
  font-size: 14.5px;
  line-height: 24px;
  color: rgba(37, 40, 36, 0.75);
  margin: 0;
}
.problem-card .solve { margin-top: 16px; }
.solve-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
  margin-bottom: 6px;
}

/* — video placeholder — */
.video {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #252824;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 246, 246, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 246, 246, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play {
  border-radius: 50%;
  position: relative;
  width: 64px;
  height: 64px;
  background: var(--color-accent);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play:hover { background: var(--color-accent-600); }
.video-play .tri {
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--color-bg);
  margin-left: 4px;
  display: block;
}
.video-label {
  position: absolute;
  left: 20px;
  bottom: 16px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(246, 246, 246, 0.6);
}

/* — use cases — */
#use-cases .container { padding-bottom: clamp(40px, 6vh, 56px); }
.usecase-action { margin: 20px 0 0; }
.usecases-kicker {
  margin: 0;
  padding-top: clamp(32px, 5vh, 48px);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 600;
}
.usecase {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 6vh, 64px) 0;
}
.usecase.first { padding: clamp(36px, 5vh, 56px) 0 clamp(40px, 6vh, 64px); }
.usecase.bordered { border-top: 2px solid var(--color-divider); }
.usecase.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.usecase-eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 16px;
  color: var(--color-text);
  font-feature-settings: 'tnum' 1;
}
.usecase-eyebrow .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 12px;
}
.usecase h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: #0D0D0D;
}
.usecase p.body,
.usecase .body p {
  font-size: 15.5px;
  line-height: 26px;
  color: rgba(37, 40, 36, 0.78);
  margin: 16px 0 0;
}
.usecase ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usecase ul li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 24px;
  color: #333;
}
.usecase ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--color-accent);
  flex-shrink: 0;
  transform: translateY(-1px);
}

/* — product / solution architecture — */
.product .container {
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
.arch { display: flex; flex-direction: column; }
.arch-conn { display: flex; justify-content: center; padding: 6px 0; color: var(--color-accent); }
.stage { border: 2px solid var(--color-divider); background: #FFFFFF; border-radius: var(--radius-md); overflow: hidden; }
.stage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: #252824;
}
.stage-num {
  border-radius: var(--radius-sm);
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
}
.stage-tt { display: flex; flex-direction: column; gap: 1px; }
.stage-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #90D44C;
}
.stage-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #F6F6F6;
  line-height: 1.15;
}
.stage-tag { margin-left: auto; font-size: 13px; color: rgba(246, 246, 246, 0.65); text-align: right; }
.stage-body {
  padding: 16px 20px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.stage-body.single { display: flex; flex-wrap: wrap; gap: 24px; }
.grp { background: var(--color-bg); border: 1px solid var(--color-divider); padding: 12px 14px 14px; border-radius: var(--radius-sm); }
.grp-name {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
  color: #0D0D0D;
}
.subl {
  margin: 12px 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #737373;
}
.subl:first-of-type { margin-top: 0; }
.subl .fl { color: var(--color-accent-700); text-transform: none; letter-spacing: 0; }
.mods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seq-arw { color: #737373; flex: none; }
.mod {
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.mod:hover { background: var(--color-accent-100); }
.arch-pop {
  border-radius: var(--radius-md);
  position: fixed;
  z-index: 80;
  width: 270px;
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 12px 32px -12px rgba(37, 40, 36, 0.35);
  padding: 14px 16px;
  display: none;
}
.arch-pop.show { display: block; }
.arch-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.arch-pop-name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: #0D0D0D; flex: 1; }
.arch-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.arch-pop li {
  font-size: 12.5px;
  line-height: 1.45;
  color: #333;
  position: relative;
  padding-left: 14px;
}
.arch-pop li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* — team — */
.team .container {
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: clamp(72px, 11vh, 128px);
}
.team-intro {
  font-size: 16px;
  line-height: 27px;
  color: #333;
  max-width: 62ch;
  margin: 0 0 48px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
}
.team-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #E2E1DF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 40px;
  color: #9A9994;
}
.team-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 16px 0 0;
  color: #0D0D0D;
}
.team-card .role {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 600;
  margin: 6px 0 0;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(48px, 7vh, 64px);
}
.why-grid > div { border-top: 2px solid var(--color-divider); padding-top: 20px; }
.why-grid h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: #0D0D0D;
}
.why-grid p {
  font-size: 14.5px;
  line-height: 24px;
  color: rgba(37, 40, 36, 0.7);
  margin: 10px 0 0;
}

/* — resources — grey band — */
.resources .container {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: clamp(40px, 5vw, 80px);
}
.resource-list { display: flex; flex-direction: column; gap: 20px; }
.resource-card {
  border-radius: var(--radius-md);
  display: flex;
  gap: 20px;
  align-items: center;
  background: #FFFFFF;
  padding: 24px;
  text-decoration: none;
  color: inherit;
}
.resource-card:hover { background: var(--color-accent-100); }
.resource-card strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #0D0D0D;
}
.resource-card .desc {
  display: block;
  font-size: 14px;
  color: rgba(37, 40, 36, 0.7);
  margin-top: 4px;
}

/* — resellers — dark strip — */
.resellers {
  background: #252824;
  color: var(--color-bg);
}
.resellers .container {
  padding-top: clamp(48px, 7vh, 72px);
  padding-bottom: clamp(48px, 7vh, 72px);
}
.section-kicker.on-dark { color: #90D44C; margin-bottom: 20px; }
.reseller-lead {
  color: rgba(246, 246, 246, 0.85);
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 28px;
  max-width: 60ch;
}
/* Two equal columns spanning the container, matching the resource cards above.
   The min() lets a track shrink under 320px, which a bare minmax() refuses to do
   and which would otherwise overflow a 320px screen. */
.reseller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}
.reseller-card {
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 246, 246, 0.25);
  padding: 28px 40px;
  text-decoration: none;
  color: inherit;
}
.reseller-card:hover { border-color: #90D44C; background: rgba(246, 246, 246, 0.06); }
/* Both lockups are dark ink drawn for light backgrounds, so on this dark strip they
   are knocked out to the off-white the strip already uses. A white plate behind them
   reads as a sticker pasted onto the dark band. */
.reseller-card img {
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}
.reseller-card:hover img { opacity: 1; }
/* Heights are per-logo, not shared, so the two wordmarks match in cap height:
   Enerdat's caps fill 78% of its box, Landis+Gyr's only 54% because its box also
   holds a tagline line, so Landis+Gyr needs the taller box to read the same size. */
.logo-enerdat { height: 34px; }
.logo-eykon { height: 49px; }

/* — footer — */
footer { background: #252824; color: rgba(246, 246, 246, 0.7); border-top: 1px solid rgba(246, 246, 246, 0.2); }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px clamp(20px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  font-size: 13px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 700;
}
.footer-brand .mark { width: 12px; height: 12px; background: #90D44C; display: inline-block; border-radius: 3px; }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a { color: inherit; text-decoration: none; }
.footer-nav a:hover { color: #90D44C; }
.footer-copy { margin-left: auto; }
.footer-copy a { color: #90D44C; }

/* — sizing calculator (sizing.html) — the only page with form controls, so all of it lives here — */
.sizing { background: #FFFFFF; border-bottom: 2px solid var(--color-divider); }
.sizing .container,
.sizing-results .container {
  padding-top: clamp(40px, 6vh, 64px);
  padding-bottom: clamp(48px, 7vh, 80px);
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
}
.field > .hint { font-size: 12.5px; color: #737373; }

input[type="number"],
input[type="text"],
select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  background: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 9px 12px;
  width: 100%;
  min-width: 0;
}
input[type="number"]:hover,
input[type="text"]:hover,
select:hover { border-color: var(--color-accent); }
input[type="number"]:invalid,
input[type="text"]:invalid { border-color: #A32000; }

.retention-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
  max-width: 720px;
  margin-bottom: clamp(32px, 4vh, 48px);
}

.group-list { display: flex; flex-direction: column; gap: 20px; }
.group-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: var(--color-accent-100);
  padding: 20px clamp(16px, 2vw, 24px);
}
.group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.group-head .group-index {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  color: var(--color-accent-700);
  flex-shrink: 0;
}
.group-head .field { flex: 1 1 auto; }
/* Group fields and the source-group rows below them share the same grid and the same trailing 88px track for the
   Remove button, so the card has one right edge. Source rows carry one field more, so their fields are narrower
   rather than aligned with the group's. */
.group-grid,
.source-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) 88px;
  gap: 18px clamp(16px, 2vw, 28px);
}
.source-row { grid-template-columns: repeat(4, minmax(110px, 1fr)) 88px; }
.btn-remove {
  border-radius: var(--radius-sm);
  align-self: flex-end;
  flex-shrink: 0;
  border: 1px solid var(--color-divider);
  background: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  cursor: pointer;
}
.btn-remove:hover { background: color-mix(in srgb, var(--color-text) 7%, #FFFFFF); }
.btn-remove:disabled { opacity: 0.4; cursor: not-allowed; }
.sizing-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

.source-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
}
.source-list-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
  margin-bottom: -4px;
}
.source-row { align-items: start; }
/* Occupies exactly one label's worth of height, so the button lines up with the inputs and not with their labels */
.label-spacer { display: block; font-size: 12px; line-height: 1.55; }
.source-row .btn-remove { width: 100%; }
.btn-add-source {
  border-radius: var(--radius-sm);
  margin-top: 14px;
  border: 1px dashed var(--color-accent);
  background: transparent;
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  cursor: pointer;
}
.btn-add-source:hover { background: var(--color-accent-200); }

.sizing-results { background: var(--color-surface); }
.result-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  margin-bottom: 32px;
}
.result-total .value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0D0D0D;
}
.result-total .value-note { font-size: 14.5px; color: #333; }

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

.table-scroll { overflow-x: auto; }
.result-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 860px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.result-table th,
.result-table td { padding: 9px 9px; text-align: right; white-space: nowrap; }
.result-table th:first-child,
.result-table td:first-child { text-align: left; white-space: normal; min-width: 130px; padding-left: 0; }
.result-table th:last-child,
.result-table td:last-child { padding-right: 0; }
.result-table thead th {
  border-bottom: 2px solid var(--color-divider);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.result-table tbody td { border-bottom: 1px solid rgba(37, 40, 36, 0.15); }
.result-table tbody tr.group-row td { font-weight: 600; color: #0D0D0D; }
.result-table tbody tr.source-result-row td { border-bottom: none; color: rgba(37, 40, 36, 0.7); }
.result-table tbody tr.source-result-row td:first-child { padding-left: 18px; font-weight: 400; }
.result-table tbody tr.source-result-row + tr.group-row td { border-top: 1px solid rgba(37, 40, 36, 0.15); }
.result-table tfoot td {
  border-top: 2px solid var(--color-divider);
  font-weight: 700;
  color: #0D0D0D;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vh, 64px);
  align-items: start;
}
.notes-grid h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
  color: #0D0D0D;
}
.notes-grid ul { margin: 0; padding-left: 20px; }
.notes-grid li { font-size: 14px; line-height: 23px; color: #333; margin-bottom: 8px; }
.notes-grid li:last-child { margin-bottom: 0; }

/* The exclusions are the part that gets a deployment sized wrong, so they read as a caution, not as prose */
.note-warning {
  border-radius: var(--radius-md);
  border: 1px solid #E0A36A;
  border-left: 4px solid #C25E10;
  background: #FDF4EC;
  padding: 20px clamp(16px, 2vw, 24px);
}
.note-warning h3 { color: #8A4108; }
.note-warning h3 svg { flex-shrink: 0; }
.note-warning li { color: #6E3606; }
.note-warning li::marker { color: #C25E10; }

.note-real-data {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-accent);
  background: #FFFFFF;
  padding: 20px clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}
.note-real-data h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
  color: #0D0D0D;
}
.note-real-data p { margin: 0; font-size: 14px; line-height: 23px; color: #333; }

/* — responsive — */
@media (max-width: 860px) {
  .usecase,
  .usecase.flip { grid-template-columns: 1fr; }
  .usecase .media { order: -1; }
  .resources-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .group-head { flex-wrap: wrap; }
  /* The shared 4-track template cannot shrink below ~500px, so below that the fields simply stack */
  .group-grid,
  .source-row { grid-template-columns: minmax(0, 1fr); }
  .source-row {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-divider);
  }
  .source-row:last-child { padding-bottom: 0; border-bottom: none; }
  .label-spacer { display: none; }
  .source-row .btn-remove { width: auto; justify-self: start; }
}
@media (max-width: 460px) {
  .resources-grid { grid-template-columns: 1fr; }
  .resource-card { flex-direction: row; }
  /* Full-size Enerdat is wider than a 320px card's content box, so the logos step
     down one notch. Both scale by the same factor to keep their cap heights matched. */
  .reseller-card { padding: 24px; }
  .logo-enerdat { height: 27px; }
  .logo-eykon { height: 39px; }
}