/* Nomina MCP — product site. Design tokens and patterns mirror nomina.io (Webflow build). */

@font-face { font-family: "Laygrotesk"; src: url("../fonts/LayGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Laygrotesk"; src: url("../fonts/LayGrotesk-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Laygrotesk"; src: url("../fonts/LayGrotesk-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Laygrotesk"; src: url("../fonts/LayGrotesk-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Onsitemono"; src: url("../fonts/OnsiteMono-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Onsitemono"; src: url("../fonts/OnsiteMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onsitemono"; src: url("../fonts/OnsiteMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --background-base: #0b080a;
  --core-black: #1c1a1b;
  --text-base: #fff;
  --secondary-text: #9b9b9b;
  --interface: #b3b3b3;
  --alloy-gray: #939292;
  --nomina-green: #a8ff99;
  --alt-purple: #dbc4fb;
  --alt-horizon: #c7effb;
  --alt-orange: #f97b73;
  --rise: #019157;
  --surge: #f42516;
  --stroke-base: #ffffff14;
  --hover-1: #ffffff14;
  --hover-2: #ffffff1f;
  --main-padding: 1.5rem;
  --max-width: 70rem;
  --font-display: "Laygrotesk", Arial, sans-serif;
  --font-mono: "Onsitemono", "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background-base);
  color: var(--text-base);
  font-family: var(--font-display);
  font-size: .875rem;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-base); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--nomina-green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: .75rem; left: .75rem; z-index: 2000; width: auto; height: auto; margin: 0; padding: .75rem 1rem; clip: auto; overflow: visible; background: var(--nomina-green); color: var(--background-base); font-weight: 500; }

/* Type scale (nomina.io classes) */
.text-h0 { letter-spacing: .01em; text-transform: uppercase; font-size: 4.5rem; font-weight: 600; line-height: 1; }
.text-h1 { letter-spacing: .01em; text-transform: uppercase; font-size: 2.5rem; font-weight: 600; line-height: 1.05; }
.text-h2 { letter-spacing: .01em; text-transform: uppercase; font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.text-h3 { letter-spacing: .01em; text-transform: uppercase; font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.text-sub { color: var(--secondary-text); letter-spacing: .01em; font-size: 1.25rem; line-height: 1.3; }
.text-body { color: var(--secondary-text); letter-spacing: .01em; font-size: 1rem; line-height: 1.33; }
.text-mono { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.sentence { text-transform: none; font-weight: 500; }
.mono-inline { font-family: var(--font-mono); font-size: .9em; letter-spacing: .01em; color: var(--interface); }

/* Motifs */
.main-dot { flex: none; aspect-ratio: 1; width: .5rem; background-color: var(--nomina-green); }
.main-dot.purple { background-color: var(--alt-purple); }
.main-dot.blue { background-color: var(--alt-horizon); }
.main-dot.orange { background-color: var(--alt-orange); }
.line { width: 100%; height: 1px; background-color: var(--stroke-base); }

/* Buttons */
.button-wrap {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  position: relative; z-index: 1;
  padding: .825rem 1.25rem;
  background-color: var(--nomina-green); color: var(--background-base);
  font-weight: 500; font-size: .875rem; line-height: 1; white-space: nowrap;
  transition: background-color 50ms linear;
}
.button-wrap:hover { background-color: var(--alt-purple); }
.button-wrap.secondary { background-color: var(--text-base); }
.button-wrap.secondary:hover { background-color: var(--nomina-green); }
.button-wrap.big { padding: 1.25rem 2rem; font-size: 1rem; }
.button_icon { width: 1rem; height: 1rem; }
.button_cluster { display: flex; align-items: center; gap: .75rem; }
.button_cluster.large { gap: var(--main-padding); flex-wrap: wrap; }
.arrow-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--nomina-green); font-size: 1rem; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link svg { width: 1rem; height: 1rem; }

/* Nav */
.nav_wrap {
  position: fixed; inset: 0 0 auto 0; z-index: 1003;
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: var(--main-padding);
  background-color: var(--background-base);
  border-bottom: 1px solid var(--stroke-base);
}
.nav_left { display: flex; align-items: center; }
.nav_logo_wrap { display: flex; align-items: center; gap: .625rem; }
.nav_logo_hold { width: 1.875rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.nav_logo_hold svg { width: 1.6rem; height: auto; }
.nav_logo_type { width: 6.5rem; height: auto; }
.nav_logo_tag { margin-left: .75rem; padding: .3rem .5rem; border: 1px solid var(--stroke-base); color: var(--secondary-text); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.nav_cluster { display: flex; margin-right: 2rem; }
.nav_item { display: flex; align-items: center; gap: .5rem; padding: .825rem 1rem; color: var(--secondary-text); font-size: 1rem; transition: all 50ms; }
.nav_item:hover { background-color: var(--hover-1); color: var(--text-base); }
.nav_right { display: flex; align-items: center; }
.nav_mob_menu_button { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; }
.nav_mob_menu_button span { display: block; width: 1.25rem; height: 2px; background: var(--text-base); box-shadow: 0 -6px 0 var(--text-base), 0 6px 0 var(--text-base); }
.nav_mobile_menu { display: none; position: fixed; inset: 0; z-index: 1002; padding: 7rem var(--main-padding) var(--main-padding); background-color: var(--background-base); flex-flow: column; gap: 1.5rem; }
.nav_mobile_menu.open { display: flex; }
.mobile_menu_link { color: var(--text-base); }

/* Page */
.page_wrap { display: flex; flex-flow: column; align-items: center; width: 100%; overflow-x: clip; }
.section { width: 100%; max-width: var(--max-width); padding: 0 var(--main-padding); scroll-margin-top: 6.5rem; }
.faq, .cta { scroll-margin-top: 6.5rem; }
.header_row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; width: 100%; margin-bottom: 2rem; }
.header_stack { display: flex; flex-flow: column; gap: 1rem; }
.header_stack .text-sub { max-width: 44ch; }

/* Hero */
.hero {
  position: relative; z-index: 1; width: 100%; min-height: 100vh;
  padding: 7.8rem var(--main-padding) var(--main-padding);
  display: flex; gap: var(--main-padding); align-items: center; justify-content: space-between;
  background-image: linear-gradient(150deg, var(--background-base) 38%, #01915738);
}
.hero_inner { display: flex; gap: 3rem; align-items: center; justify-content: space-between; width: 100%; max-width: 88rem; margin: 0 auto; }
.hero_stack { position: relative; z-index: 2; display: flex; flex-flow: column; gap: var(--main-padding); align-items: flex-start; flex: 0 1 34rem; }
.hero_headline { max-width: 11ch; }
.hero_sub { max-width: 26ch; font-size: 1.5rem; }
.hero_visual { position: relative; flex: 1 1 36rem; max-width: 46rem; }
.hero_glow { position: absolute; inset: 8% -6% -6% -6%; background: radial-gradient(60% 60% at 50% 55%, #a8ff9955, transparent 70%); filter: blur(2rem); pointer-events: none; }

/* Product mock (chat with tool result) */
.mock {
  position: relative; z-index: 1;
  border: 1px solid var(--stroke-base); background: linear-gradient(162deg, #171a13, #0b0f0a);
  box-shadow: 0 2px 4.6rem .9rem #a9ff9922;
}
.mock_bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--stroke-base); color: var(--secondary-text); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.mock_bar_left { display: flex; align-items: center; gap: .75rem; }
.mock_body { display: flex; flex-flow: column; gap: 1rem; padding: 1.25rem 1rem 1.25rem; }
.mock_user { align-self: flex-end; max-width: 80%; padding: .75rem 1rem; background: var(--core-black); border: 1px solid var(--stroke-base); font-size: .95rem; line-height: 1.35; }
.mock_tool { display: flex; flex-flow: column; gap: .5rem; padding: .75rem 1rem; border: 1px solid var(--stroke-base); background: #ffffff08; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; color: var(--interface); }
.mock_tool_row { display: flex; justify-content: space-between; gap: 1rem; }
.mock_tool_row b { color: var(--nomina-green); font-weight: 500; }
.mock_tool_row .neg { color: var(--alt-orange); }
.mock_answer { font-size: .95rem; line-height: 1.4; color: var(--interface); }
.mock_answer strong { color: var(--text-base); font-weight: 500; }
.mock_sources { display: flex; flex-wrap: wrap; gap: .5rem; }
.mock_source { padding: .35rem .5rem; border: 1px solid var(--stroke-base); color: var(--secondary-text); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; }

/* Works with (logo strip) */
.works { display: flex; flex-flow: column; align-items: center; gap: 1.5rem; width: 100%; margin: 6rem 0; padding: 0 var(--main-padding); }
.works_label { color: var(--secondary-text); font-size: .875rem; }
.works_row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.5rem; max-width: var(--max-width); }
.works_item { color: var(--interface); font-size: .95rem; }

/* Intro */
.intro { margin-top: 6rem; }

/* Prop grid (feature cards) */
.prop_grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; width: 100%; }
.prop_row { display: flex; flex-flow: column; transition: box-shadow .3s; }
.prop_row:hover { box-shadow: 0 2px 4.6rem .9rem #a9ff9973; }
.prop_vis { position: relative; display: flex; align-items: center; justify-content: center; min-height: 12rem; aspect-ratio: 3 / 2; padding: var(--main-padding); background-image: linear-gradient(162deg, #171a13, #0b0f0a); border: 1px solid var(--stroke-base); border-bottom: 0; overflow: hidden; }
.prop_left { display: flex; flex-flow: column; justify-content: space-between; gap: var(--main-padding); width: 100%; height: 100%; padding: var(--main-padding); background-image: linear-gradient(180deg, #ffffff0a, var(--hover-1)); border: 1px solid var(--stroke-base); border-top: 0; }
.prop_big { max-width: 18ch; text-transform: none; font-weight: 500; }
.prop_bullet_stack { display: flex; flex-flow: column; gap: 1rem; max-width: 22rem; }
.prop_bullet { display: flex; align-items: center; gap: 1rem; }
.prop_small { font-size: .95rem; line-height: 1.25; }

/* Mini visuals inside prop cards */
.mini { width: 100%; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em; color: var(--interface); }
.mini_row { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--stroke-base); }
.mini_row:last-child { border-bottom: 0; }
.mini_row .up { color: var(--nomina-green); }
.mini_row .down { color: var(--alt-orange); }
.mini_row .muted { color: var(--secondary-text); }
.mini_bars { display: flex; align-items: flex-end; gap: .35rem; height: 6rem; width: 100%; }
.mini_bars i { flex: 1; background: var(--nomina-green); opacity: .85; }
.mini_bars i.alt { background: var(--alt-purple); }

/* Tools list */
.tools { margin-top: 10rem; }
.tool_list { display: flex; flex-flow: column; width: 100%; border-top: 1px solid var(--stroke-base); }
.tool_item { display: grid; grid-template-columns: 14rem 1fr auto; gap: 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--stroke-base); }
.tool_name { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .02em; color: var(--text-base); }
.tool_desc { max-width: 60ch; }
.tool_tag { display: flex; align-items: center; gap: .5rem; color: var(--secondary-text); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Sources */
.sources { margin-top: 10rem; }
.source_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; width: 100%; }
.source_card { display: flex; flex-flow: column; gap: 1rem; padding: var(--main-padding); border: 1px solid var(--stroke-base); background-image: linear-gradient(180deg, #ffffff0a, var(--hover-1)); min-height: 15rem; }
.source_kicker { color: var(--secondary-text); font-size: .875rem; }
.source_name { font-size: 1.125rem; font-weight: 500; line-height: 1.2; }
.source_desc { font-size: .95rem; line-height: 1.3; }
.source_terms { margin-top: auto; color: var(--interface); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em; line-height: 1.4; }

/* Install */
.install { margin-top: 10rem; }
.install_grid { display: grid; grid-template-columns: 16rem 1fr; gap: 1rem; width: 100%; }
.install_grid > * { min-width: 0; }
.install_tabs { display: flex; flex-flow: column; border: 1px solid var(--stroke-base); }
.install_tab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--main-padding); border-bottom: 1px solid var(--stroke-base); color: var(--secondary-text); text-align: left; font-size: 1rem; transition: all 50ms; }
.install_tab:last-child { border-bottom: 0; }
.install_tab:hover { background: var(--hover-1); color: var(--text-base); }
.install_tab[aria-selected="true"] { background: var(--text-base); color: var(--background-base); }
.install_tab .main-dot { opacity: 0; }
.install_tab[aria-selected="true"] .main-dot { opacity: 1; background: var(--background-base); }
.install_panel { display: none; flex-flow: column; gap: 1.25rem; padding: var(--main-padding); border: 1px solid var(--stroke-base); background-image: linear-gradient(180deg, #ffffff0a, var(--hover-1)); }
.install_panel.active { display: flex; }
.install_steps { display: flex; flex-flow: column; gap: .75rem; counter-reset: step; }
.install_steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: baseline; color: var(--interface); font-size: 1rem; line-height: 1.35; }
.install_steps li strong { color: var(--text-base); font-weight: 500; }
.install_steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); color: var(--nomina-green); font-family: var(--font-mono); font-size: .8rem; }
.code { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding: .9rem 1rem; border: 1px solid var(--stroke-base); background: var(--background-base); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .01em; color: var(--text-base); }
.code code { display: block; min-width: 0; overflow-x: auto; }
.code code { white-space: pre; }
.code .copy { position: sticky; right: 0; }
.copy { flex: none; padding: .45rem .6rem; border: 1px solid var(--stroke-base); color: var(--secondary-text); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; transition: all 50ms; }
.copy:hover { background: var(--hover-1); color: var(--text-base); }
.copy.copied { border-color: var(--nomina-green); color: var(--nomina-green); }
.install_note { color: var(--secondary-text); font-size: .875rem; line-height: 1.35; }

/* Trust */
.trust { margin-top: 10rem; }
.trust_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; }
.trust_card { display: flex; flex-flow: column; gap: 1rem; padding: var(--main-padding); border: 1px solid var(--stroke-base); min-height: 13rem; }
.trust_card .text-h3 { text-transform: none; font-weight: 500; font-size: 1.25rem; }
.trust_card .text-body { font-size: .95rem; line-height: 1.3; }
.trust_card a { color: var(--nomina-green); }
.trust_card a:hover { text-decoration: underline; }

/* Roadmap */
.next { margin-top: 10rem; }
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; counter-reset: stage; }
.roadmap_item { display: flex; flex-flow: column; gap: .75rem; padding: var(--main-padding); border: 1px solid var(--stroke-base); border-top: 2px solid var(--nomina-green); background-image: linear-gradient(180deg, #ffffff0a, var(--hover-1)); min-height: 14rem; }
.roadmap_item:nth-child(2) { border-top-color: var(--alt-purple); }
.roadmap_item:nth-child(3) { border-top-color: var(--alt-horizon); }
.roadmap_item:nth-child(4) { border-top-color: var(--alt-orange); }
.roadmap_stage { color: var(--secondary-text); font-size: .875rem; }
.roadmap_item .text-h3 { font-size: 1.25rem; }
.roadmap_item .text-body { font-size: .95rem; line-height: 1.3; }
.next .install_note { margin-top: 1.5rem; }

/* FAQ */
.faq { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; width: 100%; max-width: var(--max-width); margin: 12rem auto 4rem; padding: 0 var(--main-padding); }
.faq_text_stack { display: flex; flex-flow: column; gap: 1rem; max-width: 20rem; }
.faq_icon { width: 4.5rem; height: auto; margin-bottom: .5rem; }
.faq_item_wrap { display: flex; flex-flow: column; gap: 0; width: 100%; max-width: 32rem; }
.faq_item { display: flex; flex-flow: column; }
.faq_title_wrap { display: flex; justify-content: space-between; align-items: center; gap: 2rem; width: 100%; padding: 1.5rem 0; text-align: left; }
.faq_question_title { max-width: 70%; text-transform: none; font-weight: 500; }
.faq_icon_wrap { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; aspect-ratio: 1; background-color: var(--alt-purple); }
.faq_icon_wrap::before, .faq_icon_wrap::after { content: ""; position: absolute; background: var(--background-base); transition: transform .2s; }
.faq_icon_wrap::before { width: .9rem; height: 2px; }
.faq_icon_wrap::after { width: 2px; height: .9rem; }
.faq_item[open] .faq_icon_wrap::after { transform: rotate(90deg); }
.faq_response_wrap { overflow: hidden; }
.faq_response_text { max-width: 55ch; padding-bottom: 1.5rem; }
.faq_response_text a { color: var(--nomina-green); }
.faq_item summary { list-style: none; cursor: pointer; }
.faq_item summary::-webkit-details-marker { display: none; }

/* CTA band */
.cta { width: 100%; max-width: var(--max-width); margin: 6rem auto 0; padding: 0 var(--main-padding); }
.cta_inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 3rem var(--main-padding); border: 1px solid var(--stroke-base); background-image: linear-gradient(90deg, var(--hover-1), #fff0); }
.cta_inner .text-h2 { max-width: 20ch; }

/* Footer */
.footer { width: 100%; max-width: var(--max-width); margin: 8rem auto 0; padding: 0 var(--main-padding) var(--main-padding); display: flex; flex-flow: column; gap: 4rem; }
.footer_upper { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; width: 100%; }
.footer_menu { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer_column { display: flex; flex-flow: column; gap: .75rem; align-items: flex-start; }
.footer_name { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 500; letter-spacing: .02em; }
.footer_link { color: var(--secondary-text); font-size: 1rem; transition: all 50ms; }
.footer_link:hover { color: var(--text-base); text-decoration: underline; }
.footer_cta_wrap { display: flex; flex-flow: column; align-items: flex-end; gap: var(--main-padding); }
.footer_cta_subsection { display: flex; flex-flow: column; align-items: flex-end; gap: 1rem; }
.footer_cta_subsection .footer_name { margin-bottom: 0; }
.footers_socials { display: flex; gap: .5rem; }
.social { display: flex; align-items: center; justify-content: center; width: 2.5rem; aspect-ratio: 1; background: var(--core-black); border: 1px solid var(--stroke-base); transition: all 50ms; }
.social:hover { background: var(--hover-2); }
.social img { width: 1rem; height: 1rem; }
.footer_wordmark { position: relative; width: 100%; }
.footer_wordmark svg { position: relative; z-index: 1; width: 100%; height: auto; }
.footer_wordmark_accent { position: absolute; z-index: 0; left: 89.6%; top: 56%; width: 10.4%; height: 44%; background: var(--nomina-green); }
.footer_meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--secondary-text); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.footer_meta a { color: var(--secondary-text); }
.footer_meta a:hover { color: var(--text-base); }

/* Responsive — breakpoints as nomina.io: 991 / 767 / 479 */
@media (max-width: 991px) {
  .text-h0 { font-size: 3.5rem; }
  .hero { min-height: auto; padding-top: 7rem; }
  .hero_inner { flex-flow: column; align-items: flex-start; gap: 3rem; }
  .hero_stack { flex: none; width: 100%; }
  .hero_visual { width: 100%; max-width: none; }
  .nav_cluster { display: none; }
  .nav_mob_menu_button { display: flex; }
  .prop_grid { grid-template-columns: 1fr; }
  .prop_vis { aspect-ratio: auto; min-height: 10rem; }
  .source_grid { grid-template-columns: 1fr 1fr; }
  .trust_grid { grid-template-columns: 1fr 1fr; }
  .roadmap { grid-template-columns: 1fr 1fr; }
  .install_grid { grid-template-columns: 1fr; }
  .install_tabs { flex-flow: row; flex-wrap: wrap; }
  .install_tab { flex: 1 1 auto; border-bottom: 0; border-right: 1px solid var(--stroke-base); }
  .tool_item { grid-template-columns: 1fr; gap: .75rem; }
  .faq { flex-flow: column; gap: 3rem; margin-top: 8rem; }
  .faq_item_wrap { max-width: none; }
  .footer_upper { flex-flow: column; }
  .footer_cta_wrap { flex-flow: row; justify-content: space-between; align-items: flex-end; width: 100%; }
  .footer_cta_subsection { align-items: flex-start; }
}
@media (max-width: 767px) {
  .text-h0 { font-size: 3rem; }
  .text-h1 { font-size: 2rem; }
  .hero_sub { font-size: 1.25rem; }
  .nav_wrap { padding: 1rem var(--main-padding); }
  .nav_right .button_cluster .button-wrap.secondary { display: none; }
  .nav_logo_tag { display: none; }
  .header_row { flex-flow: column; align-items: flex-start; gap: 1rem; }
  .works_row { gap: 1.25rem 2rem; }
  .source_grid, .trust_grid, .roadmap { grid-template-columns: 1fr; }
  .next { margin-top: 6rem; }
  .cta_inner { flex-flow: column; align-items: flex-start; }
  .tools, .sources, .install, .trust { margin-top: 6rem; }
}
@media (max-width: 479px) {
  .text-h0 { font-size: 2.5rem; }
  .button_cluster.large { gap: .75rem; }
  .button-wrap.big { padding: .875rem 1.375rem; font-size: .925rem; }
  .mock_user { max-width: 100%; }
  .mock_bar > div:last-child { display: none; }
  .mock_tool_row { flex-wrap: wrap; gap: .25rem .75rem; }
  .install_tabs { flex-flow: column; }
  .install_tab { border-right: 0; border-bottom: 1px solid var(--stroke-base); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .prop_row, .faq_icon_wrap::after { transition: none; } }