chore(website): post-arc follow-ups — delete dev route, guard to error

apps/website/src/app/docs/page.tsx

@@ -162,7 +162,7 @@ function LogoChip({ src }: { src: string }) {
 }
 
 function GlyphChip({ size, children }: { size: number; children: ReactNode }) {
-  return <span className="docs-index-glyph-chip" style={{ width: size, height: size }}>{children}</span>;
+  return <span className="docs-index-glyph-chip" style={{ '--glyph-size': `${size}px` } as React.CSSProperties}>{children}</span>;
 }
 
 export default function DocsLandingPage() {

apps/website/src/app/solutions/[slug]/page.tsx

@@ -47,7 +47,7 @@ function PainPoints({ items, accent }: { items: SolutionPainPoint[]; accent: str
     <Section surface="canvas" ariaLabelledBy="problem-heading">
       <Container>
         <div className="sol-page-section-header">
-          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">The problem</Eyebrow>
+          <Eyebrow style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-page-eyebrow-tight">The problem</Eyebrow>
           <h2 id="problem-heading" className="sol-page-h2">
             Why this is hard today.
           </h2>
@@ -82,7 +82,7 @@ function Architecture({
     <Section surface="tinted" ariaLabelledBy="arch-heading">
       <Container>
         <div className="sol-page-section-header">
-          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">Architecture</Eyebrow>
+          <Eyebrow style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-page-eyebrow-tight">Architecture</Eyebrow>
           <h2 id="arch-heading" className="sol-page-h2 sol-page-h2-spaced">
             How the three libraries compose.
           </h2>
@@ -130,15 +130,15 @@ function Capabilities({ items, accent }: { items: ProofPoint[]; accent: string }
     <Section surface="canvas" ariaLabelledBy="capabilities-heading">
       <Container>
         <div className="sol-page-section-header">
-          <Eyebrow style={{ color: accent }} className="sol-page-eyebrow-tight">What you ship</Eyebrow>
+          <Eyebrow style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-page-eyebrow-tight">What you ship</Eyebrow>
           <h2 id="capabilities-heading" className="sol-page-h2">
             Capabilities the framework delivers.
           </h2>
         </div>
         <div className="sol-page-grid-260">
           {items.map((p) => (
             <Card key={p.metric + p.label} padding="lg">
-              <div style={{ color: accent }} className="sol-page-metric">
+              <div style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-page-metric">
                 {p.metric}
               </div>
               <p className="sol-page-card-body">
@@ -163,7 +163,7 @@ export default async function SolutionPage({ params }: PageProps) {
       <Section surface="canvas" ariaLabelledBy="solution-hero-heading">
         <Container>
           <div className="sol-page-hero-inner">
-            <Eyebrow style={{ color: solution.color }} className="sol-page-eyebrow-spaced">{solution.eyebrow}</Eyebrow>
+            <Eyebrow style={{ '--accent': solution.color } as React.CSSProperties} data-accent-text className="sol-page-eyebrow-spaced">{solution.eyebrow}</Eyebrow>
             <h1 id="solution-hero-heading" className="sol-page-h1">
               {solution.title}
             </h1>

apps/website/src/components/docs/mdx/Card.tsx

@@ -5,9 +5,7 @@ export function CardGroup({ cols = 2, children }: { cols?: number; children: Rea
   return (
     <div
       className="mdx-card-group"
-      style={{
-        gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${100 / cols - 2}%), 1fr))`,
-      }}
+      style={{ '--card-min': `${100 / cols - 2}%` } as React.CSSProperties}
     >
       {children}
     </div>

apps/website/src/components/pricing/CompareTable.tsx

@@ -308,14 +308,8 @@ function SectionTable({
 function CtaStrip({ cycle }: { cycle: BillingCycle }) {
   return (
     <div
-      style={{
-        minWidth: 960,
-        margin: '24px 0 0',
-        display: 'grid',
-        gridTemplateColumns: `${LABEL_COL_WIDTH} repeat(${TIERS.length}, 1fr)`,
-        gap: 0,
-        alignItems: 'start',
-      }}
+      className="pricing-cta-strip"
+      style={{ '--cta-cols': `${LABEL_COL_WIDTH} repeat(${TIERS.length}, 1fr)` } as React.CSSProperties}
     >
       <div />
       {TIERS.map((tier) => (

apps/website/src/components/shared/AnnouncementToast.tsx

@@ -89,10 +89,7 @@ export function AnnouncementToast() {
       role="alert"
       aria-live="polite"
       className="toast-root"
-      style={{
-        opacity: mounted ? 1 : 0,
-        transform: mounted ? 'translateY(0)' : 'translateY(12px)',
-      }}
+      data-mounted={mounted || undefined}
     >
       {/* Dismiss button */}
       <button

apps/website/src/components/solutions/SolutionCodeBlock.tsx

@@ -31,7 +31,7 @@ export async function SolutionCodeBlock({ code, accent }: { code: SolutionCodeBl
     <Section surface="canvas" ariaLabelledBy="solution-code-heading">
       <Container>
         <div className="sol-code-wrap">
-          <Eyebrow style={{ color: accent, marginBottom: 12 }}>In practice</Eyebrow>
+          <Eyebrow style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-code-eyebrow">In practice</Eyebrow>
           <h2 id="solution-code-heading" className="sol-code-heading">
             What it looks like in your codebase
           </h2>

apps/website/src/components/solutions/SolutionDemoBlock.tsx

@@ -23,7 +23,7 @@ export function SolutionDemoBlock({ clip, accent }: { clip: DemoClip; accent: st
     <Section surface="tinted" ariaLabelledBy="solution-demo-heading">
       <Container>
         <div className="sol-demo-wrap">
-          <Eyebrow style={{ color: accent, marginBottom: 12 }}>See it running</Eyebrow>
+          <Eyebrow style={{ '--accent': accent } as React.CSSProperties} data-accent-text className="sol-code-eyebrow">See it running</Eyebrow>
           <h2 id="solution-demo-heading" className="sol-demo-heading">
             The approval gate, in the product
           </h2>

apps/website/src/components/ui/BrowserFrame.tsx

@@ -30,13 +30,15 @@ export function BrowserFrame({
       data-ui="browser-frame"
       data-elevation={elevation}
       className={cn(className)}
+      data-rotated={rotate ? '' : undefined}
       style={{
-        // Genuinely dynamic — computed from unbounded caller props, so these
-        // stay inline. Everything else here is static and lives in ui.css.
-        transform: rotate ? `rotate(${rotate}deg)` : undefined,
-        maxWidth,
+        // Genuinely dynamic — computed from unbounded caller props, passed as
+        // custom properties (the lint-guard escape hatch); ui.css consumes
+        // them. Everything else is static and lives in ui.css.
+        ...(rotate ? { '--frame-rotate': `${rotate}deg` } : null),
+        ...(maxWidth !== undefined ? { '--frame-max': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth } : null),
         ...style,
-      }}
+      } as React.CSSProperties}
       {...rest}
     >
       {/* Title bar */}

apps/website/src/styles/chrome.css

@@ -329,6 +329,15 @@
   border-radius: var(--radius-lg);
   padding: 20px 24px;
   transition: opacity 200ms ease, transform 240ms ease;
+  /* Entrance animation as bounded data-state (lint-guard follow-up): the
+   * component flips data-mounted a frame after render; the transition above
+   * carries it from this resting state. */
+  opacity: 0;
+  transform: translateY(12px);
+}
+.toast-root[data-mounted] {
+  opacity: 1;
+  transform: translateY(0);
 }
 .toast-close {
   position: absolute;

apps/website/src/styles/docs.css

@@ -506,6 +506,8 @@
 /* mdx — Card / CardGroup */
 .mdx-card-group {
   display: grid;
+  /* --card-min is set inline from the unbounded `cols` prop. */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
   gap: 14px;
   margin-top: 16px;
   margin-bottom: 20px;

apps/website/src/styles/marketing.css

@@ -742,3 +742,17 @@
   border: 1px solid var(--color-border);
   font-size: 14px;
 }
+
+/* CompareTable CTA strip (lint-guard follow-up): static box moved here;
+ * --cta-cols is set inline from the tier config. */
+.pricing-cta-strip {
+  min-width: 960px;
+  margin: 24px 0 0;
+  display: grid;
+  grid-template-columns: var(--cta-cols);
+  gap: 0;
+  align-items: start;
+}
+.sol-code-eyebrow {
+  margin-bottom: 12px;
+}

apps/website/src/styles/pages.css

@@ -232,6 +232,9 @@
 /* GlyphChip's width/height come from a `size: number` prop (unbounded) and
  * stay inline; everything else in glyphChipStyle moves here. */
 .docs-index-glyph-chip {
+  /* --glyph-size is set inline per instance (unbounded numeric prop). */
+  width: var(--glyph-size);
+  height: var(--glyph-size);
   border-radius: var(--radius-md);
   background: var(--color-accent-surface);
   border: 1px solid var(--color-accent-border);
@@ -1409,3 +1412,13 @@
   gap: 12px;
   flex-wrap: wrap;
 }
+
+/* Per-page accent color, set inline as --accent (unbounded prop — the
+ * lint-guard escape hatch). The compound selector matches the Eyebrow tone
+ * rules' 0-2-0 specificity ([data-ui="eyebrow"][data-tone=…] in ui.css) and
+ * wins the tie because pages.css imports after ui.css — the inline color it
+ * replaces used to outrank everything. */
+[data-accent-text],
+[data-ui='eyebrow'][data-accent-text] {
+  color: var(--accent);
+}