diff --git a/src/components/SiteFooter/SiteFooter.tsx b/src/components/SiteFooter/SiteFooter.tsx
index 8e8a64c..2c71847 100644
--- a/src/components/SiteFooter/SiteFooter.tsx
+++ b/src/components/SiteFooter/SiteFooter.tsx
@@ -9,7 +9,7 @@ export function SiteFooter() {
     return (
         <footer className={classes.footer}>
             <Container>
-                <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="xl">
+                <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="xl">
                     <Stack gap="sm">
                         <Group gap="sm">
                             <RosettaLogo size={34} />
@@ -33,18 +33,24 @@ export function SiteFooter() {
                         <Anchor component={Link} to="/#apps" c="dimmed" size="sm">
                             Apps
                         </Anchor>
-                        <Anchor component={Link} to="/encryption" c="dimmed" size="sm">
-                            Encryption
+                        <Anchor component={Link} to="/support" c="dimmed" size="sm">
+                            Support
                         </Anchor>
+                    </Stack>
+
+                    <Stack gap="xs">
+                        <Text fw={600} size="sm">
+                            Developers
+                        </Text>
                         <Anchor component={Link} to="/proto" c="dimmed" size="sm">
                             Proto
                         </Anchor>
+                        <Anchor component={Link} to="/encryption" c="dimmed" size="sm">
+                            Encryption
+                        </Anchor>
                         <Anchor component={Link} to="/rcc" c="dimmed" size="sm">
                             RCC
                         </Anchor>
-                        <Anchor component={Link} to="/support" c="dimmed" size="sm">
-                            Support
-                        </Anchor>
                     </Stack>
 
                     <Stack gap="xs">
diff --git a/src/pages/ProtoPage.module.css b/src/pages/ProtoPage.module.css
index eba4502..9a65412 100644
--- a/src/pages/ProtoPage.module.css
+++ b/src/pages/ProtoPage.module.css
@@ -27,8 +27,13 @@
 }
 
 .important {
-  color: light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-3));
-  font-weight: 650;
+  padding: 0 0.14em;
+  border-radius: 2px;
+  background: light-dark(rgba(253, 126, 20, 0.13), rgba(253, 126, 20, 0.18));
+  color: light-dark(var(--mantine-color-orange-9), var(--mantine-color-orange-2));
+  font-weight: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 .layerExamples {
diff --git a/src/pages/ProtoPage.tsx b/src/pages/ProtoPage.tsx
index 98322c8..06c8234 100644
--- a/src/pages/ProtoPage.tsx
+++ b/src/pages/ProtoPage.tsx
@@ -541,12 +541,12 @@ export class RccGeneratedPacketRegistry {
                             that layer, and expose the compiled minimum and maximum versions.
                         </List.Item>
                         <List.Item>
-                            <strong>Client generation</strong>{' '}
+                            <strong>Client generation</strong> selects the{' '}
                             <Text component="span" className={classes.important}>
-                                selects the highest layer and creates the current packet, type, enum,
-                                codec, and registry sources without carrying historical shapes into
-                                the application.
+                                highest layer
                             </Text>
+                            {' '}and creates the current packet, type, enum, codec, and registry
+                            sources without carrying historical shapes into the application.
                         </List.Item>
                         <List.Item>
                             <strong>Schema validation</strong> fails the build for unknown types or
@@ -561,10 +561,9 @@ export class RccGeneratedPacketRegistry {
                     </LegalList>
                     <LegalText>
                         The RCC guide includes separate client and version-aware server examples.{' '}
-                        <Text component="span" className={classes.important}>
-                            Run <Code>npx rcc --list-languages</Code> for the authoritative list of
-                            language targets in the installed compiler version.
-                        </Text>
+                        Run <Code className={classes.important}>npx rcc --list-languages</Code> for
+                        the authoritative list of language targets in the installed compiler
+                        version.
                     </LegalText>
                 </LegalSection>
 
@@ -720,7 +719,7 @@ packet  field 1 · INT8 · SUCCESS (0)`}
                         See docs of PROTO →
                     </Anchor>
                     <Anchor component={Link} to="/rcc" className={classes.docsLink}>
-                        Learn RCC →
+                        See docs of RCC →
                     </Anchor>
                 </Group>
             </LegalPage>
diff --git a/src/pages/RccPage.module.css b/src/pages/RccPage.module.css
index 4e587ff..3570f6e 100644
--- a/src/pages/RccPage.module.css
+++ b/src/pages/RccPage.module.css
@@ -78,8 +78,13 @@
 }
 
 .important {
-  color: light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-3));
-  font-weight: 650;
+  padding: 0 0.14em;
+  border-radius: 2px;
+  background: light-dark(rgba(253, 126, 20, 0.13), rgba(253, 126, 20, 0.18));
+  color: light-dark(var(--mantine-color-orange-9), var(--mantine-color-orange-2));
+  font-weight: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
 .note {
@@ -87,7 +92,7 @@
   border: 1px solid light-dark(var(--mantine-color-orange-3), var(--mantine-color-orange-9));
   border-left: 3px solid var(--mantine-color-orange-6);
   background: light-dark(var(--mantine-color-orange-0), rgba(253, 126, 20, 0.1));
-  color: light-dark(var(--mantine-color-orange-9), var(--mantine-color-orange-2));
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
 }
 
 @media (max-width: 48em) {
diff --git a/src/pages/RccPage.tsx b/src/pages/RccPage.tsx
index e24d926..76d1f32 100644
--- a/src/pages/RccPage.tsx
+++ b/src/pages/RccPage.tsx
@@ -45,11 +45,15 @@ export function RccPage() {
             <LegalPage eyebrow="Developer tooling" title="Rosetta Code Compiler">
                 <LegalText lead>
                     RCC compiles Rosetta&apos;s versioned YAML protocol into typed models, codecs,
-                    and packet registries.{' '}
+                    and packet registries. A server build can retain the{' '}
                     <Text component="span" className={classes.important}>
-                        A server build can retain the complete protocol history; a client build
-                        stays small by generating only the latest layer.
+                        complete protocol history
                     </Text>
+                    ; a client build stays small by generating only the{' '}
+                    <Text component="span" className={classes.important}>
+                        latest layer
+                    </Text>
+                    .
                 </LegalText>
 
                 <LegalSection title="What RCC produces">
@@ -109,9 +113,9 @@ npx rcc --help`}</TechnicalCode>
                         </Anchor>
                         .{' '}
                         <Text component="span" className={classes.important}>
-                            Pin the dependency version in the project lockfile so generated output
-                            remains reproducible.
+                            Pin the dependency version
                         </Text>
+                        {' '}in the project lockfile so generated output remains reproducible.
                     </LegalText>
                 </LegalSection>
 
@@ -178,9 +182,10 @@ npx rcc --help`}</TechnicalCode>
   --clean`}</TechnicalCode>
                         <Paper className={classes.note} radius="sm" p="md">
                             <Text size="sm" lh={1.7}>
-                                Always run <Code>npx rcc --list-languages</Code> before configuring a
-                                generator. The installed compiler&apos;s output is the source of truth
-                                for available language targets.
+                                Always run{' '}
+                                <Code className={classes.important}>npx rcc --list-languages</Code>{' '}
+                                before configuring a generator. The installed compiler&apos;s output is
+                                the source of truth for available language targets.
                             </Text>
                         </Paper>
                     </Step>