diff --git a/content/course/tech-for-non-technical-founders-2026/_index.md b/content/course/tech-for-non-technical-founders-2026/_index.md index 6030e1e21..32beb7a07 100644 --- a/content/course/tech-for-non-technical-founders-2026/_index.md +++ b/content/course/tech-for-non-technical-founders-2026/_index.md @@ -39,7 +39,7 @@ hero_secondary_url: "/course/tech-for-non-technical-founders-2026/quickstart/" hero_secondary_text: "3-minute Quickstart" --- -Five modules take you from that idea to a signed paid pilot: test demand with strangers, interview the people who respond, turn their words into a one-page brief, build the MVP yourself with no-code tools, and charge your first customer before you ship. The first checkpoint comes fast: two to three weeks in, at an evenings-and-weekends pace, you get a go/iterate/kill verdict on your **Founding Hypothesis** (the one-sentence version of your idea: who the customer is, what problem you solve, why they'd pick you) from real demand data instead of polite nods from friends. +The first checkpoint comes fast: two to three weeks in, at an evenings-and-weekends pace, you get a go/iterate/kill verdict on your **Founding Hypothesis** (the one-sentence version of your idea: who the customer is, what problem you solve, why they'd pick you) from real demand data instead of polite nods from friends. Two ways in: [Start Lesson 1.1 →](/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/) or [see the full syllabus ↓](#module-map). *Prefer a map first? [How This Course Works](/course/tech-for-non-technical-founders-2026/how-this-course-works/) (10 minutes) and the [FAQ](/course/tech-for-non-technical-founders-2026/faq/) cover the route and the most common blockers.* @@ -66,11 +66,11 @@ Why free? A founder who validates before building makes a better future client t The five mistakes below sink more first products than bad code does - we have watched each one play out. The course heads each one off: @@ -78,30 +78,26 @@ The five mistakes below sink more first products than bad code does - we have wa To save your time, here is what we intentionally exclude - none of it is needed for the promised result (idea → first paying customer): - +
+
+

How to code

+

The course assumes zero coding ability - Lovable + Supabase + Stripe handle the technical side.

+
+
+

Hiring & managing a team

+

Covered as a build-path decision in Lesson 4.1, not as org design; early-stage management lives in the Friday Demo Rule + Weekly Dev Report.

+
+
+

Raising venture capital

+

The course produces the artifacts investors want to see. It does not teach pitch decks or fundraising mechanics.

+
+
+

Acquisition at scale

+

Module 5 covers your first customers; SEO, content marketing, and paid acquisition at scale are a separate discipline.

+
+
-
- Why these are out - -
- -If you need something on this list, the course won't help with it. +

Also out of scope: mobile-only and marketplace-only specifics (they have their own playbooks), and legal incorporation, taxes, and IP filings - use a lawyer or a service like Stripe Atlas, Clerky, or Firstbase. If you need something on this list, the course won't help with it.

@@ -112,128 +108,140 @@ Read the modules in order - each module's output is the next module's input, and
- Module 1 -

Hypothesis & Smoke Test

-

Output: a one-sentence Founding Hypothesis + a live smoke-test page (a landing page describing your unbuilt product, to see whether strangers sign up) with a Stripe price button.

-
- 5 lessons -

Start here if you don't have a one-sentence Founding Hypothesis yet, or you have one but never tested demand with a landing page.

-
    -
  1. 1.1 Form Your Founding Hypothesis
    2. -
  2. 1.2 Smoke Test: Build the Page with an AI Builder
    3. -
  3. 1.3 Wire Tracking Before Traffic Starts
    4. -
  4. 1.4 Smoke Test: Run It and Read the Signal
    5. -
  5. 1.5 Price Your Hypothesis on the Smoke-Test Page
    6. -
-
-

You leave with: a Founding Hypothesis, demand data from cold strangers, and a price test - before you've built anything.

-
-

Start Module 1 →

-

See it in action: Mia builds TutorMatch - a full Module 1 walkthrough

+
+
+ Module 1 +

Hypothesis & Smoke Test

+
+

Deliverable: a one-sentence Founding Hypothesis + a live smoke-test page (a landing page describing your unbuilt product, to see whether strangers sign up) with a Stripe price button.

+
+
+
+

Chapters

+
    +
  1. 1.1 Form Your Founding Hypothesis
    2. +
  2. 1.2 Smoke Test: Build the Page with an AI Builder
    3. +
  3. 1.3 Wire Tracking Before Traffic Starts
    4. +
  4. 1.4 Smoke Test: Run It and Read the Signal
    5. +
  5. 1.5 Price Your Hypothesis on the Smoke-Test Page
    6. +
+

See it in action: Mia builds TutorMatch

+
+
- Module 2 -

Validate the Problem

-

Output: 10 Mom Test interviews (customer conversations run under rules that stop people from politely lying to you - ask about past behavior, never pitch) + a prototype built with Lovable (an AI app builder that turns text prompts into working screens), shown to 5 of them.

-
- 6 lessons -

Start here if you've never talked to 10+ potential customers about the problem you want to solve.

-
    -
  1. 2.1 The Mom Test: Ask About the Past, Not the Future
    2. -
  2. 2.2 Sharpen Your Question List with AI Personas optional
    Skip if you've interviewed before. The Mom Test in 2.1 is the core; this lesson rehearses your questions with AI personas first.
    3. -
  3. 2.3 Find 10 People: Where to Look
    4. -
  4. 2.4 Find 10 People: What to Say
    5. -
  5. 2.5 Mom Test Synthesis: Build, Pivot, or Kill
    6. -
  6. 2.6 Build a Clickable Prototype
    7. -
-

Templates: Interview Script, Interview Scorecard, Validated Problem Statement, Outreach Sequence

-
-

You leave with: 10 scored interview transcripts, a written build/pivot/kill decision, and a prototype 5 real customers have clicked through.

-
-

Start Module 2 →

-

See it in action: Mia interviews ten parents - a full Module 2 walkthrough

+
+
+ Module 2 +

Validate the Problem

+
+

Deliverable: 10 Mom Test interviews (customer conversations run under rules that stop people from politely lying to you - ask about past behavior, never pitch) + a prototype built with Lovable (an AI app builder that turns text prompts into working screens), shown to 5 of them.

+
+
+
+

Chapters

+
    +
  1. 2.1 The Mom Test: Ask About the Past, Not the Future
    2. +
  2. 2.2 Sharpen Your Question List with AI Personas optional
    3. +
  3. 2.3 Find 10 People: Where to Look
    4. +
  4. 2.4 Find 10 People: What to Say
    5. +
  5. 2.5 Mom Test Synthesis: Build, Pivot, or Kill
    6. +
  6. 2.6 Build a Clickable Prototype
    7. +
+

See it in action: Mia interviews ten parents

+
+
-
- - Modules 3-5 - Design, build, first customer - -
- Module 3 -

Design from Evidence

-

Output: one-page Product Brief drafted from interview transcripts.

-
- 2 lessons -

Start here if you've validated the problem but don't have a one-page Product Brief.

-
    -
  1. 3.1 The One-Page Product Brief (Vibe PRD)
    2. -
  2. 3.2 Quality-check Your Brief: Features to Outcomes
    3. -
-

Template: Vibe PRD

-

Glossary: Five Tech Words to Stop Nodding At (reference, not in the linear path)

-
-

You leave with: a one-page Product Brief where every feature traces back to something a customer actually said.

-
-

Start Module 3 →

-

See it in action: Mia writes the one-page brief

+
+
+ Module 3 +

Design from Evidence

+
+

Deliverable: one-page Product Brief drafted from interview transcripts.

+
+
+
+

Chapters

+
    +
  1. 3.1 The One-Page Product Brief (Vibe PRD)
    2. +
  2. 3.2 Quality-check Your Brief: Features to Outcomes
    3. +
+

See it in action: Mia writes the one-page brief

+
+
- Module 4 -

Build It Yourself

-

Output: a live MVP at a real URL, built on Lovable + Supabase (a hosted database with user login built in) + Stripe, ownership locked Day 1.

-
- 5 lessons -

Start here if you have a Product Brief and need to build the MVP.

-
    -
  1. 4.1 Should You Hire? The 2026 Decision Tree
    2. -
  2. 4.2 Who Owns Your GitHub, AWS, and Database?
    3. -
  3. 4.3 The Self-Serve MVP Stack: Tools & Setup
    4. -
  4. 4.4 The Self-Serve MVP Stack: Build Phases
    5. -
  5. 4.5 Vibe Coding Done Right: 5 Ceiling Signals optional
    Skip on first pass. Come back when your no-code build hits a wall - a feature you can't add, a query you can't tune, an auth flow Lovable can't handle.
    6. -
-

Templates: Build Path Decision Worksheet, Ownership Checklist, Self-Serve Stack Walkthrough, Pre-Launch Checklist

-
-

You leave with: a live MVP at a real URL that you built and you own - every account in your name from Day 1.

-
-

Start Module 4 →

-

See it in action: Mia ships TutorMatch

+
+
+ Module 4 +

Build It Yourself

+
+

Deliverable: a live MVP at a real URL, built on Lovable + Supabase (a hosted database with user login built in) + Stripe, ownership locked Day 1.

+
+
+
+

Chapters

+
    +
  1. 4.1 Should You Hire? The 2026 Decision Tree
    2. +
  2. 4.2 Who Owns Your GitHub, AWS, and Database?
    3. +
  3. 4.3 The Self-Serve MVP Stack: Tools & Setup
    4. +
  4. 4.4 The Self-Serve MVP Stack: Build Phases
    5. +
  5. 4.5 Vibe Coding Done Right: 5 Ceiling Signals optional
    6. +
+

See it in action: Mia ships TutorMatch

+
+
- Module 5 -

First Paying Customer

-

Output: one paying customer through a deliberately chosen channel.

-
- 7 lessons -

Start here if your MVP is live but you don't have a paying customer with a signed pilot.

-
    -
  1. 5.1 Your First Customer Is Not a Marketing Problem
    2. -
  2. 5.2 Choose Your Channel Before You Send One Message optional
    Skip if you already have a channel in mind (LinkedIn, cold email, or personal network). The core path is 5.3-5.5 (personal network) → 5.6 (paid pilot).
    3. -
  3. 5.3 Build Your 50-Name Network List
    4. -
  4. 5.4 Write the Outreach Message
    5. -
  5. 5.5 Send, Track, and Read the Replies
    6. -
  6. 5.6 Charge Before You Ship: The Paid Pilot Contract
    7. -
  7. 5.7 Going Outbound Without a Sales Team optional
    Skip if your personal network in 5.3-5.5 produced your first 10 customers. This is the systematic path for when warm intros run out.
    8. -
-

Template: First Paying Customer Operating Kit

-
-

You leave with: a signed paid pilot and your first dollar from a customer, not a favor.

-
-

Start Module 5 →

-

See it in action: Mia gets paid

+
+
+ Module 5 +

First Paying Customer

+
+

Deliverable: one paying customer through a deliberately chosen channel.

+
+
+
+

Chapters

+
    +
  1. 5.1 Your First Customer Is Not a Marketing Problem
    2. +
  2. 5.2 Choose Your Channel Before You Send One Message optional
    3. +
  3. 5.3 Build Your 50-Name Network List
    4. +
  4. 5.4 Write the Outreach Message
    5. +
  5. 5.5 Send, Track, and Read the Replies
    6. +
  6. 5.6 Charge Before You Ship: The Paid Pilot Contract
    7. +
  7. 5.7 Going Outbound Without a Sales Team optional
    8. +
+

See it in action: Mia gets paid

+
+
-
-
diff --git a/docs/design-system/course-landing-components-2026-08.md b/docs/design-system/course-landing-components-2026-08.md index 3f2e51cd4..7a4a412d9 100644 --- a/docs/design-system/course-landing-components-2026-08.md +++ b/docs/design-system/course-landing-components-2026-08.md @@ -92,3 +92,46 @@ authorship line (`gray-400 small`, white link). island) — dark-as-island, never dark-as-theme. - Type scale: 12 uppercase eyebrows → 24 card titles → 36-44 section H2s → 48-72 hero. Nothing between. + +--- + +## Reference 2 — shuffle b1a3fc85 (W1.6, captured 2026-08-01) + +Second ideal reference from Paul (durable capture: +`40.28-reference-shuffle2-full.jpeg`). Same JetVelocity token-map rules as +above (never ship the raw hues). Mid-page components only. This reference is +FLATTER and LESS text-heavy than the current landing — its lesson lists are +shown inline, not behind expanders. It is the north star for W1.6's two named +fixes: kill the expander density and cut on-page text. + +### R2.1 Numbered-mistake grid (3-col) — "Why this course exists" +`THE REALITY CHECK` eyebrow → H2 → one lede line → a 3×2 grid of cards. Each +card: ruby counter `01`-`05` (Space Grotesk 700) → **bold short title** → +2-line gray description. The 6th cell is the dark CTA ("Ready to stop +guessing? → Jump straight to syllabus"). **Convergence:** our `.mistake-list` +already renders this grid + dark 6th cell; W1.6 adds the bold-title lead-in +each card was missing (title = 2-4 word summary, description keeps its module +deep link). REPLACES the run-on single-sentence mistake bullets. + +### R2.2 Flat module rows (no expander) — "The 5-Module Blueprint" +`THE ROADMAP` eyebrow → H2 → one lede line → one wide card PER module, all +equal, none grouped, none collapsed. Card structure: **head** (MODULE N +kicker + title on the left, `Deliverable: …` on the right) → hairline → +**body** two-column: left = `CHAPTERS` label + a flat numbered lesson list +(`1.1` mono + title link); right = a light `YOU LEAVE WITH` panel (✓ + one +sentence). **Convergence:** REPLACES our 5 `.module-card__details` expanders + +the `Modules 3-5` `.module-group` expander (6 expanders → 0). Cut off-landing: +per-lesson routers, optional-lesson skip-notes, template lists, per-module +"Start Module N" buttons (all reachable on the lesson pages + the kit). Kept +reachable: the numbered lesson links, the per-module "See it in action" Mia +walkthrough link (one compact line), the module deliverable + glossary. + +### R2.3 Scope cards (2×2) — "What this course does NOT cover" +`SCOPE RULES` eyebrow → H2 → lede → a 2×2 grid, each cell a card with a bold +title + one-line "why it's out". Reference renders this dark; **we map it to +LIGHT bordered cards** — the max-3-dark-zones budget (hero card + mistake CTA +cell + endcap) is already spent, so a 4th dark band is out. **Convergence:** +REPLACES our 7-item `.not-cover-list` + the `.not-cover-details` expander (7th +expander → 0). Seven exclusions fold into 4 cards (hiring+managing merge; +SEO/content/paid merge) + one residual line for mobile/marketplace + legal, so +no fact is deleted — only relocated into fewer, denser components. diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.28-reference-shuffle2-full.jpeg b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.28-reference-shuffle2-full.jpeg new file mode 100644 index 000000000..7f9e9f7c8 Binary files /dev/null and b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.28-reference-shuffle2-full.jpeg differ diff --git a/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.29-w16-result-full.jpeg b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.29-w16-result-full.jpeg new file mode 100644 index 000000000..50c50b4ed Binary files /dev/null and b/docs/projects/2605-tech-for-non-technical-founders/40-49-review/40.29-w16-result-full.jpeg differ diff --git a/test/fixtures/screenshots/macos/desktop/course/landing.png b/test/fixtures/screenshots/macos/desktop/course/landing.png index 419951a88..379ae199a 100644 Binary files a/test/fixtures/screenshots/macos/desktop/course/landing.png and b/test/fixtures/screenshots/macos/desktop/course/landing.png differ diff --git a/test/system/desktop_site_test.rb b/test/system/desktop_site_test.rb index 702142a73..66977a380 100644 --- a/test/system/desktop_site_test.rb +++ b/test/system/desktop_site_test.rb @@ -371,12 +371,12 @@ def test_course_chapter end def test_visit_course_chapter_from_landing - # From the course landing, user opens Module 1's lesson list (closed - #
by default) and clicks into the first lesson. + # From the course landing, the module map lists each module's lessons + # inline (W1.6 removed the per-module
expanders), so the user + # clicks straight into the first lesson. visit "/course/tech-for-non-technical-founders-2026/" within ".post-content" do - find("#module-1 summary").click find("a", text: /Form Your Founding Hypothesis/, match: :first, visible: true).click end diff --git a/themes/beaver/assets/css/pages/course-list.css b/themes/beaver/assets/css/pages/course-list.css index 42935a7b6..95dfd3b31 100644 --- a/themes/beaver/assets/css/pages/course-list.css +++ b/themes/beaver/assets/css/pages/course-list.css @@ -58,20 +58,15 @@ } } -/* Module-card resource rows — labeled stacked rows replace the single - run-on link paragraph. Line-height gives mobile tap spacing. */ -.blog .module-card__extras-row, -.blog .single-content .module-card__extras p.module-card__extras-row { - font-size: 15px; - color: #5f6470; - line-height: 1.9; - margin: 0 0 6px; -} -.blog .module-card__extras-row:last-child { - margin-bottom: 0; -} -.blog .module-card__extras-row strong { - color: #3a3f4a; +/* W1.6 (shuffle2 R2.1) — bold title lead-in on each mistake card so the + grid scans as title + description, not one run-on sentence. */ +.blog .mistake-list__title { + display: block; + margin-bottom: 4px; + font-family: "Space Grotesk", system-ui, sans-serif; + font-weight: 700; + font-size: 16px; + color: #1a1a2e; } /* === L4-visual (40.25) — landing-only restyle. Bundle is exclusive to @@ -119,29 +114,136 @@ L4 fix (P2): the strong used to be pinned top-right via position:absolute, detached from the sentence it labels — read as a broken data binding. Now it's an inline ruby lead-in, attached. */ +/* W1.6 flat module rows (shuffle2 R2.2) — wide cards, chapters shown + inline (no expander). Head = heading left + deliverable right; body = + chapters left + a light "you leave with" panel right. */ .blog .module-card { position: relative; + background: #ffffff; border-radius: 16px; - border-color: #ececf0; + border: 1px solid #ececf0; box-shadow: 0 6px 24px rgba(26, 26, 46, 0.07); + padding: 28px 30px; + margin: 0 0 20px; +} +.blog .module-card__head { + display: grid; + gap: 10px 40px; + padding-bottom: 20px; + border-bottom: 1px solid #f1f2f4; + margin-bottom: 20px; } .blog .module-card__badge { + display: block; color: #9ca3af; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; } -.blog .module-card__output { - background: rgba(204, 52, 45, 0.05); - border: 1px solid rgba(204, 52, 45, 0.16); - border-radius: 8px; - padding: 14px 16px; +.blog .module-card__heading h3 { + /* override the shared `.blog h3:not(.post-title)` !important divider rule */ + margin: 6px 0 0 !important; + border-top: none; + padding-top: 0; + font-family: "Space Grotesk", system-ui, sans-serif; + font-weight: 700; + font-size: 22px; + letter-spacing: -0.01em; } -.blog .module-card__output > strong:first-of-type { +.blog .module-card__deliverable { + margin: 0; + font-size: 15px; + line-height: 1.55; + color: #4b5563; +} +.blog .module-card__deliverable > strong:first-child { color: var(--color-ruby); letter-spacing: 0.02em; } +.blog .module-card__body { + display: grid; + gap: 24px 40px; +} +.blog .module-card__lessons-label, +.blog .module-card__leave-label { + margin: 0 0 12px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #9ca3af; +} +.blog ol.module-card__chapters { + margin: 0; + padding: 0; + list-style: none; +} +.blog ol.module-card__chapters > li { + padding: 7px 0; + border-bottom: 1px solid #f5f6f7; + font-size: 15px; + line-height: 1.4; +} +.blog ol.module-card__chapters > li:last-child { + border-bottom: none; +} +.blog .module-card__num { + display: inline-block; + min-width: 34px; + font-family: "JetBrains Mono", ui-monospace, monospace; + font-size: 13px; + color: var(--color-ruby); +} +.blog .module-card__optional { + margin-left: 6px; + padding: 1px 6px; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #9ca3af; + border: 1px solid #e5e7eb; + border-radius: 2px; +} +.blog .module-card__mia { + margin: 16px 0 0; + font-size: 14px; + color: #5f6470; +} +.blog .module-card__mia strong { + color: #3a3f4a; +} .blog .module-card__leave { - border-top: 1px solid #f3f4f6; - padding: 20px 0 0; - margin-top: 20px; + background: #fafafa; + border: 1px solid #eef0f2; + border-radius: 12px; + padding: 20px 22px; +} +/* style.css:959 prefixes a green ✓ onto the old single-

