/* The wider Ethera platform keeps the same quiet navy and warm metal palette. */
.site-header.expanded-header {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0 max(40px, calc((100vw - 1200px) / 2));
  background: #0d1121;
  border-bottom: 1px solid #34384a;
}
.expanded-header .masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 89px;
}
.expanded-header .brand { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.expanded-header .brand img { display: block; width: 160px; height: auto; }
.expanded-header .account { flex-shrink: 0; margin-left: 0; white-space: nowrap; }
.site-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 290px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #30394f;
  border-radius: 7px;
  background: #131a2c;
  color: #a7b2c7;
  text-align: left;
  font-size: 11px;
  transition: border-color 180ms ease, background 180ms ease;
}
.site-search-trigger::before { content: '⌕'; color: #c9ae77; font-size: 23px; line-height: 17px; }
.site-search-trigger:hover { border-color: #816c44; background: #1a2134; }
.site-search-trigger > span { min-width: 0; }
.site-search-trigger kbd { margin-left: auto; padding: 3px 5px; border: 1px solid #394156; border-radius: 4px; color: #8996af; font-family: inherit; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.expanded-header #main-navigation {
  display: flex;
  position: static;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid #ffffff0c;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}
.expanded-header #main-navigation a { position: relative; padding: 10px 11px; border-radius: 5px; color: #aeb9cf; white-space: nowrap; transition: color 180ms ease, background 180ms ease; }
.expanded-header #main-navigation a:hover { color: #e3cd9e; background: #ffffff04; }
.expanded-header #main-navigation a.active,
.expanded-header #main-navigation a[aria-current="page"] { color: #dcc18c; background: #bd934b11; }
.expanded-header #main-navigation a.active::after,
.expanded-header #main-navigation a[aria-current="page"]::after { content: ''; position: absolute; height: 2px; bottom: -12px; left: 11px; right: 11px; background: #b48e4c; }
.expanded-header .menu { flex-shrink: 0; min-width: 38px; min-height: 38px; padding: 8px; border-color: #465069; }

/* Page rhythm and links into adjacent services. */
.platform-page-head { padding-top: 65px; padding-bottom: 42px; }
.platform-page-head h1 { max-width: 1000px; font-size: clamp(42px, 4.8vw, 64px); line-height: 1.07; letter-spacing: -2.8px; margin-bottom: 25px; overflow-wrap: break-word; text-wrap: balance; }
.platform-page-head p { max-width: 720px; font-size: 15px; line-height: 1.8; margin-bottom: 0; }
.platform-subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.platform-subnav a { padding: 11px 15px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; line-height: 1.5; color: #aab6cc; }
.platform-subnav a:hover { color: #e2ca99; background: #1a2337; }
.platform-subnav a[aria-current="page"] { color: #ddbe7d; border-color: #796137; background: #ad874518; }
.platform-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 21px; }
.platform-toolbar .search-box { min-width: 0; }
.platform-toolbar input { min-height: 48px; }
.platform-toolbar > button { flex-shrink: 0; min-height: 48px; font-size: 12px; }
.platform-meta { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.platform-meta button { flex-shrink: 0; font-size: 11px; }
.platform-callout { display: flex; align-items: center; gap: 24px; padding: 29px 32px; margin-bottom: 36px; border: 1px solid #615437; border-radius: 13px; background: radial-gradient(ellipse at 95% 0, #b8924920, transparent 65%), #151b2d; }
.platform-callout > .feature-icon { flex-shrink: 0; font-size: 35px; }
.platform-callout > div { flex: 1; min-width: 0; }
.platform-callout h3 { margin-bottom: 9px; font-size: 20px; }
.platform-callout p { max-width: 760px; font-size: 12px; line-height: 1.7; margin: 0; }
.platform-callout > a, .platform-callout > button { flex-shrink: 0; font-size: 12px; }
.platform-step { display: block; margin-bottom: 23px; color: #b69251; font: 14px/1.3 ui-monospace, monospace; letter-spacing: 2px; }

/* Each category is a usable shelf rather than a second full catalog. */
.application-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.application-family { display: flex; flex-direction: column; min-width: 0; padding: 27px; border: 1px solid #333d52; border-radius: 14px; background: radial-gradient(ellipse at 100% 0, #b38d4610, transparent 60%), #13192c; transition: border-color 200ms ease, transform 200ms ease; }
.application-family:hover { transform: translateY(-3px); border-color: #7e6942; }
.application-family-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 23px; }
.application-family-head .feature-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #826c444f; border-radius: 9px; background: #b8914610; font-size: 25px; }
.application-family h2 { margin-bottom: 12px; font-size: 25px; line-height: 1.2; letter-spacing: -.7px; }
.application-family > p { min-height: 43px; margin-bottom: 19px; font-size: 12px; }
.application-samples { display: grid; gap: 3px; margin-bottom: 21px; }
.application-samples button { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; width: 100%; padding: 9px 0; background: transparent; border-bottom: 1px solid #ffffff09; color: #c1cadb; text-align: left; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.application-samples button span { flex-shrink: 0; color: #97805a; }
.application-samples button:hover { color: #e3c68e; }
.application-family > .text-button { align-self: flex-start; margin-top: auto; padding-top: 10px; text-align: left; font-size: 11px; line-height: 1.5; }

/* A living map of four connected layers. */
.infrastructure-map { position: relative; isolation: isolate; overflow: hidden; padding: 31px 38px 37px; border: 1px solid #62573f; border-radius: 18px; background: radial-gradient(ellipse at 85% 0, #b1904c15, transparent 50%), linear-gradient(120deg, #151c31, #11182a); }
.infrastructure-map::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(#c9af7010 1px, transparent 1px), linear-gradient(90deg, #c9af7010 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(#000, transparent); }
.infra-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 39px; }
.infra-location { font-size: 11px; color: #abafbc; }
.infrastructure-nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-bottom: 36px; }
.infrastructure-nodes::before { content: ''; position: absolute; z-index: -1; top: 38px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, #746244, #b2925377, #746244); }
.infrastructure-nodes button { display: flex; flex-direction: column; align-items: center; gap: 17px; min-width: 0; padding: 0 6px; background: transparent; color: #a8b6ce; font-size: 12px; line-height: 1.5; }
.infrastructure-nodes button > span { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid #51566a; border-radius: 20px; background: linear-gradient(140deg, #263047, #141d31); color: #ada58d; font-size: 30px; box-shadow: 0 8px 23px #06091333; transition: border-color 220ms ease, color 220ms ease, transform 220ms ease; }
.infrastructure-nodes strong { font-weight: 500; }
.infrastructure-nodes button:hover > span { transform: translateY(-3px); border-color: #ae8d50; color: #e1c48b; }
.infrastructure-nodes button[aria-pressed="true"] { color: #e4c890; }
.infrastructure-nodes button[aria-pressed="true"] > span { border-color: #bd9855; background: linear-gradient(140deg, #3f392c, #262638 80%); color: #e0bc75; animation: platform-node-breathe 5s ease-in-out infinite; }
#layer-detail { position: relative; display: grid; grid-template-columns: 83px minmax(0, 1fr); gap: 29px; min-height: 194px; padding: 32px 4px 20px; border-top: 1px solid #ffffff16; }
.layer-number { color: #ba9b5b57; font: 54px/1.1 Georgia, serif; letter-spacing: -2px; }
#layer-detail h2 { font-size: 32px; margin-bottom: 12px; letter-spacing: -1px; }
#layer-detail p { max-width: 790px; margin-bottom: 20px; font-size: 13px; }
#layer-detail .text-button { display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; }
.infra-trace { position: relative; overflow: hidden; height: 3px; margin-top: 22px; border-radius: 2px; background: #6c5b3833; }
.infra-trace i { position: absolute; left: -14%; top: 0; width: 14%; height: 100%; background: linear-gradient(90deg, transparent, #c5a061, transparent); animation: platform-trace 9s linear infinite; }
.infra-trace i:nth-child(2) { animation-delay: -3s; }
.infra-trace i:nth-child(3) { animation-delay: -6s; }
@keyframes platform-node-breathe { 0%, 100% { box-shadow: 0 0 0 5px #bd934b04, 0 0 30px #bd934b05; } 50% { box-shadow: 0 0 0 5px #bd934b0a, 0 0 30px #bd934b15; } }
@keyframes platform-trace { to { left: 110%; } }

/* A choice and its brief stay side by side while space allows. */
.solution-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 25px; }
.solution-choices { display: grid; gap: 10px; align-content: start; }
.solution-choices button { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 99px; padding: 23px; border: 1px solid #313b51; border-radius: 10px; background: #131a2c; text-align: left; transition: border-color 200ms ease, background 200ms ease; }
.solution-choices button > span:first-child { display: grid; place-items: center; flex-shrink: 0; width: 35px; color: #a19c88; font-size: 27px; }
.solution-choices button > div { flex: 1; min-width: 0; }
.solution-choices strong { display: block; margin-bottom: 7px; color: #ccd4e3; font-size: 14px; font-weight: 550; }
.solution-choices small { display: block; font-size: 11px; line-height: 1.65; }
.solution-choices button > span:last-child { color: #837354; }
.solution-choices button:hover { border-color: #7a6a47; background: #1b2235; }
.solution-choices button[aria-pressed="true"] { border-color: #a0844c; background: linear-gradient(120deg, #b08b491b, #182033); }
.solution-choices button[aria-pressed="true"] strong, .solution-choices button[aria-pressed="true"] > span { color: #ddc28b; }
.solution-detail { position: relative; overflow: hidden; min-width: 0; padding: 37px; border: 1px solid #6e5d3f; border-radius: 15px; background: radial-gradient(ellipse at 100% 0, #a5834123, transparent 60%), #141b2d; }
.solution-detail > .eyebrow { position: relative; padding-right: 75px; font-size: 9px; letter-spacing: 1.8px; }
.solution-emblem { position: absolute; top: 23px; right: 28px; color: #c1a05b55; font-size: 70px; line-height: 1; pointer-events: none; }
.solution-detail h2 { position: relative; margin-top: 37px; font-size: 38px; letter-spacing: -1.3px; }
.solution-detail > p { max-width: 420px; font-size: 13px; }
.platform-checks { display: grid; gap: 16px; margin: 28px 0 33px; padding: 0; list-style: none; }
.platform-checks li { position: relative; padding-left: 24px; color: #c1cada; font-size: 13px; line-height: 1.6; }
.platform-checks li::before { content: '✓'; position: absolute; top: 0; left: 0; color: #c5a35f; }
.solution-detail > .primary { max-width: 100%; font-size: 12px; }
.solution-links { display: flex; flex-wrap: wrap; gap: 13px 24px; padding-top: 25px; margin-top: 26px; border-top: 1px solid #ffffff12; }
.solution-links a { font-size: 11px; line-height: 1.6; }

/* Guides can be scanned, saved, and turned into personal checklists. */
.guide-topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 23px; }
.guide-topics button { min-height: 38px; padding: 10px 15px; border: 1px solid #303b51; border-radius: 25px; background: #121a2c; color: #a9b6cd; font-size: 11px; }
.guide-topics button:hover { border-color: #7d6a46; color: #dcc490; }
.guide-topics button[aria-pressed="true"] { color: #e1c48d; border-color: #957c49; background: #b790431a; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-bottom: 34px; }
.guide-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid #354056; border-radius: 13px; background: linear-gradient(135deg, #181f33, #12192b); transition: border-color 200ms ease, transform 200ms ease; }
.guide-card:hover { transform: translateY(-3px); border-color: #8f7444; }
.guide-card-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 25px; }
.guide-card-top .pill { white-space: normal; line-height: 1.4; }
.guide-save { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3d465a; border-radius: 50%; color: #aa9d80; background: transparent; font-size: 21px; }
.guide-save:hover { color: #e3c58a; border-color: #aa8b4e; }
.guide-save[aria-pressed="true"] { color: #d3b16d; background: #bc944718; border-color: #8b713f; }
.guide-card h2 { margin-bottom: 16px; font-size: 24px; line-height: 1.3; letter-spacing: -.6px; }
.guide-card h2 a:hover { color: #e5c98f; }
.guide-card > p { margin-bottom: 26px; font-size: 12px; line-height: 1.75; }
.guide-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 19px; border-top: 1px solid #ffffff12; font-size: 10px; }
.guide-card-bottom > span { color: #8e9bb2; }
.guide-card-bottom a { color: #d4b779; white-space: nowrap; font-size: 11px; }
.guide-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 30px; color: #8694ae; font-size: 11px; }
.guide-breadcrumb a { color: #ceb079; }
.guide-breadcrumb > span { border-left: 1px solid #434555; padding-left: 20px; }
.guide-article-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: 68px; padding-bottom: 60px; }
.guide-article { min-width: 0; }
.guide-article > section { position: relative; padding: 29px 0; border-top: 1px solid var(--line); }
.guide-article .platform-step { margin-bottom: 13px; font-size: 11px; }
.guide-article h2 { font-size: 29px; line-height: 1.25; letter-spacing: -.8px; margin-bottom: 17px; }
.guide-article p { font-size: 14px; line-height: 1.9; margin-bottom: 0; }
.guide-next { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding-top: 22px; }
.guide-next .primary, .guide-next .text-button { font-size: 12px; }
.guide-checklist { position: sticky; top: 24px; min-width: 0; padding: 29px; border: 1px solid #66583c; border-radius: 13px; background: radial-gradient(ellipse at 0 0, #b5944c12, transparent 75%), #141b2e; }
.guide-checklist .eyebrow { font-size: 9px; letter-spacing: 1.7px; }
.guide-checklist h2 { font-size: 28px; margin-bottom: 13px; letter-spacing: -.7px; }
.guide-checklist > p { margin-bottom: 24px; font-size: 11px; }
.guide-checklist label { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid #ffffff10; font-size: 12px; line-height: 1.75; color: #b9c4d7; cursor: pointer; }
.guide-checklist input { width: 17px; height: 17px; margin: 2px 0 0; flex-shrink: 0; accent-color: #c29c56; }
.guide-checklist label:has(input:checked) { color: #dfc38b; }
#guide-progress { display: block; margin: 18px 0 23px; color: #c8a96c; font-size: 11px; }
.guide-checklist > button { width: 100%; justify-content: center; gap: 10px; font-size: 11px; }
.guide-checklist > button[aria-pressed="true"] { border-color: #8c7445; color: #d6bb80; background: #a27e3b12; }
.guide-checklist > a { display: block; margin-top: 20px; color: #c6b287; font-size: 11px; text-align: center; }

/* Practical tools for community organizers. */
.community-paths .info-card { display: flex; flex-direction: column; min-width: 0; background: radial-gradient(ellipse at 0 0, #c0a3670b, transparent 75%), var(--panel); }
.community-paths .feature-icon { font-size: 30px; }
.community-paths h2 { max-width: 280px; font-size: 28px; line-height: 1.2; letter-spacing: -.8px; }
.community-paths p { margin-bottom: 25px; }
.community-paths .primary { align-self: flex-start; margin-top: auto; padding: 12px 15px; font-size: 11px; gap: 8px; }
.template-tabs { display: flex; gap: 5px; padding: 7px; border: 1px solid #354057; border-radius: 10px 10px 0 0; background: #11182a; }
.template-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 12px 16px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #a7b4cb; font-size: 12px; line-height: 1.5; }
.template-tabs button:hover { background: #1b2439; }
.template-tabs button[aria-selected="true"] { border-color: #816c46; color: #e1c58b; background: #b08c4619; }
#community-template { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 40px; padding: 36px; border: 1px solid #354057; border-top: 0; border-radius: 0 0 14px 14px; background: #131a2d; }
#community-template > div { min-width: 0; padding-top: 7px; }
#community-template h3 { font-size: 26px; line-height: 1.3; letter-spacing: -.7px; }
#community-template p { font-size: 12px; }
#community-template .secondary { margin-top: 12px; font-size: 12px; }
#community-template pre { max-width: 100%; margin: 0; padding: 25px; border: 1px solid #2c354b; border-radius: 9px; background: #0d1425; color: #afbcd0; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.copy-status { display: block; margin-top: 17px; color: #c9b380; font-size: 11px; line-height: 1.7; }
.copy-status:empty { display: none; }

/* A compass rendered in the same materials as the rest of the platform. */
.about-statement { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; align-items: center; padding: 48px 45px; border: 1px solid #5d513a; border-radius: 17px; background: radial-gradient(ellipse at 10% 40%, #aa84451e, transparent 50%), #121a2c; }
.about-statement > div { min-width: 0; }
.about-statement h2 { font-size: 36px; line-height: 1.2; }
.about-statement p { font-size: 13px; }
.about-statement p:last-child { margin-bottom: 0; }
.about-compass { position: relative; display: grid; place-items: center; justify-self: center; width: min(100%, 280px); aspect-ratio: 1; border: 1px solid #9a7e4657; border-radius: 50%; color: #bc9858; font: 170px/1 Georgia, serif; text-shadow: 0 0 45px #c69b4333; box-shadow: inset 0 0 45px #b6924710, 0 0 0 17px #b6924705; }
.about-compass::before, .about-compass::after { content: ''; position: absolute; inset: 15px; border: 1px dashed #bb98464a; border-radius: 50%; pointer-events: none; }
.about-compass::before { animation: platform-compass-ring 100s linear infinite; }
.about-compass::after { inset: 35px; border-style: solid; border-color: #a8843929; }
@keyframes platform-compass-ring { to { transform: rotate(360deg); } }

/* Connection labels distinguish local capability from future services. */
.connection-check { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 30px; margin-bottom: 26px; border: 1px solid #726343; border-radius: 13px; background: radial-gradient(ellipse at 95% 20%, #bb98421a, transparent 70%), #151d30; }
.connection-check > div { min-width: 0; }
.connection-check h2 { margin-bottom: 9px; font-size: 27px; letter-spacing: -.7px; }
.connection-check p { font-size: 12px; margin-bottom: 13px; }
.connection-check > button { flex-shrink: 0; font-size: 12px; }
#local-connection-status { display: block; color: #d2b77b; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.connection-card { min-width: 0; padding: 27px; border: 1px solid #344056; border-radius: 12px; background: #131b2d; }
.connection-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 6px 9px; border: 1px solid #3a465a; border-radius: 5px; color: #a8b4c9; font-size: 9px; line-height: 1.5; }
.connection-label::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border: 1px solid #a1adc3; border-radius: 50%; }
.connection-card:nth-child(-n+2) .connection-label { border-color: #706043; background: #b18c4010; color: #d2b777; }
.connection-card:nth-child(-n+2) .connection-label::before { border-color: #c5aa70; background: #c5aa70; }
.connection-card h3 { margin-bottom: 12px; font-size: 19px; line-height: 1.3; }
.connection-card p { font-size: 12px; margin-bottom: 0; }
.connection-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; counter-reset: connection-step; list-style: none; }
.connection-roadmap li { position: relative; min-width: 0; padding: 25px 0 0; border-top: 1px solid #6d5c3b; counter-increment: connection-step; }
.connection-roadmap li::before { content: '0' counter(connection-step); display: block; margin-bottom: 20px; color: #c1a05b; font: 13px/1 ui-monospace, monospace; letter-spacing: 1px; }
.connection-roadmap strong { display: block; font-size: 15px; font-weight: 550; line-height: 1.5; margin-bottom: 12px; }
.connection-roadmap span { display: block; color: var(--muted); font-size: 12px; line-height: 1.8; }

/* Global discovery and the compact homepage size selector. */
.platform-discovery { padding-top: 60px; padding-bottom: 60px; }
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.discovery-grid > a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 27px; border: 1px solid #343c50; border-radius: 12px; background: linear-gradient(125deg, #192033, #12192b); transition: transform 200ms ease, border-color 200ms ease; }
.discovery-grid > a:hover { transform: translateY(-3px); border-color: #927643; }
.discovery-grid > a > span:first-child { display: block; color: #bfa16a; font-size: 25px; }
.discovery-grid > a h3, .discovery-grid > a strong { font-size: 19px; font-weight: 550; margin: 3px 0 0; line-height: 1.3; }
.discovery-grid > a p { margin: 0; color: #9fabbe; font-size: 12px; line-height: 1.7; }
.discovery-grid > a small { margin-top: auto; color: #cbb079; font-size: 11px; }
.featured-size { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.featured-size select { width: 132px; min-height: 40px; padding: 10px 12px; border-color: #5e533d; background-color: #161d2e; color: #d3bb86; font-size: 11px; }

/* The site search uses a single scrolling results area in the dialog. */
dialog:has(#site-query) { width: min(760px, calc(100% - 32px)); max-width: 760px; }
.site-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) 165px; gap: 11px; margin: 25px 0 14px; }
.site-search-controls input, .site-search-controls select { min-width: 0; min-height: 46px; font-size: 12px; }
#site-search-count { font-size: 11px; line-height: 1.6; margin-bottom: 19px; }
#site-search-results { display: grid; gap: 7px; max-height: 48vh; max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: 0 -4px -4px; scrollbar-color: #65593f #101727; scrollbar-width: thin; }
#site-search-results > :is(button, a) { display: flex; justify-content: space-between; align-items: center; gap: 23px; min-width: 0; padding: 17px 18px; border: 1px solid #354057; border-radius: 8px; background: #11192c; color: #cbd3e1; text-align: left; transition: background 180ms ease, border-color 180ms ease; }
#site-search-results > :is(button, a):hover { background: #20283b; border-color: #8a7245; }
#site-search-results > :is(button, a) > span:first-child { min-width: 0; display: grid; gap: 6px; }
#site-search-results small { color: #bfa168; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
#site-search-results strong { font-size: 14px; line-height: 1.45; font-weight: 550; overflow-wrap: anywhere; }
#site-search-results > :is(button, a) > span:first-child > span { color: #9cabc3; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#site-search-results > :is(button, a) > span:last-child { color: #bba271; flex-shrink: 0; }
#site-search-results .empty { padding: 32px 20px; }
.service-checkboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; min-width: 0; margin: 0; padding: 19px 16px; border: 1px solid #3f485b; border-radius: 8px; }
.service-checkboxes legend { padding: 0 7px; color: #c1cadb; font-size: 12px; line-height: 1.6; }
.form-grid .service-checkboxes label { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; color: #bac5d9; font-size: 11px; line-height: 1.5; }
.service-checkboxes input { flex-shrink: 0; width: 15px; height: 15px; margin: 0; accent-color: #b79251; }
.service-checkboxes label:has(input:checked) { color: #ddc18a; }
#project-brief textarea { resize: vertical; min-height: 105px; }
#project-brief .form-grid > label { min-width: 0; }
#project-brief .form-grid input, #project-brief .form-grid select, #project-brief .form-grid textarea { min-width: 0; }

/* Footer groups are distinct destinations, with utilities kept on their own row. */
footer.expanded-footer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); column-gap: 70px; row-gap: 33px; padding-top: 60px; padding-bottom: 45px; }
.expanded-footer .footer-brand { display: block; min-width: 0; }
.expanded-footer .footer-brand .wordmark { display: inline-block; margin-bottom: 20px; }
.expanded-footer .footer-brand p { max-width: 265px; margin: 0; text-align: left; font-size: 12px; line-height: 1.8; }
.expanded-footer .footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 35px; }
.footer-columns section { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-width: 0; }
.footer-columns h3 { margin: 0 0 7px; color: #d7bd88; font-size: 11px; letter-spacing: 1px; font-weight: 550; text-transform: uppercase; }
.footer-columns a { color: #9eaac0; font-size: 11px; line-height: 1.5; }
.footer-columns a:hover { color: #e2c78e; }
.expanded-footer .footer-utilities { display: flex; flex-wrap: wrap; grid-column: 1 / -1; justify-content: flex-start; align-items: center; gap: 16px 25px; padding-top: 25px; border-top: 1px solid var(--line); color: #909db4; }
.footer-utilities a { line-height: 1.5; }
.footer-utilities a:hover { color: #d8bd81; }
.expanded-footer > small { grid-column: 1 / -1; text-align: left; font-size: 10px; margin-top: -13px; color: #7d8aa1; }

@media (max-width: 1100px) {
  .site-header.expanded-header { padding: 0 40px; }
  .expanded-header .masthead { min-height: 82px; gap: 16px; }
  .expanded-header .menu { display: inline-flex; align-items: center; justify-content: center; }
  .expanded-header #main-navigation { display: none; padding: 12px 0 18px; }
  .expanded-header #main-navigation.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .expanded-header #main-navigation a { white-space: normal; line-height: 1.5; padding: 13px 15px; }
  .expanded-header #main-navigation a.active::after, .expanded-header #main-navigation a[aria-current="page"]::after { display: none; }
  .guide-grid, .application-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-article-layout { gap: 32px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .guide-checklist { padding: 23px; }
  .solution-detail { padding: 30px; }
  .solution-choices button { padding: 19px; gap: 12px; }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-paths { gap: 16px; }
  .community-paths .info-card { padding: 24px; }
  .community-paths h2 { font-size: 25px; }
  footer.expanded-footer { column-gap: 40px; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); }
  .expanded-footer .footer-columns { gap: 20px; }
}
@media (max-width: 800px) {
  .platform-page-head { padding-top: 48px; padding-bottom: 35px; }
  .platform-page-head h1 { font-size: 48px; letter-spacing: -2px; }
  .platform-page-head p { font-size: 13px; }
  .site-search-trigger { width: 225px; }
  .infrastructure-map { padding: 27px; }
  .infrastructure-nodes { gap: 12px; }
  .infrastructure-nodes button { font-size: 11px; }
  #layer-detail { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
  #layer-detail h2 { font-size: 29px; }
  .layer-number { font-size: 44px; }
  .solution-layout { grid-template-columns: 1fr; }
  .solution-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-choices button { align-items: flex-start; min-height: 112px; }
  .solution-choices button > span:first-child { width: 25px; font-size: 23px; }
  .solution-choices button > span:last-child { display: none; }
  .solution-detail h2 { margin-top: 25px; }
  .guide-article-layout { grid-template-columns: 1fr; }
  .guide-checklist { position: static; padding: 28px; }
  .guide-checklist > button { width: auto; min-width: 190px; }
  .guide-checklist > a { display: inline-block; margin-left: 20px; }
  .community-paths { grid-template-columns: 1fr; }
  .community-paths h2 { max-width: none; }
  .community-paths .feature-icon { margin-bottom: 18px; }
  #community-template { grid-template-columns: 1fr; gap: 25px; padding: 28px; }
  #community-template > div { max-width: 480px; }
  .about-statement { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); padding: 35px 30px; gap: 35px; }
  .about-compass { font-size: 130px; }
  .about-statement h2 { font-size: 29px; }
  .platform-callout { flex-wrap: wrap; padding: 26px; }
  .platform-callout > div { flex-basis: calc(100% - 70px); }
  .connection-check { align-items: flex-start; flex-direction: column; gap: 22px; }
  .connection-roadmap { gap: 22px; }
  .connection-roadmap strong { font-size: 14px; }
  .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.expanded-footer { grid-template-columns: 1fr; gap: 35px; }
  .expanded-footer .footer-brand p { max-width: 420px; }
}
@media (max-width: 700px) {
  .site-header.expanded-header { padding: 0 20px; }
  .expanded-header .masthead { min-height: 76px; gap: 12px; }
  .expanded-header .brand img { width: 110px; height: auto; }
  .site-search-trigger { width: 39px; min-width: 39px; height: 39px; padding: 0; justify-content: center; flex-shrink: 0; }
  .site-search-trigger > span, .site-search-trigger kbd { display: none; }
  .site-search-trigger::before { font-size: 25px; }
  .expanded-header .account { padding: 10px 11px; font-size: 10px; }
  .expanded-header #main-navigation { font-size: 11px; }
  .platform-page-head { padding-top: 40px; padding-bottom: 32px; }
  .platform-page-head h1 { font-size: clamp(36px, 7vw, 46px); line-height: 1.13; letter-spacing: -1.8px; margin-bottom: 20px; }
  .platform-page-head .eyebrow { font-size: 9px; letter-spacing: 1.7px; line-height: 1.7; }
  .platform-subnav { gap: 5px; padding: 15px 0; }
  .platform-subnav a { padding: 9px 11px; font-size: 10px; }
  .platform-toolbar { flex-wrap: wrap; gap: 12px; }
  .platform-toolbar .search-box { flex-basis: 100%; }
  .platform-toolbar > button { min-height: 42px; font-size: 11px; }
  .platform-meta { font-size: 10px; gap: 12px; }
  .platform-meta button { font-size: 10px; }
  .platform-callout { padding: 23px; gap: 18px; }
  .platform-callout h3 { font-size: 19px; line-height: 1.3; }
  .platform-callout > .feature-icon { font-size: 29px; }
  .platform-callout > a, .platform-callout > button { max-width: 100%; font-size: 11px; }
  .application-families, .guide-grid { gap: 15px; }
  .application-family, .guide-card { padding: 22px; }
  .application-family h2 { font-size: 22px; }
  .application-family > p { min-height: 0; }
  .infrastructure-map { padding: 23px; border-radius: 13px; }
  .infra-map-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 30px; }
  .infra-map-heading .pill { font-size: 9px; }
  .infra-location { font-size: 10px; }
  .infrastructure-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .infrastructure-nodes::before { top: 34px; left: 25%; right: 25%; box-shadow: 0 119px #746244; }
  .infrastructure-nodes button { gap: 10px; }
  .infrastructure-nodes button > span { width: 69px; height: 69px; border-radius: 17px; font-size: 28px; }
  #layer-detail { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding-top: 25px; }
  .layer-number { font-size: 33px; }
  #layer-detail h2 { font-size: 27px; }
  #layer-detail p { font-size: 12px; }
  .solution-choices button { flex-direction: column; gap: 12px; padding: 18px; }
  .solution-choices strong { font-size: 13px; }
  .solution-choices small { font-size: 10px; }
  .solution-detail { padding: 26px; }
  .solution-detail h2 { font-size: 31px; }
  .solution-emblem { font-size: 59px; right: 22px; }
  .solution-detail > .eyebrow { font-size: 8px; letter-spacing: 1.5px; padding-right: 48px; }
  .platform-checks { gap: 14px; margin: 24px 0 27px; }
  .platform-checks li { font-size: 12px; }
  .guide-topics { gap: 6px; }
  .guide-topics button { font-size: 10px; padding: 9px 12px; }
  .guide-card h2 { font-size: 23px; }
  .guide-article-layout { gap: 30px; padding-bottom: 45px; }
  .guide-article h2 { font-size: 26px; }
  .guide-article p { font-size: 13px; }
  .guide-breadcrumb { padding-top: 23px; font-size: 10px; }
  .guide-checklist { padding: 25px; }
  .guide-checklist > a { display: block; margin-left: 0; text-align: left; }
  .template-tabs { gap: 3px; padding: 5px; }
  .template-tabs button { padding: 10px 7px; font-size: 10px; }
  #community-template { padding: 23px; }
  #community-template h3 { font-size: 24px; }
  #community-template pre { padding: 19px; font-size: 10px; }
  .about-statement { grid-template-columns: 1fr; padding: 35px 26px; gap: 37px; }
  .about-compass { width: 210px; font-size: 130px; }
  .about-statement h2 { font-size: 30px; }
  .connection-check { padding: 24px; }
  .connection-check h2 { font-size: 25px; }
  .connection-grid { gap: 15px; }
  .connection-card { padding: 23px; }
  .connection-card h3 { font-size: 18px; }
  .connection-roadmap { grid-template-columns: 1fr; gap: 25px; }
  .connection-roadmap li { padding-top: 22px; }
  .connection-roadmap li::before { margin-bottom: 15px; }
  .connection-roadmap strong { font-size: 16px; }
  .platform-discovery { padding-top: 45px; padding-bottom: 45px; }
  .discovery-grid { gap: 13px; }
  .discovery-grid > a { padding: 23px; }
  .discovery-grid > a h3, .discovery-grid > a strong { font-size: 18px; }
  .featured-size { gap: 11px; }
  .site-search-controls { grid-template-columns: 1fr; gap: 9px; margin-top: 22px; }
  #site-search-results { max-height: 43vh; max-height: 43dvh; }
  #site-search-results > :is(button, a) { padding: 14px; gap: 15px; }
  #site-search-results strong { font-size: 13px; }
  .service-checkboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 17px 13px; }
  footer.expanded-footer { padding: 45px 20px 105px; }
  .expanded-footer .footer-columns { gap: 20px; }
  .footer-columns section { gap: 12px; }
  .footer-columns h3 { font-size: 10px; letter-spacing: .6px; }
  .footer-columns a { font-size: 10px; }
  .expanded-footer .footer-utilities { gap: 17px; font-size: 10px; }
}
@media (max-width: 560px) {
  .application-families, .guide-grid, .connection-grid { grid-template-columns: 1fr; }
  .guide-card { padding: 25px; }
  .guide-card-top { margin-bottom: 22px; }
  .guide-card h2 { max-width: 370px; }
  .application-family { padding: 25px; }
  .application-family h2 { font-size: 25px; }
  .application-family-head { margin-bottom: 20px; }
  .discovery-grid { grid-template-columns: 1fr; }
  .discovery-grid > a { gap: 10px; padding: 24px; }
  .expanded-footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .footer-columns h3 { font-size: 11px; }
  .footer-columns a { font-size: 11px; }
}
@media (max-width: 380px) {
  .expanded-header .masthead { gap: 8px; }
  .expanded-header .brand img { width: 82px; height: auto; }
  .expanded-header .account { padding: 10px 8px; font-size: 9px; }
  .site-search-trigger { min-width: 35px; width: 35px; height: 37px; }
  .expanded-header .menu { min-width: 34px; width: 34px; padding: 6px; }
  .platform-page-head h1 { font-size: 35px; letter-spacing: -1.5px; }
  .platform-page-head .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .platform-page-head .eyebrow::before { width: 15px; flex-shrink: 0; }
  .platform-subnav a { padding: 8px; font-size: 9px; }
  .platform-meta { align-items: flex-start; }
  .infrastructure-map { padding: 21px 18px; }
  .solution-detail { padding: 23px; }
  .solution-choices { gap: 8px; }
  .solution-choices button { padding: 15px; }
  .solution-detail > .eyebrow { max-width: 165px; padding-right: 0; }
  .solution-detail > .primary { padding: 12px 13px; font-size: 11px; }
  .solution-emblem { top: 34px; right: 15px; font-size: 39px; }
  .guide-checklist { padding: 22px; }
  .guide-next .primary { padding: 13px 17px; font-size: 11px; }
  #community-template { padding: 20px 16px; }
  #community-template pre { padding: 15px; font-size: 9px; }
  .about-statement { padding: 30px 22px; }
  .about-compass { width: 180px; }
  .about-statement h2 { font-size: 28px; }
  .service-checkboxes { gap: 13px 8px; }
  .service-checkboxes legend { font-size: 11px; }
  .form-grid .service-checkboxes label { font-size: 10px; gap: 7px; }
  dialog:has(#site-query) { padding: 32px 18px 23px; }
  dialog:has(#site-query) h2 { font-size: 28px; }
  dialog:has(#site-query) > .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
}

/* Motion preferences also remove positional hover effects on the new modules. */
html.ethera-motion-paused .application-family:hover,
html.ethera-motion-paused .guide-card:hover,
html.ethera-motion-paused .discovery-grid > a:hover,
html.ethera-motion-paused .infrastructure-nodes button:hover > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .application-family:hover, .guide-card:hover, .discovery-grid > a:hover, .infrastructure-nodes button:hover > span { transform: none; }
}
/* Leave clear space around the dismiss control on narrow dialogs. */
#modal-content > .eyebrow { padding-right: 25px; line-height: 1.7; }
.discovery-grid > a > .text-button { margin-top: auto; padding-top: 7px; font-size: 12px; }

#site-search-results > a { text-decoration: none; }
#site-search-results > :is(button, a):focus-visible { outline: 2px solid var(--gold, #c9a45c); outline-offset: 2px; }