.EForm {max-width: var(--e-measure);}
.EForm .EFormRow {display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px;}
.EForm label {display: block; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.EForm label > span, .EForm label > div {display: block; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.EForm input, .EForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; border: 0; outline: none; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.EForm textarea {min-height: 92px; resize: vertical;}
.EForm label:focus-within {border-color: var(--highlight-color);}
.EForm label:focus-within > span, .EForm label:focus-within > div {color: var(--highlight-color);}
.EFormFull {grid-column: 1 / -1;}
.EForm button, .EForm .Button {margin-top: 32px; min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.EForm button:hover, .EForm .Button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}

@media (max-width: 640px) {
	.EForm .EFormRow {grid-template-columns: 1fr;}
}

.InquirySection {border-top: 1px solid var(--e-hairline, color-mix(in srgb, var(--font-color) 16%, transparent)); padding-top: 72px;}
.InquirySection .SignUpHeading {font-family: var(--raleway); font-weight: 800; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--font-color);}
.InquirySection .SignUpHeading .HighlightColor {color: var(--highlight-color);}
.InquirySection .SignUpSubheading {font-family: var(--raleway); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 24px 0 8px; color: var(--font-color);}
.InquirySection .SignUpText {font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--font-color); max-width: var(--e-measure, 720px); margin: 0 0 8px;}
.InquirySection .EForm {margin-top: 22px;}
.InquirySection .EForm .SignUpText {margin: 20px 0 0;}
.InquirySection .EFormMsg {display: block;}/* QuickContact - editorial contact block: hairline two-column grid (form | info), underline fields,
   michroma labels, pill submit. Used on Contact, Join and (scoped tighter) the homepage. Shared, so
   it lives in Design. Tokens come from Editorial.css (:root), with light-mode firming below. */

.QuickContact {max-width: none; margin: 0;}
.QuickContact h2 {font-family: var(--raleway); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--font-color);}

.QuickContactBoxes {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; margin-top: 20px; align-items: stretch; border-top: 1px solid var(--e-hairline); border-left: 1px solid var(--e-hairline);}

.QuickContact .FormBox {padding: 40px clamp(24px, 3vw, 44px) 44px; border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .FormBox .Text {display: none;}
.QuickContact .FormBox > p {margin: 0 0 20px; max-width: 46ch; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--font-color);}