.module-card__leave; + this bundle loads after it, so neutralize that inherited pseudo — the ruby + ✓ below sits on the sentence, the label owns the top of the panel. */ +.blog .module-card__leave::before { + content: none; +} +.blog .module-card__leave p:last-child { + margin: 0; + font-size: 15px; + line-height: 1.55; + color: #3a3f4a; +} +.blog .module-card__leave p:last-child::before { + content: "✓ "; + color: var(--color-ruby); + font-weight: 700; +} +@media (min-width: 780px) { + .blog .module-card__head { + grid-template-columns: minmax(0, 290px) minmax(0, 1fr); + align-items: start; + } + .blog .module-card__body { + grid-template-columns: minmax(0, 1fr) minmax(0, 300px); + } } /* V1.3 Dark closing endcap band — obsidian island with a soft ruby @@ -194,31 +296,49 @@ } } -/* L5-condense (40.26) — NOT-cover exclusions as a tight two-col list; - the why-excluded explanations sit in one

below it. */ -.blog ul.not-cover-list { +/* W1.6 scope cards (shuffle2 R2.3) — NOT-cover as a 2x2 light card grid + + one residual line, replacing the two-col list + the why-excluded +
. Light (not the reference's dark): the 3-dark-zone budget is + already spent on the hero card, mistake CTA, and endcap. */ +.blog .scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 4px 28px; - margin: 20px 0 16px; + gap: 16px; + margin: 24px 0 16px; +} +.blog .scope-card { + background: #f8f8fa; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 20px 22px; +} +/* selector carries h3 + 2 classes so it outweighs the shared + `.blog h3:not(.post-title):first-of-type` !important divider rule */ +.blog .scope-card h3.scope-card__title { + margin: 0 0 8px !important; + border-top: none; + padding-top: 0; + font-family: "Space Grotesk", system-ui, sans-serif; + font-weight: 700; + font-size: 17px; + letter-spacing: -0.01em; } -.blog ul.not-cover-list li { +.blog .scope-card p { margin: 0; + font-size: 15px; + line-height: 1.6; + color: #5f6470; +} +.blog .scope-residual { + font-size: 15px; + line-height: 1.7; + color: #5f6470; } @media (max-width: 600px) { - .blog ul.not-cover-list { + .blog .scope-grid { grid-template-columns: 1fr; } } -.blog .not-cover-details summary { - cursor: pointer; - font-size: 15px; - font-weight: 600; - color: var(--color-ruby); -} -.blog .not-cover-details[open] summary { - margin-bottom: 10px; -} /* V1.4 Eyebrow + headline scaffold — uppercase tracked kicker above each section H2, keyed off the stable heading ids. W1.5 eyebrow economy: @@ -302,73 +422,6 @@ } } -/* L5-condense (40.26) — lesson lists live inside a native
per - card, closed by default; the V2.3 two-col grid is gone with them. */ -.blog .module-card__details { - margin: 14px 0 4px; -} -.blog .module-card__details summary { - cursor: pointer; - font-size: 15px; - font-weight: 600; - color: var(--color-ruby); -} -.blog .module-card__details[open] summary { - margin-bottom: 10px; -} -.blog .module-card__details .module-card__router { - font-size: 15px; - color: #5f6470; - margin: 0 0 10px; -} -.blog .module-card__details ol.module-card__chapters { - margin-bottom: 12px; -} - -/* L5 amendment — modules 3-5 grouped behind one card-shaped summary - (demo 1 component #8: the card IS the summary of a native details). */ -.blog .module-group > summary { - cursor: pointer; - list-style: none; - display: flex; - align-items: center; - gap: 14px; - background: #ffffff; - border: 1px solid #ececf0; - border-radius: 14px; - box-shadow: 0 6px 24px rgba(26, 26, 46, 0.07); - padding: 22px 26px; -} -.blog .module-group > summary::-webkit-details-marker { - display: none; -} -.blog .module-group > summary::marker { - content: ""; -} -/* the site-wide summary::before "▸" — the group card carries its own - chevron on the right instead */ -.blog .module-group > summary::before { - content: none; -} -.blog .module-group > summary::after { - content: "▾"; - margin-left: auto; - color: var(--color-ruby); - font-size: 18px; -} -.blog .module-group[open] > summary::after { - content: "▴"; -} -.blog .module-group[open] > summary { - margin-bottom: 28px; -} -.blog .module-group__title { - font-family: "Space Grotesk", system-ui, sans-serif; - font-weight: 700; - font-size: 19px; - letter-spacing: -0.01em; -} - /* W1.5 (40.26 spec §§3-4) — full-bleed tinted hero band, two-column grid, and the obsidian course-window card (replaces the V3 course-hero-card). Tint = ruby at ~5% on white, never the demo's raw hue. */