@refrakt-md/lumina 0.7.1 → 0.7.2

package/contracts/structures.json

@@ -9,7 +9,34 @@
 			"dataRune": "accordion",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-accordion__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-accordion__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-accordion__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-accordion__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-accordion__image",
+					"source": "autoLabel"
+				}
+			}
 		},
 		"AccordionItem": {
 			"block": "accordion-item",
@@ -523,7 +550,34 @@
 			"dataRune": "tabgroup",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-tabs__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-tabs__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-tabs__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-tabs__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-tabs__image",
+					"source": "autoLabel"
+				}
+			}
 		},
 		"Tab": {
 			"block": "tab",
@@ -639,6 +693,33 @@
 					"classPattern": ".rf-reveal--{value}",
 					"dataAttribute": "data-mode"
 				}
+			},
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-reveal__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-reveal__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-reveal__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-reveal__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-reveal__image",
+					"source": "autoLabel"
+				}
 			}
 		},
 		"RevealStep": {
@@ -686,6 +767,33 @@
 					"suffix": "in-feature",
 					"selector": ".rf-hero--in-feature"
 				}
+			},
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-hero__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-hero__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-hero__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-hero__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-hero__image",
+					"source": "autoLabel"
+				}
 			}
 		},
 		"CallToAction": {
@@ -704,6 +812,33 @@
 					"suffix": "in-pricing",
 					"selector": ".rf-cta--in-pricing"
 				}
+			},
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-cta__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-cta__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-cta__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-cta__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-cta__image",
+					"source": "autoLabel"
+				}
 			}
 		},
 		"Bento": {
@@ -727,6 +862,33 @@
 					"dataAttribute": "data-gap"
 				}
 			},
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-bento__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-bento__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-bento__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-bento__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-bento__image",
+					"source": "autoLabel"
+				}
+			},
 			"inlineStyles": {
 				"columns": "--bento-columns",
 				"gap": "--bento-gap"
@@ -784,6 +946,33 @@
 					"suffix": "in-grid",
 					"selector": ".rf-feature--in-grid"
 				}
+			},
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-feature__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-feature__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-feature__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-feature__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-feature__image",
+					"source": "autoLabel"
+				}
 			}
 		},
 		"FeatureDefinition": {
@@ -801,7 +990,34 @@
 			"dataRune": "steps",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-steps__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-steps__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-steps__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-steps__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-steps__image",
+					"source": "autoLabel"
+				}
+			}
 		},
 		"Step": {
 			"block": "step",
@@ -830,7 +1046,34 @@
 			"dataRune": "pricing",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"elements": {
+				"header": {
+					"tag": "header",
+					"selector": ".rf-pricing__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-pricing__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-pricing__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-pricing__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-pricing__image",
+					"source": "autoLabel"
+				}
+			}
 		},
 		"Tier": {
 			"block": "tier",
@@ -1851,6 +2094,28 @@
 				}
 			}
 		},
+		"Mockup": {
+			"block": "mockup",
+			"root": ".rf-mockup",
+			"dataRune": "mockup",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"device": {
+					"source": "meta",
+					"default": "browser",
+					"classPattern": ".rf-mockup--{value}",
+					"dataAttribute": "data-device"
+				},
+				"color": {
+					"source": "meta",
+					"default": "dark",
+					"classPattern": ".rf-mockup--{value}",
+					"dataAttribute": "data-color"
+				}
+			}
+		},
 		"HowTo": {
 			"block": "howto",
 			"root": ".rf-howto",

package/index.css

@@ -55,6 +55,7 @@
 @import './styles/runes/lore.css';
 @import './styles/runes/itinerary.css';
 @import './styles/runes/map.css';
+@import './styles/runes/mockup.css';
 @import './styles/runes/nav.css';
 @import './styles/runes/organization.css';
 @import './styles/runes/page-section.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -46,10 +46,10 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.7.1",
-    "@refrakt-md/transform": "0.7.1",
-    "@refrakt-md/types": "0.7.1",
-    "@refrakt-md/svelte": "0.7.1"
+    "@refrakt-md/runes": "0.7.2",
+    "@refrakt-md/transform": "0.7.2",
+    "@refrakt-md/types": "0.7.2",
+    "@refrakt-md/svelte": "0.7.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/styles/runes/accordion.css

@@ -5,6 +5,42 @@
 	overflow: hidden;
 	margin: 1.5rem 0;
 }
+.rf-accordion__header {
+	margin-bottom: 1.5rem;
+}
+.rf-accordion__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-accordion__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-accordion__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-accordion__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-accordion__headline {
+	margin-top: 0;
+}
+.rf-accordion__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-accordion__image {
+	margin-bottom: 1rem;
+}
 .rf-accordion__items {
 	display: contents;
 }

