.aec-footer-fragment{all:revert-layer;display:block;box-sizing:border-box;text-align:left;} .aec-footer-fragment *,.aec-footer-fragment *::before,.aec-footer-fragment *::after{box-sizing:border-box;} .aec-footer-fragment :where(*){margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;line-height:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;list-style:none;} .aec-footer-fragment *,.aec-footer-fragment :before,.aec-footer-fragment :after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.aec-footer-fragment ::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.aec-footer-fragment *,.aec-footer-fragment :before,.aec-footer-fragment :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.aec-footer-fragment :before,.aec-footer-fragment :after{--tw-content: ""}.aec-footer-fragment,.aec-footer-fragment :host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}.aec-footer-fragment{margin:0;line-height:inherit}.aec-footer-fragment h3,.aec-footer-fragment h4{font-size:inherit;font-weight:inherit}.aec-footer-fragment a{color:inherit;text-decoration:inherit}.aec-footer-fragment :-moz-focusring{outline:auto}.aec-footer-fragment :-moz-ui-invalid{box-shadow:none}.aec-footer-fragment ::-webkit-inner-spin-button,.aec-footer-fragment ::-webkit-outer-spin-button{height:auto}.aec-footer-fragment ::-webkit-search-decoration{-webkit-appearance:none}.aec-footer-fragment ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.aec-footer-fragment h3,.aec-footer-fragment h4,.aec-footer-fragment figure,.aec-footer-fragment p{margin:0}.aec-footer-fragment ul{list-style:none;margin:0;padding:0}.aec-footer-fragment :disabled{cursor:default}.aec-footer-fragment img,.aec-footer-fragment svg{display:block;vertical-align:middle}.aec-footer-fragment img{max-width:100%;height:auto}.aec-footer-fragment{--background: 0 0% 98%;--foreground: 220 20% 14%;--card: 0 0% 100%;--card-foreground: 220 20% 14%;--popover: 0 0% 100%;--popover-foreground: 220 20% 14%;--primary: 220 70% 50%;--primary-foreground: 0 0% 100%;--secondary: 220 14% 94%;--secondary-foreground: 220 20% 14%;--muted: 220 14% 94%;--muted-foreground: 220 10% 46%;--accent: 220 14% 94%;--accent-foreground: 220 20% 14%;--destructive: 0 72% 51%;--destructive-foreground: 0 0% 100%;--border: 220 13% 90%;--input: 220 13% 90%;--ring: 220 70% 50%;--radius: 8px;--sidebar-background: 220 20% 14%;--sidebar-foreground: 220 14% 90%;--sidebar-primary: 220 70% 55%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 220 20% 20%;--sidebar-accent-foreground: 220 14% 90%;--sidebar-border: 220 15% 22%;--sidebar-ring: 220 70% 55%;--status-positive: 120 86% 34%;--status-positive-text: 120 100% 19%;--status-positive-surface: 122 55% 94%;--status-positive-border: 122 40% 80%;--status-attention: 32 95% 44%;--status-attention-text: 36 100% 24%;--status-attention-surface: 44 92% 92%;--status-attention-border: 38 75% 76%;--status-critical: 0 72% 51%;--status-critical-text: 3 74% 38%;--status-critical-surface: 0 80% 96%;--status-critical-border: 0 65% 86%;--status-neutral: 220 9% 46%;--status-neutral-text: 220 16% 28%;--status-neutral-surface: 220 14% 94%;--status-neutral-border: 220 13% 85%;--affirmative: 120 100% 19%;--affirmative-hover: 120 100% 15%;--affirmative-foreground: 0 0% 100%;--admin-sidebar-width: 260px;--font-heading: Inter, system-ui, sans-serif;--font-body: Inter, system-ui, sans-serif;--font-secondary: Montserrat, system-ui, sans-serif}.aec-footer-fragment *{border-color:hsl(var(--border))}.aec-footer-fragment{background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-body)}.aec-footer-fragment h3,.aec-footer-fragment h4{font-family:var(--font-heading)}.aec-footer-fragment .mx-auto{margin-left:auto;margin-right:auto}.aec-footer-fragment .mb-2{margin-bottom:8px}.aec-footer-fragment .mb-4{margin-bottom:16px}.aec-footer-fragment .mb-5{margin-bottom:20px}.aec-footer-fragment .mt-0\.5{margin-top:2px}.aec-footer-fragment .mt-6{margin-top:24px}.aec-footer-fragment .mt-8{margin-top:32px}.aec-footer-fragment .inline-block{display:inline-block}.aec-footer-fragment .flex{display:flex}.aec-footer-fragment .grid{display:grid}.aec-footer-fragment .contents{display:contents}.aec-footer-fragment .h-4{height:16px}.aec-footer-fragment .h-5{height:20px}.aec-footer-fragment .min-h-screen{min-height:100vh}.aec-footer-fragment .w-4{width:16px}.aec-footer-fragment .w-5{width:20px}.aec-footer-fragment .min-w-0{min-width:0px}.aec-footer-fragment .max-w-7xl{max-width:1280px}.aec-footer-fragment .max-w-none{max-width:none}.aec-footer-fragment .shrink-0{flex-shrink:0}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}.aec-footer-fragment .flex-col{flex-direction:column}.aec-footer-fragment .flex-wrap{flex-wrap:wrap}.aec-footer-fragment .items-start{align-items:flex-start}.aec-footer-fragment .items-center{align-items:center}.aec-footer-fragment .gap-10{gap:40px}.aec-footer-fragment .gap-2{gap:8px}.aec-footer-fragment .gap-4{gap:16px}.aec-footer-fragment .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(8px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(8px * var(--tw-space-y-reverse))}.aec-footer-fragment .break-all{word-break:break-all}.aec-footer-fragment .border-t{border-top-width:1px}.aec-footer-fragment .border-black\/10{border-color:#0000001a}.aec-footer-fragment .bg-background{background-color:hsl(var(--background))}.aec-footer-fragment .bg-card{background-color:hsl(var(--card))}.aec-footer-fragment .px-6{padding-left:24px;padding-right:24px}.aec-footer-fragment .pb-8{padding-bottom:32px}.aec-footer-fragment .pt-12{padding-top:48px}.aec-footer-fragment .pt-6{padding-top:24px}.aec-footer-fragment .align-middle{vertical-align:middle}.aec-footer-fragment .font-heading{font-family:var(--font-heading),Oswald,system-ui,sans-serif}.aec-footer-fragment .text-\[11px\]{font-size:11px}.aec-footer-fragment .text-sm{font-size:14px;line-height:20px}.aec-footer-fragment .text-xs{font-size:12px;line-height:16px}.aec-footer-fragment .font-medium{font-weight:500}.aec-footer-fragment .font-semibold{font-weight:600}.aec-footer-fragment .uppercase{text-transform:uppercase}.aec-footer-fragment .tracking-wide{letter-spacing:.025em}.aec-footer-fragment .text-foreground{color:hsl(var(--foreground))}.aec-footer-fragment .text-muted-foreground{color:hsl(var(--muted-foreground))}.aec-footer-fragment .text-primary{color:hsl(var(--primary))}.aec-footer-fragment .opacity-70{opacity:.7}.aec-footer-fragment .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.aec-footer-fragment .file\:border-0::file-selector-button{border-width:0px}.aec-footer-fragment .file\:bg-transparent::file-selector-button{background-color:transparent}.aec-footer-fragment .file\:text-sm::file-selector-button{font-size:14px;line-height:20px}.aec-footer-fragment .file\:font-medium::file-selector-button{font-weight:500}.aec-footer-fragment .file\:text-foreground::file-selector-button{color:hsl(var(--foreground))}.aec-footer-fragment .hover\:text-foreground:hover{color:hsl(var(--foreground))}.aec-footer-fragment .hover\:text-primary:hover{color:hsl(var(--primary))}.aec-footer-fragment .hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:hsl(var(--sidebar-border))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{border-color:hsl(var(--destructive) / .3)}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{background-color:hsl(var(--destructive))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{color:hsl(var(--destructive-foreground))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{--tw-text-opacity: 1;color:rgb(254 242 242 / var(--tw-text-opacity, 1))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{--tw-ring-color: hsl(var(--destructive))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1))}.aec-footer-fragment .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{--tw-ring-offset-color: #dc2626}.aec-footer-fragment .has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){background-color:hsl(var(--sidebar-background))}.aec-footer-fragment .has-\[\:disabled\]\:opacity-50:has(:disabled){opacity:.5}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}.aec-footer-fragment .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);left:0}.aec-footer-fragment .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after{content:var(--tw-content);height:4px}.aec-footer-fragment .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after{content:var(--tw-content);width:100%}.aec-footer-fragment .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after{content:var(--tw-content);--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.aec-footer-fragment .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state=open]{background-color:hsl(var(--sidebar-accent))}.aec-footer-fragment .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state=open]{color:hsl(var(--sidebar-accent-foreground))}.aec-footer-fragment .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:after\:left-full:after{content:var(--tw-content);left:100%}.aec-footer-fragment .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover{background-color:hsl(var(--sidebar-background))}.aec-footer-fragment .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){background-color:hsl(var(--accent))}.aec-footer-fragment .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.aec-footer-fragment .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.aec-footer-fragment .\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside){background-color:hsl(var(--accent) / .5)}.aec-footer-fragment .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.aec-footer-fragment .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.aec-footer-fragment .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:0}.aec-footer-fragment .\[\&_a\]\:text-foreground a{color:hsl(var(--foreground))}.aec-footer-fragment .\[\&_a\]\:hover\:underline:hover a,.aec-footer-fragment .hover\:\[\&_a\]\:underline a:hover{text-decoration-line:underline}.aec-footer-fragment .\[\&_figure\]\:mr-4 figure{margin-right:16px}.aec-footer-fragment .\[\&_figure\]\:inline-block figure{display:inline-block}.aec-footer-fragment .\[\&_img\]\:inline-block img{display:inline-block}.aec-footer-fragment .\[\&_img\]\:h-11 img{height:44px}.aec-footer-fragment .\[\&_img\]\:w-auto img{width:auto} /* ============================================================================= stryker-handoff.css ----------------------------------------------------------------------------- Purpose: Provide a single stylesheet that gives pages generated in Lovable pixel-accurate rendering in BOTH the Lovable preview environment AND in FusionCMS production after handoff. How to use: 1. Load this file once globally in the FusionCMS v5 Stryker theme (recommended: include it after theme.css so it layers on top without conflicting with the existing Bootstrap-derived rules). 2. When Lovable generates content_html that uses class names prefixed with `.stryker-*` (per the pattern library in stryker-branding.md §5), those classes resolve against the rules in this file — producing identical visual output to the live site. 3. No Tailwind runtime required. All values here are hand-written CSS that references either verified Stryker hex values or --stryker-* custom properties declared at the top of this file. All values in this file are sourced from the live production theme.css of strykerttops.com (id=466e1d7316b3352d2d04). Do not modify hex values without re-running the CSS audit in stryker-branding.md. Version: 1.4 — 2026-04-21 (Cycle 2: mobile responsive §6b — #compare card-stack, feature-grid collapse, CTA stack, hero/section sizing — replaces SHARED_CLAUSES Pattern B inlines) ============================================================================= */ /* ----------------------------------------------------------------------------- §1 — Design tokens as CSS custom properties These are the canonical values. Everything below references them. ----------------------------------------------------------------------------- */ .aec-footer-fragment { /* Colors — primary palette */ --stryker-primary: #db1e1e; --stryker-primary-hover-bg: #b91919; --stryker-primary-hover-border: #ae1818; --stryker-primary-active-bg: #ae1818; --stryker-primary-active-border: #a31616; --stryker-primary-deep: #721010; --stryker-link-hover: #981515; /* Colors — neutrals */ --stryker-secondary: #000000; --stryker-body-text: #000000; --stryker-ink-soft: #111111; --stryker-muted-text: #9b9b9d; --stryker-surface-alt-1: #f6f6f6; --stryker-surface-alt-2: #f8f9fa; --stryker-border-subtle: #c3c3c3; --stryker-border-card: #d8d7d7; --stryker-border-form-focus: #ef8a8a; --stryker-divider: #dadada; /* Colors — semantic only, NOT brand accents */ --stryker-semantic-success: #28a745; --stryker-semantic-warning: #ffc107; --stryker-semantic-info: #17a2b8; /* Fonts */ --stryker-font-primary-display: 'Oswald', 'Oswald Fallback', sans-serif; --stryker-font-secondary-display: 'Montserrat', 'Montserrat Fallback', sans-serif; --stryker-font-body: 'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif; --stryker-font-accent-display: 'Roboto Slab', 'Roboto Slab Fallback', sans-serif; /* Spacing */ --stryker-section-margin-bottom: 85px; /* 85px */ --stryker-section-padding-y: 100px; /* 100px */ --stryker-cta-padding-y: 65px; --stryker-outer-gutter: 15px; --stryker-heading-margin-bottom: 22px; /* 22px */ --stryker-heading-margin-bottom-content: 40px; /* 40px */ --stryker-card-margin-bottom: 30px; /* 30px */ /* Radii */ --stryker-radius-default: 0; --stryker-radius-small: 3px; --stryker-radius-button: 4px; --stryker-radius-btn-lg: 6px; /* Shadows */ --stryker-shadow-focus: 0 0 0 3.2px rgba(219, 30, 30, 0.25); --stryker-shadow-page-header: 0 0 10px 3px rgba(0, 0, 0, 0.3); --stryker-shadow-card: 0 15px 15px 0 rgba(0, 0, 0, 0.25); --stryker-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3); } /* ----------------------------------------------------------------------------- §2 — Typography ----------------------------------------------------------------------------- */ /* Scope to .stryker-page to avoid overriding FusionCMS native page styles. */ /* UAT-1 item 2: list/form templates that do not render inside `.stryker-page` (/gallery/, /blog/, /blog/category/*) opt into the SAME hero buffer with this class. Handoff CSS is injected per tenant, so the value stays tenant-scoped without a second registry. !important because the class sits alongside a Tailwind `pt-*` utility of equal specificity. */ /* Primary display headings — Oswald, "Oswald Fallback", uppercase, letter-spaced */ /* 30px */ /* 28px */ /* Secondary display headings — Montserrat, "Montserrat Fallback", red by default for H4/H5 */ /* 18px */ /* 13px */ /* Content-page H2 override — the main red 42px section heading */ /* Display variants */ /* Eyebrow label — uppercase form-label style */ /* Body links */ /* Body text spacing */ /* ----------------------------------------------------------------------------- §3 — Buttons ----------------------------------------------------------------------------- */ /* Primary — the dominant brand CTA */ /* Secondary — solid black, for paired actions */ /* Outline primary */ /* Outline secondary */ /* Link-style button — no border, text only */ /* Inverse — for use on dark hero / cta-strip backgrounds ONLY */ /* ----------------------------------------------------------------------------- §4 — Section patterns Named patterns that correspond to the live site's section vocabulary. Use these class names in Lovable-generated content_html. ----------------------------------------------------------------------------- */ /* ===== Hero ===== */ /* ===== Section CTA (dark full-bleed band) ===== */ /* Default button styling inside dark sections = inverse pattern. */ /* ===== Content section (editorial prose block) ===== */ /* ===== Feature grid (3–4 column cards) ===== */ /* ===== Spec strip (surface-alt band with icon+label columns) ===== */ /* ===== FAQ list ===== */ /* ----------------------------------------------------------------------------- §5 — Utility + layout helpers Only the helpers needed to hand off generated pages cleanly. Not a full utility framework. Avoid bloat. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- §6 — Responsive (desktop bumps for display sizes) The live site bumps display-lead from 45→90 and display-xxl from 35→55 once the viewport reaches ≥ 768px. Match that here. ----------------------------------------------------------------------------- */ @media (min-width: 768px) { /* 90px */ /* 55px */ /* 45px */ } /* ----------------------------------------------------------------------------- §6b — Mobile responsive (≤768px) These rules previously had to be hand-emitted by the LLM via inline