:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.era4-hero {
  /* Hero — temporary full-viewport landing: dark dot surface with edge fade */

/* Local tokens */
--era4-hero-bg: var(--bg-ultra-dark);
--era4-hero-fg: var(--text-light);
--era4-hero-dot: color-mix(in oklch, var(--primary-light) 16%, transparent);
--era4-hero-dot-gap: var(--space-s);
--era4-hero-glow: color-mix(in oklch, var(--primary) 12%, transparent);
--era4-hero-wash: color-mix(in oklch, var(--primary) 6%, transparent);
--era4-hero-fade: 30%;
--era4-hero-fade-bottom: 45%;
--era4-hero-size: 100dvh;

/* Layout */
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-block-size: var(--era4-hero-size);
max-block-size: var(--era4-hero-size);
block-size: var(--era4-hero-size);
overflow: hidden;

/* Color */
background-color: var(--era4-hero-bg);
background-image:
  radial-gradient(46% 46% at 50% 42%, var(--era4-hero-glow) 0%, transparent 100%),
  linear-gradient(to bottom, transparent 0%, var(--era4-hero-wash) 100%),
  radial-gradient(circle, var(--era4-hero-dot) 1px, transparent 1.5px);
background-size: auto, auto, var(--era4-hero-dot-gap) var(--era4-hero-dot-gap);
background-position: center;
color: var(--era4-hero-fg);
color-scheme: dark;

/* Edge fade overlay */
&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--era4-hero-bg) 0%, transparent var(--era4-hero-fade), transparent calc(100% - var(--era4-hero-fade)), var(--era4-hero-bg) 100%),
    linear-gradient(to top, var(--era4-hero-bg) 0%, transparent var(--era4-hero-fade-bottom)),
    linear-gradient(to bottom, var(--era4-hero-bg) 0%, transparent var(--era4-hero-fade));
}
}
.era4-hero__content {
  /* Hero content — centered stack inside the Etch container */

/* Local tokens */
--era4-hero-content-gap: var(--space-m);

/* Layout */
display: flex;
flex-direction: column;
align-items: center;
gap: var(--era4-hero-content-gap);
text-align: center;
}
.era4-hero__kicker {
  /* Hero descriptor */

/* Local tokens */
--era4-hero-kicker-size: var(--text-s);
--era4-hero-kicker-color: var(--primary);

/* Layout */
margin-block: 0;
margin-inline: 0;

/* Type */
font-size: var(--era4-hero-kicker-size);
font-weight: var(--heading-font-weight);
letter-spacing: 0.08em;
text-transform: uppercase;

/* Color */
color: var(--era4-hero-kicker-color);
}
.era4-hero__title {
  /* Hero heading */

/* Local tokens */
--era4-hero-title-size: calc(var(--h1) * 1.6);
--era4-hero-title-color: var(--text-light);
--era4-hero-title-measure: var(--content-width);

/* Layout */
margin-block: 0;
margin-inline: 0;
max-inline-size: var(--era4-hero-title-measure);

/* Type */
font-size: var(--era4-hero-title-size);
font-weight: var(--heading-font-weight);
line-height: var(--heading-line-height);
text-wrap: balance;

/* Color */
color: var(--era4-hero-title-color);
}
.era4-hero__accent {
  /* Hero heading accent */

/* Local tokens */
--era4-hero-accent-color: var(--primary);

/* Layout */
display: block;

/* Color */
color: var(--era4-hero-accent-color);
}
.era4-hero__lede {
  /* Hero lede */

/* Local tokens */
--era4-hero-lede-size: var(--text-l);
--era4-hero-lede-color: var(--text-light-muted);
--era4-hero-lede-measure: calc(var(--content-width) * 0.6);

/* Layout */
margin-block: 0;
margin-inline: auto;
max-inline-size: var(--era4-hero-lede-measure);

/* Type */
font-size: var(--era4-hero-lede-size);

/* Color */
color: var(--era4-hero-lede-color);
}
.era4-hero__cta {
  /* Hero contact button — dark primary, original text color */

/* Local tokens */
--btn-text-color: var(--primary-ultra-light);
--btn-text-color-hover: var(--primary-ultra-light);
--btn-font-weight: var(--heading-font-weight);
--btn-padding-block: var(--space-s);
--btn-padding-inline: var(--space-l);
}