package/styles/runes/bento.css

@@ -2,6 +2,42 @@
 .rf-bento {
 	margin: 1.5rem 0;
 }
+.rf-bento__header {
+	margin-bottom: 1.5rem;
+}
+.rf-bento__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-bento__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-bento__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-bento__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-bento__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-bento__headline {
+	margin-top: 0;
+}
+.rf-bento__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-bento__image {
+	margin-bottom: 1rem;
+}
 .rf-bento__grid {
 	display: grid;
 	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);

package/styles/runes/cta.css

@@ -3,9 +3,53 @@
 	text-align: center;
 	padding: 3.5rem 2rem 3rem;
 }
+.rf-cta__header {
+	margin-bottom: 1.5rem;
+}
+/* Higher specificity needed to override .rf-cta p (0,1,1) */
+.rf-cta .rf-cta__eyebrow {
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.75rem;
+	max-width: none;
+}
+/* Pill-badge variant when eyebrow contains a link */
+.rf-cta .rf-cta__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-cta .rf-cta__eyebrow:has(a):hover {
+	border-color: var(--rf-color-muted);
+}
+.rf-cta .rf-cta__eyebrow:has(a) a {
+	color: var(--rf-color-primary);
+	font-weight: 600;
+	text-decoration: none;
+}
+.rf-cta .rf-cta__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+}
+.rf-cta__image {
+	margin-bottom: 1.5rem;
+}
 .rf-cta h1,
 .rf-cta h2,