.QuickContactForm label {display: block; width: auto; height: auto; margin: 0; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.QuickContactForm label + label {margin-top: 0;}
.QuickContactForm label:has(textarea) {height: auto;}
.QuickContactForm label div {display: block; flex: none; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.QuickContactForm input, .QuickContactForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; outline: none; border: 0; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.QuickContactForm textarea {min-height: 92px; resize: vertical;}
.QuickContactForm label:focus-within {border-color: var(--highlight-color);}
.QuickContactForm label:focus-within div {color: var(--highlight-color);}

.QuickContact .ButtonBox {text-align: left; padding-top: 32px;}
.QuickContact .ButtonBox button {min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.QuickContact .ButtonBox button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}
.QuickContact .ButtonBox button:active {box-shadow: none;}

.QuickContact .InfoBoxes {display: flex; flex-direction: column; gap: 0; padding: 0; height: 100%; background: var(--e-soft); border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .InfoBox {min-width: 0; flex: 1; padding: 34px clamp(24px, 2.4vw, 40px); background: none; border: 0; border-radius: 0; font-size: 17px;}
.QuickContact .InfoBox + .InfoBox {border-top: 1px solid var(--e-hairline);}
.QuickContact .InfoBox .Heading {margin-bottom: 16px; font-family: var(--michroma); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight-color);}
.QuickContact .InfoBox a {display: block; line-height: 1.7; color: var(--font-color);}
.QuickContact .InfoBox a:hover {color: var(--highlight-color); text-decoration: none;}
.QuickContact .InfoBox strong {font-weight: 700;}

@media (max-width: 860px) {
	.QuickContactBoxes {grid-template-columns: 1fr;}
	.QuickContact .FormBox {border-right: 1px solid var(--e-hairline);}
}

@media (prefers-color-scheme: light) {
	.QuickContact {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent); --e-soft: color-mix(in srgb, var(--font-color) 5%, transparent);}
}/* Site footer - editorial: hairline top rule, michroma column headings, understated links. On every
   page, so it stays in Design. */
#Footer {margin-top: 120px; line-height: 160%; padding-top: 60px; border-top: 1px solid var(--e-hairline);}
#Footer > div {display: flex; align-items: start; flex-wrap: wrap; gap: 40px;}
#Footer > div > div {flex: 1; min-width: 200px;}

#Footer .Legal {flex: 0 0 100%; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0.5; margin-top: 80px; font-family: var(--michroma); font-size: 12px; letter-spacing: 0.08em;}
#Footer .Legal nav {display: flex; gap: 10px;}

#Footer .Heading {font-family: var(--michroma); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--highlight-color); margin-bottom: 18px;}

#Footer .Explore ul {list-style: none; margin: 0; padding: 0;}
#Footer .Explore a {display: inline-block; padding: 5px 0;}

#Footer .LinkV {display: flex; align-items: center; justify-content: left; font-family: Syncopate, var(--raleway); gap: 20px; font-size: 22px; letter-spacing: 0.4em; font-weight: bold; text-decoration: none; margin-bottom: 40px;}
#Footer .LinkV img {width: 62px; height: auto;}

#Footer .Langs {display: flex; align-items: center; justify-content: left; flex-wrap: wrap; gap: 5px 10px; text-transform: uppercase; margin-top: 40px;}
#Footer .LangsH {flex: 0 0 100%; text-transform: none; font-weight: 500; opacity: 0.5; font-size: smaller; letter-spacing: 0.5px;}

#Footer a[href*="mailto"], #Footer a[href*="tel"] {display: block; width: max-content; padding: 5px 0;}
#Footer address {display: block; font-style: normal; margin-top: 25px;}

#Footer a {position: relative;}
#Footer a::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
#Footer a:hover::after {width: 100%;}
.FAQList {margin-top: 44px;}
.FAQObj {max-width: var(--e-measure);}
.FAQObj + .FAQObj {margin-top: 40px;}
.FAQObj h3 {font-family: var(--raleway); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--font-color);}
.FAQObj h3::before {content: "\201C"; color: var(--highlight-color);}
.FAQObj h3::after {content: "\201D"; color: var(--highlight-color);}
.FAQObj p {font-size: 17px; line-height: 1.7; color: var(--font-color); margin: 0;}
.FAQObj p a {color: var(--highlight-color);}/* Homepage - below-the-fold, page-unique. Turns the article cards (Assets/News.late.css)
   into an even hairline grid to match the editorial look. Logs/updates use Assets/Logs.late.css. */
.HPENewsBlock .HPNews {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--e-hairline); border-left: 1px solid var(--e-hairline);}
.HPENewsBlock .HPNewsItem {background: none; outline: none; border: 0; border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline); border-radius: 0; min-width: 0; transition: background-color 200ms; padding: 0;}
.HPENewsBlock .HPNewsItem:hover {background: var(--e-soft); outline: none;}
.HPENewsBlock .HPNewsItem img {margin-bottom: 0;}
.HPENewsBlock .HPNewsItem .Info {padding: 34px 30px 30px;}
.HPENewsBlock .HPNewsItem h3 {font-family: var(--raleway); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px;}
.HPENewsBlock .HPNewsItem .Text * {font-size: 16px; font-weight: 400; line-height: 1.55;}
.HPENewsBlock .HPNewsItem .ArticleBtn {margin-top: 22px; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--highlight-color); text-decoration: none;}

@media (max-width: 1100px) {
	.HPENewsBlock .HPNews {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px) {
	.HPENewsBlock .HPNews {grid-template-columns: 1fr;}
}
/* Homepage "Logs & Updates" - compact editorial changelog, below-the-fold. Relocated from
   Design/CSS/HP/Logs.css (page-unique; was loaded on every page). Deliberately smaller than the
   articles grid: a single narrow timeline column with a hairline spine, michroma version/date meta
   and a short lede per release. */
.HPLogs {margin-top: 40px;}
.HPUpdates {list-style: none; margin: 0; padding: 0; max-width: 640px; border-left: 1px solid var(--e-hairline);}
.HPUpdate {position: relative;}
.HPUpdate + .HPUpdate {border-top: 1px solid var(--e-hairline);}

.HPUpdateLink {display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head go" "body go"; column-gap: 18px; align-items: start; padding: 22px 20px 22px 28px; text-decoration: none; color: var(--font-color); transition: background-color 180ms;}
.HPUpdateLink::before {content: ''; position: absolute; left: -1px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--highlight-color); transform: translateX(-50%) scale(0.55); transition: transform 100ms;}
.HPUpdateLink:hover {background: var(--e-soft);}
.HPUpdateLink:hover::before {transform: translateX(-50%) scale(1);}

.HPUpdateHead {grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;}
.HPUpdateVersion {font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--highlight-color);}
.HPUpdateDate {font-family: var(--michroma); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 50%, transparent);}

.HPUpdateBody {grid-area: body; margin-top: 8px; min-width: 0;}
.HPUpdateName {display: block; font-family: var(--raleway); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 5px; color: var(--font-color);}
.HPUpdateText {display: block; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--font-color) 80%, transparent);}
.HPUpdateText, .HPUpdateText * {margin: 0; font-size: 15px;}
.HPUpdateText > * + * {margin-top: 0.5em;}

.HPUpdateGo {grid-area: go; align-self: center; font-size: 18px; color: var(--highlight-color); opacity: 0; transform: translateX(-6px); transition: opacity 180ms, transform 180ms;}
.HPUpdateLink:hover .HPUpdateGo {opacity: 1; transform: translateX(0);}

@media (max-width: 950px) {
	.HPLogs {padding-left: 0;}
}

@media (max-width: 800px) {
	.HPLogs {flex: 0 0 100%;}
}

@media (max-width: 640px) {
	.HPUpdateLink {grid-template-columns: 1fr; grid-template-areas: "head" "body"; padding: 20px 4px 20px 24px;}
	.HPUpdateGo {display: none;}
}
/* Homepage articles grid - below-the-fold, page-unique. Relocated from Design/CSS/HP/News.css (was
   loaded on every page for a card style only the homepage still uses; the editorial hero override
   lives in HPEditorial.late.css and expects these base rules). */
.HPNews {display: flex; flex-wrap: wrap; gap: 15px 3%;}
.HPNewsItem {flex: 1; background: #1D1D1D; border-radius: 5px; outline: 1px solid rgba(255,255,255,0.1); outline-offset: -1px; transition: outline-color 160ms; padding: 34px 32px; display: flex; flex-direction: column; min-width: min(340px, 100%);}
.HPNewsItem:hover {outline-color: rgba(255,255,255,0.2);}
.HPNewsItem img {max-width: 100%; height: auto; margin-bottom: 20px; border-radius: 5px; aspect-ratio: 16 / 9; object-fit: cover; object-position: center;}
.HPNewsItem h3 {font-size: 26px; font-weight: 600; margin-bottom: 12px; margin-top: 0; letter-spacing: 1px; line-height: 125%;}
.HPNewsItem .Text {flex: 1; margin-bottom: 15px;}
.HPNewsItem .Text * {font-weight: 300; font-size: 20px;}
.HPNewsItem .ArticleBtn {display: block; margin-left: auto; margin-right: 0; font-weight: 600; text-decoration: underline;}

@media (max-width: 800px) {
	.HPNews {flex: 0 0 min(100%, 500px);}
}

@media (prefers-color-scheme: light) {
	.HPNewsItem {background: linear-gradient(225deg, #E3EDF8 0%, #C5D7EB 100%); border: 1px solid rgba(0, 0, 0, 0.1);}
}
/* Newsletter sign-up. Self-contained so it looks identical wherever it is dropped (HP, article,
   anywhere). Uses the global editorial primitives (.Eyebrow / .Lede / .EForm from Editorial.css) and
   adds only the container, heading and the "Weekly" proof pill. Loaded after the document (.late). */
.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 16%, transparent); --e-measure: 720px; max-width: var(--e-measure);}
.Newsletter h2 {font-family: var(--raleway); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(28px, 4.4vw, 48px); margin-bottom: 26px;}
.Newsletter .HighlightColor {color: var(--highlight-color);}
.NewsletterProof {display: inline-flex; align-items: center; gap: 11px; margin: 28px 0 0; padding: 6px 18px 6px 7px; border: 1px solid var(--e-hairline); border-radius: 999px; background: var(--e-soft); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--font-color);}
.NewsletterProofTag {display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: #41D857; color: #111; font-weight: 700; white-space: nowrap;}
.Newsletter .NewsletterForm {margin-top: 30px;}
.Newsletter .ButtonBox {text-align: left; padding-top: 8px;}

/* The global light theme flattens --highlight-color to translucent grey; the newsletter identity is
   green, so restore a readable brand green wherever the component appears. */
@media (prefers-color-scheme: light) {
	body:has(.Newsletter) {--highlight-color: #128A38;}
	.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent);}
}