-.rf-cta h3 {
+.rf-cta h3,
+.rf-cta__headline {
 	font-size: 2.5rem;
 	font-weight: 750;
 	letter-spacing: -0.03em;
@@ -17,7 +61,9 @@
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 }
-.rf-cta p {
+/* Higher specificity needed to override .rf-cta p (0,1,1) */
+.rf-cta p,
+.rf-cta .rf-cta__blurb {
 	font-size: 1.15rem;
 	color: var(--rf-color-muted);
 	max-width: 540px;

package/styles/runes/feature.css

@@ -2,6 +2,43 @@
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
+.rf-feature__header {
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+.rf-feature__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-feature__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-feature__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-feature__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-feature__headline {
+	margin-top: 0;
+}
+.rf-feature__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-feature__image {
+	margin-bottom: 1rem;
+}
 .rf-feature__body {
 	display: contents;
 }
@@ -24,6 +61,7 @@
 .rf-feature--split .rf-feature__body {
 	display: block;
 }
+.rf-feature--split .rf-feature__header,
 .rf-feature--split h2 {
 	text-align: left;
 }

package/styles/runes/hero.css

@@ -6,6 +6,49 @@
 	background-position: center;
 	overflow: hidden;
 }
+.rf-hero__header {
+	margin-bottom: 2rem;
+}
+/* Higher specificity needed to override .rf-hero p (0,1,1) */
+.rf-hero .rf-hero__eyebrow {
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 1rem;
+	max-width: none;
+}
+/* Pill-badge variant when eyebrow contains a link */
+.rf-hero .rf-hero__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-hero .rf-hero__eyebrow:has(a):hover {
+	border-color: var(--rf-color-muted);
+}
+.rf-hero .rf-hero__eyebrow:has(a) a {
+	color: var(--rf-color-primary);
+	font-weight: 600;
+	text-decoration: none;
+}
+.rf-hero .rf-hero__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+}
+.rf-hero__image {
+	margin-bottom: 1.5rem;
+}
 .rf-hero__actions {
 	max-width: 720px;
 	margin: 0 auto;
@@ -43,7 +86,8 @@
 	border: 1px solid var(--rf-color-border);
 	white-space: nowrap;
 }
-.rf-hero h1 {
+.rf-hero h1,
+.rf-hero__headline {
 	font-size: 3.25rem;
 	font-weight: 800;
 	letter-spacing: -0.035em;
@@ -54,13 +98,16 @@
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 }
-.rf-hero p {
+/* Higher specificity needed to override .rf-hero p (0,1,1) */
+.rf-hero p,
+.rf-hero .rf-hero__blurb {
 	font-size: 1.2rem;
 	line-height: 1.65;
 	color: var(--rf-color-muted);
 	margin: 0 0 2rem;
 }
-.rf-hero--center p {
+.rf-hero--center p,
+.rf-hero--center .rf-hero__blurb {
 	max-width: 560px;
 	margin-left: auto;
 	margin-right: auto;

package/styles/runes/mockup.css

@@ -0,0 +1,503 @@
+/* Mockup — Device frame chrome around content */
+
+.rf-mockup {
+	--mockup-bezel-dark: #1a1a1a;
+	--mockup-bezel-light: #e5e5e5;
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+	--mockup-shadow: var(--rf-shadow-lg);
+	--mockup-scale: 1;
+	display: inline-block;
+	margin: 1.5rem 0;
+	transform: scale(var(--mockup-scale));
+	transform-origin: top center;
+}
+
+/* ── Color modifiers ── */
+
+.rf-mockup--dark {
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+	--mockup-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.rf-mockup--light {
+	--mockup-bezel: var(--mockup-bezel-light);
+	--mockup-chrome: #f5f5f5;
+	--mockup-chrome-text: #666;
+	--mockup-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
+}
+
+.rf-mockup--auto {
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+}
+
+/* ── Frame (wraps everything) ── */
+
+.rf-mockup__frame {
+	position: relative;
+	box-shadow: var(--mockup-shadow);
+}
+
+/* ── Viewport (content area) ── */
+
+.rf-mockup__viewport {
+	overflow: auto;
+	background: var(--rf-color-bg);
+}
+
+.rf-mockup__viewport > *:first-child {
+	margin-top: 0;
+}
+
+.rf-mockup__viewport > *:last-child {
+	margin-bottom: 0;
+}
+
+/* ── Label ── */
+
+.rf-mockup__label {
+	text-align: center;
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: var(--rf-color-muted);
+	margin-top: 0.75rem;
+}
+
+/* ═══════════════════════════════════════
+   MOBILE DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Bezel (mobile/tablet outer shell) ── */
+
+.rf-mockup__bezel {
+	background: var(--mockup-bezel);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+/* ── Notch variants ── */
+
+.rf-mockup__notch {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
+}
+
+.rf-mockup__notch--dynamic-island {
+	width: 120px;
+	height: 34px;
+	top: 12px;
+	background: #000;
+	border-radius: 20px;
+}
+
+.rf-mockup__notch--classic {
+	width: 150px;
+	height: 28px;
+	top: 0;
+	background: var(--mockup-bezel);
+	border-radius: 0 0 20px 20px;
+}
+
+.rf-mockup__notch--punch-hole {
+	width: 12px;
+	height: 12px;
+	top: 16px;
+	background: #000;
+	border-radius: var(--rf-radius-full);
+}
+
+/* ── Status bar ── */
+
+.rf-mockup__status-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 1.5rem;
+	height: 44px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-text);
+	background: var(--rf-color-bg);
+	position: relative;
+	z-index: 1;
+}
+
+.rf-mockup__status-time {
+	font-variant-numeric: tabular-nums;
+}
+
+.rf-mockup__status-icons::after {
+	content: '\25CF\25CF\25CF \25AE 100%';
+	font-size: 0.625rem;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* ── Home indicator ── */
+
+.rf-mockup__home-indicator {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+	background: var(--rf-color-bg);
+}
+
+.rf-mockup__home-indicator::after {
+	content: '';
+	display: block;
+	width: 134px;
+	height: 5px;
+	background: var(--rf-color-text);
+	border-radius: var(--rf-radius-full);
+	opacity: 0.2;
+}
+
+/* ── iPhone 15 ── */
+
+.rf-mockup--iphone-15 .rf-mockup__frame {
+	width: 393px;
+	border-radius: 55px;
+}
+
+.rf-mockup--iphone-15 .rf-mockup__bezel {
+	border-radius: 55px;
+	border: 10px solid var(--mockup-bezel);
+}
+
+.rf-mockup--iphone-15 .rf-mockup__viewport {
+	height: 852px;
+	border-radius: 0;
+}
+
+/* ── iPhone SE ── */
+
+.rf-mockup--iphone-se .rf-mockup__frame {
+	width: 375px;
+	border-radius: 40px;
+}
+
+.rf-mockup--iphone-se .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 10px solid var(--mockup-bezel);
+	padding-bottom: 60px;
+}
+
+.rf-mockup--iphone-se .rf-mockup__notch--classic {
+	position: relative;
+	top: auto;
+	left: auto;
+	transform: none;
+	width: 100%;
+	height: 60px;
+	background: var(--mockup-bezel);
+	border-radius: 0;
+}
+
+.rf-mockup--iphone-se .rf-mockup__bezel::after {
+	content: '';
+	position: absolute;
+	bottom: 14px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 36px;
+	height: 36px;
+	border: 2px solid var(--mockup-chrome-text);
+	border-radius: var(--rf-radius-full);
+	opacity: 0.5;
+}
+
+.rf-mockup--iphone-se .rf-mockup__viewport {
+	height: 667px;
+}
+
+/* ── Pixel ── */
+
+.rf-mockup--pixel .rf-mockup__frame {
+	width: 412px;
+	border-radius: 40px;
+}
+
+.rf-mockup--pixel .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 8px solid var(--mockup-bezel);
+}
+
+.rf-mockup--pixel .rf-mockup__viewport {
+	height: 915px;
+}
+
+/* ── Generic phone ── */
+
+.rf-mockup--phone .rf-mockup__frame {
+	width: 390px;
+	border-radius: 48px;
+}
+
+.rf-mockup--phone .rf-mockup__bezel {
+	border-radius: 48px;
+	border: 10px solid var(--mockup-bezel);
+}
+
+.rf-mockup--phone .rf-mockup__viewport {
+	height: 844px;
+}
+
+/* ═══════════════════════════════════════
+   TABLET DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── iPad ── */
+
+.rf-mockup--ipad .rf-mockup__frame {
+	width: 820px;
+	border-radius: 24px;
+}
+
+.rf-mockup--ipad .rf-mockup__bezel {
+	border-radius: 24px;
+	border: 12px solid var(--mockup-bezel);
+}
+
+.rf-mockup--ipad .rf-mockup__viewport {
+	height: 1180px;
+}
+
+/* ── Generic tablet ── */
+
+.rf-mockup--tablet .rf-mockup__frame {
+	width: 800px;
+	border-radius: 20px;
+}
+
+.rf-mockup--tablet .rf-mockup__bezel {
+	border-radius: 20px;
+	border: 14px solid var(--mockup-bezel);
+}
+
+.rf-mockup--tablet .rf-mockup__viewport {
+	height: 1100px;
+}
+
+/* ═══════════════════════════════════════
+   DESKTOP DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Title bar (browser / macbook) ── */
+
+.rf-mockup__title-bar {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.625rem 1rem;
+	background: var(--mockup-chrome);
+	min-height: 2.5rem;
+}
+
+/* ── Traffic lights ── */
+
+.rf-mockup__traffic-lights {
+	display: flex;
+	gap: 0.5rem;
+	flex-shrink: 0;
+}
+
+.rf-mockup__traffic-light {
+	display: block;
+	width: 12px;
+	height: 12px;
+	border-radius: var(--rf-radius-full);
+}
+
+.rf-mockup__traffic-light--close {
+	background: #ff5f57;
+}
+
+.rf-mockup__traffic-light--minimize {
+	background: #febc2e;
+}
+
+.rf-mockup__traffic-light--maximize {
+	background: #28c840;
+}
+
+/* ── Address bar (browser only) ── */
+
+.rf-mockup__address-bar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	max-width: 60%;
+	margin: 0 auto;
+	padding: 0.25rem 0.75rem;
+	background: rgba(255, 255, 255, 0.08);
+	border-radius: var(--rf-radius-sm);
+	min-height: 1.75rem;
+}
+
+.rf-mockup__url {
+	font-size: 0.75rem;
+	font-family: var(--rf-font-sans);
+	color: var(--mockup-chrome-text);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* ── Browser ── */
+
+.rf-mockup--browser .rf-mockup__frame {
+	width: 100%;
+	max-width: 960px;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+	overflow: hidden;
+}
+
+.rf-mockup--browser .rf-mockup__title-bar {
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+}
+
+.rf-mockup--browser .rf-mockup__viewport {
+	height: 800px;
+	border: 1px solid var(--rf-color-border);
+	border-top: none;
+}
+
+/* ── Browser dark ── */
+
+.rf-mockup--browser-dark .rf-mockup__frame {
+	width: 100%;
+	max-width: 960px;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+	overflow: hidden;
+}
+
+.rf-mockup--browser-dark .rf-mockup__title-bar {
+	background: #1a1a1a;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+}
+
+.rf-mockup--browser-dark .rf-mockup__address-bar {
+	background: rgba(255, 255, 255, 0.06);
+}
+
+.rf-mockup--browser-dark .rf-mockup__viewport {
+	height: 800px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: none;
+}
+
+/* ── MacBook ── */
+
+.rf-mockup--macbook .rf-mockup__frame {
+	width: 1440px;
+	max-width: 100%;
+}
+
+.rf-mockup--macbook .rf-mockup__title-bar {
+	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+	border: 3px solid var(--mockup-bezel);
+	border-bottom: none;
+}
+
+.rf-mockup--macbook .rf-mockup__viewport {
+	height: 900px;
+	border: 3px solid var(--mockup-bezel);
+	border-top: none;
+	border-bottom: none;
+}
+
+/* ── Keyboard ── */
+
+.rf-mockup__keyboard {
+	background: linear-gradient(to bottom, var(--mockup-bezel), color-mix(in srgb, var(--mockup-bezel), #000 15%));
+	padding: 0.5rem 2rem 0.75rem;
+	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
+	display: flex;
+	justify-content: center;
+}
+
+.rf-mockup__trackpad {
+	width: 40%;
+	height: 6px;
+	background: color-mix(in srgb, var(--mockup-bezel), #fff 10%);
+	border-radius: var(--rf-radius-full);
+	margin-top: 0.25rem;
+}
+
+/* ═══════════════════════════════════════
+   SPECIAL DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Watch ── */
+
+.rf-mockup--watch .rf-mockup__frame {
+	width: 198px;
+	border-radius: 40px;
+	position: relative;
+}
+
+.rf-mockup--watch .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 14px solid var(--mockup-bezel);
+}
+
+.rf-mockup--watch .rf-mockup__bezel::after {
+	content: '';
+	position: absolute;
+	right: -6px;
+	top: 35%;
+	width: 6px;
+	height: 28px;
+	background: var(--mockup-bezel);
+	border-radius: 0 3px 3px 0;
+}
+
+.rf-mockup--watch .rf-mockup__viewport {
+	height: 242px;
+	border-radius: 26px;
+}
+
+/* ── None (no frame) ── */
+
+.rf-mockup--none .rf-mockup__frame {
+	box-shadow: none;
+}
+
+.rf-mockup--none .rf-mockup__viewport {
+	border: 1px dashed var(--rf-color-border);
+	border-radius: var(--rf-radius-sm);
+}
+
+/* ═══════════════════════════════════════
+   CONTEXT: inside preview
+   ═══════════════════════════════════════ */
+
+.rf-preview .rf-mockup {
+	margin: 0;
+}
+
+/* ═══════════════════════════════════════
+   DARK MODE
+   ═══════════════════════════════════════ */
+
+@media (prefers-color-scheme: dark) {
+	.rf-mockup--auto {
+		--mockup-bezel: var(--mockup-bezel-light);
+		--mockup-chrome: #3a3a3a;
+		--mockup-chrome-text: #aaa;
+	}
+
+	.rf-mockup--light .rf-mockup__address-bar {
+		background: rgba(0, 0, 0, 0.15);
+	}
+}

package/styles/runes/pricing.css

@@ -2,13 +2,45 @@
 .rf-pricing {
 	padding: 2rem 0;
 }
-.rf-pricing > header {
+.rf-pricing > header,
+.rf-pricing__header {
 	text-align: center;
 	margin-bottom: 2rem;
 }
-.rf-pricing > header h1 {
+.rf-pricing > header h1,
+.rf-pricing__headline {
 	margin-top: 0;
 }
+.rf-pricing__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-pricing__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-pricing__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-pricing__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-pricing__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-pricing__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-pricing__image {
+	margin-bottom: 1rem;
+}
 .rf-pricing__tiers {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

package/styles/runes/reveal.css

@@ -2,6 +2,42 @@
 .rf-reveal {
 	margin: 1.5rem 0;
 }
+.rf-reveal__header {
+	margin-bottom: 1.5rem;
+}
+.rf-reveal__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-reveal__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-reveal__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-reveal__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-reveal__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-reveal__headline {
+	margin-top: 0;
+}
+.rf-reveal__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-reveal__image {
+	margin-bottom: 1rem;
+}
 .rf-reveal__steps {
 	display: flex;
 	flex-direction: column;

package/styles/runes/steps.css

@@ -3,6 +3,42 @@
 	counter-reset: step;
 	margin: 1.5rem 0;
 }
+.rf-steps__header {
+	margin-bottom: 1.5rem;
+}
+.rf-steps__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-steps__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-steps__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-steps__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-steps__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-steps__headline {
+	margin-top: 0;
+}
+.rf-steps__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-steps__image {
+	margin-bottom: 1rem;
+}
 .rf-steps ol {
 	list-style: none;
 	padding-left: 0;

package/styles/runes/tabs.css

@@ -6,6 +6,42 @@
 	margin: 1.5rem 0;
 	background: var(--rf-color-bg);
 }
+.rf-tabs__header {
+	margin-bottom: 1.5rem;
+}
+.rf-tabs__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-tabs__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-tabs__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-tabs__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-tabs__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-tabs__headline {
+	margin-top: 0;
+}
+.rf-tabs__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-tabs__image {
+	margin-bottom: 1rem;
+}
 .rf-tabs__tabs,
 .rf-tabs__panels {
 	list-style: none;