This page is the living ledger. Every section below is built with the house class vocabulary (vocab.css), and the visible content of each section explains the classes that built it. Read the page or view source - same lesson either way. Build first, prove on glass, then write it down.
Section 1 - Two-Column Flex
This is .flex-container.cols-2
This section is a div.flex-container.cols-2 holding two div.flex-item children. The cols-2 modifier declares two columns explicitly - without a modifier, flex-item defaults to the legacy 4-across basis. On mobile (below 768px, the single house breakpoint) these columns stack vertically.
- Container: flex-container cols-2
- Children: flex-item (any number, wraps)
- Variants: cols-3, cols-4
- Mobile: stacks automatically, nothing to do
Right column
This column exists to prove the split. Drop an image here with img.media - fluid, centered, 80% width, no inline styles, no span wrappers.
Section 2 - The Value-Props Band
The canonical four-across band: div.page-color-band wrapping div.flex-container.cols-4. Full-bleed (100vw), painted with the site's --brand-primary token, so this identical markup renders navy here, maroon on Rory. Headings use h3.white - which as of vocab v1.1 carries no !important; it wins by cascade order.
FOUR ACROSS
This band holds four flex-items. On mobile they stack.
TOKEN PAINTED
Background is var(--brand-primary). Change the token, rebrand the band.
NO IMPORTANT
The .white utility wins by load order, not force. Doctrine, ratified.
EDITOR OWNED
Every word here lives in the page editor. Yoast sees all of it.
Section 3 - The Prose Band (.band-inset)
THIS IS PAGE-COLOR-BAND WITH BAND-INSET
The band-inset modifier adds 8% horizontal padding - the house number - so prose like this sits in a comfortable column while the band itself stays edge to edge. This is the "I AM HERE TO HELP YOU" pattern from the legal cluster: a full-bleed brand stripe carrying a heading and conversion copy, all editable right here in the page editor.
Section 4 - Visibility Utilities
Two elements follow. You will only ever see one, depending on your viewport. This is the single place !important is allowed - existence rules are absolute by design.
You are on MOBILE (or a narrow window). This block is div.mobile-only - it does not exist above 768px.
You are on DESKTOP. This block is div.desktop-only - it does not exist below 769px. Shrink the window and watch this vanish as its sibling appears.
Section 5 - Testimonial
"This is p.testimonial - italic, centered, capped at a readable measure, generous margins. The quote pattern from the legal homepages, generalized into the vocabulary. - A Satisfied Client"
Section 6 - Editable Tabs (whitespace-collapsed to survive wpautop)
Hand-authored, same classes as , zero JavaScript. The input/label/panel elements are glued with no line breaks between them - because WordPress's wpautop would otherwise inject <br> and <p> tags that break the CSS sibling adjacency. One rule: a unique name per tab block per page.
How The Tabs Work
The Markup
A section.fcs-topic-tabs.fcs-tabs-4 wraps a strip of interleaved radio inputs, labels, and panels. The checked input drives which panel shows via a CSS sibling selector. All four panels exist in the HTML at all times, only display toggles, so an AI answer engine can lift any panel's copy whether or not it is the visible tab.
Why Not A Shortcode
The old shortcode pulled bodies from a CPT, so Yoast analyzed eleven characters where the reader saw four panels of copy. Hand-authored in the editor, the same four panels are real content the analyzer counts. Tabs must live in HTML and be editable. Doctrine.
Mobile
Below 768px the same markup collapses to a stacked accordion, label above its panel, no horizontal strip, with zero extra code. One breakpoint, the house standard, does the whole job.
The One Rule
Give each tab block on a page a unique radio name. Two blocks sharing a name would fight over which panel is open. That is the only thing to remember, everything else is copy-paste from the Design Classes tab.
Section 7 - Media (img.media retires the inline-style span)
The old pattern wrapped every image in a span with inline display and width attributes. img.media does it with one class: block, centered, 80% width, fluid, no inline styles, KSES-safe, tokenable. Add img.media-full for edge-to-edge.
Before (the inline-style span - KSES-fragile, untokenable):
<span style="display:inline-block"><img width="80%"></span>
After (one class, everything in the stylesheet):
<img class="media" src="..." alt="descriptive alt for ranking">
Section 8 - Stripe Title (self-contained colored heading stripe)
This Is h1.stripe-title
The stripe above is h1.stripe-title - a self-contained full-bleed colored heading stripe (the "2026 Top Rated DUI Lawyer" bar pattern). It carries its own band background and ink, 8% side margins, centered, at ALL widths - only the font-size changes by viewport (mobile smaller so it fits, desktop larger). The size delta lives in a media query overriding ONLY font-size, same selector, so it wins by cascade order with no !important.
Section 9 - Long-Form Lander Block
This is the long-form section a PPC lander or rehabbed SaaS page carries below the designed sections - 500 to 750 words of real, crawlable, keyword-bearing copy inside band-inset so it reads in a comfortable column while the page stays full-width. Normal editor content: paragraphs, headed subsections, internal and outbound links, lists. The exact thing missing from every hardcoded PHP template, now living in the editor where Yoast scores it and answer engines cite it.
A Headed Subsection
Headed subsections of roughly 40 to 160 words each are what AI answer engines lift as self-contained passages, so long-form copy is broken into headed blocks rather than one wall of text. Each block answers one thing completely. This is the citable-content-blocks pattern - the same check AgentGauge and every serious AEO audit grades - satisfied structurally instead of hoped for.
Where This Slots In
On a rebuilt landing template the designed sections stay hardcoded for their layout, and this long-form zone renders from the_content right where the page needs its ranking body. Content comes home to the editor; the template becomes a shell. That is the whole rehab in one move.
PART II - The CAE Section System (folded from the six SaaS templates, 2026-07-21)
Everything below this line came out of the PHP page templates. The section classes that used to live at the top of template-landing, template-pricing, template-agencies, template-marketing-teams, template-demo, and template-creators are now in vocab.css section 9, deduped, names unchanged. The one rule: wrap the markup in div.cae - that is the scope switch that turns the system on. Colors come from tokens (the btn-teal precedent: same class, each site paints its own color). Every demo below is editor content on this page.
This is section.hero with an h1
This paragraph is p.lead - 18px, muted, capped at a readable measure, centered by the hero. Below sits div.cta-row holding a.btn.btn-teal and a.btn.btn-ghost. The whole family came off the template heads: hero, kick, lead, cta-row, btn, btn-teal, btn-ghost.
This line is p.micro - the fine print under a CTA row.
This is div.sec-head - the centered section header
An h2 and this p, capped at 760px. Below: div.loop-steps holding three div.step cards, each with its numbered div.n badge.
div.step
A white card with a numbered badge. Flexes at 240px minimum, wraps and stacks on mobile.
div.n
The number badge - token-painted square, white numeral. Change the token, rebrand every step.
Hover
The card lifts 3px on hover. That is in the class; nothing to add per page.
grid3 + feat-card, grid4 + card
grid3 holds feat-card (panel background, tinted icon box div.ic). grid4 holds card (white, gradient icon boxes ic-1 through ic-4). Icon boxes take a character or an icon font glyph.
div.feat-card
Panel-tinted card in a three-across grid. Stacks to one column on mobile.
div.ic
The 42px tinted icon box. Holds a tabler icon on the templates, any character here.
Token painted
Border, panel, and accent all come from tokens - one markup, every skin.
div.card + ic-1
White card, pink gradient icon.
ic-2
Violet gradient icon box.
ic-3
Teal gradient icon box.
ic-4
Gold gradient icon box.
div.compare: cmp.them vs cmp.us
div.cmp.them
× The gray "other guys" card.
× span.x is the red cross.
× Lines separated by br tags.
div.cmp.us
✓ The highlighted "us" card - accent border and glow.
✓ span.pl is the accent check.
✓ Same markup shape as .them, one class different.
Section 14 - div.mathband
The navy accent island. It carries its own dark background and chrome-ink text, so it reads on a light page or a dark one. Inside: div.stat-row holding three div.stat blocks.
price2 grid + tier cards
div.price is the three-across pricing grid, div.price2 the two-across. Each div.tier is a navy island like mathband - name, amt, sub, a feature ul, and a bottom-pinned btn. Add .pop plus div.tag-pop for the highlighted plan. The billing toggle (div.billtoggle + button.bt) is also in the vocabulary; its JS stays with the pricing page.
- li rows get the + prefix from CSS
- div.name, div.amt with a small
- div.markup for the resale callout
- Same markup as the plain tier
- One added class on the wrapper
- One added tag-pop strip
Section 16 - the FAQ block (section.faq)
Section 17 - blockquote.quote inside div.quote-wrap. Accent left border, italic, big readable measure.
div.quote-by - the attribution line
Section 18 - div.cta-box
The closing conversion box: accent background, dotted texture overlay from a pseudo-element, white heading. Wrap it in section.final for the spacing.
Part II Ledger Notes - the fold decisions
Scope switch: every Part II class lives under .cae in vocab.css section 9. Wrap editor markup in div.cae to turn the system on; outside that wrapper nothing changes, so the legal-site classes and the CAE classes coexist on one stylesheet.
Tokens and skins
Defaults are the light two-zone skin (the agencies/marketing-teams/creators palette). The dark skin (pricing/demo) and the IML baby-blue skin (landing) override the same token names per site or per template - the btn-teal precedent: on citAEOtion btn-teal renders orange, on ItsMyLinks teal, same class, color changed in the site's CSS. Dark set for reference: --ink:#eef5fa, --mut:#94abbd, --teal:#00b0d0, --tealb:#37d6f0, --line:rgba(255,255,255,.09), --panel:rgba(255,255,255,.035).
The fold decisions
One: breakpoint RULED by Joe 2026-07-21 - doctrine holds. The templates broke at 880/560; vocab v1.3.1 folds the section system to the single house breakpoint: 768 and below is mobile, 769 and above is desktop, canonical on every site Joe has ever built. The 769-880 band held zero phones (tablet-portrait only) and the 561-768 merge takes phone-true values, so real phones render unchanged. Two: tier and panel are navy islands, so their text folded on the chrome-ink tokens (identical pixels on the dark pages they came from, readable on light pages too). Three: stat .k and cta-box folded on solid accent color; the landing page's violet-teal gradient versions are that skin's override. Four: chrome (promo bar, nav, footer, hamburger) was NOT folded here - chrome renders from theme templates, not editor markup. Five: not demoed above but in the vocabulary: the demo-page form panels (.two/.panel/.row with scoped inputs), the creator showcase cards (.creators-grid/.creator-card/.creator-shot), the phone preset gallery (.phones/.phone/.screen with s-cla, s-bub, s-oce presets), and .hero-trust/.hero-art.
The ledger now covers both systems. Part I: the legal-cluster vocabulary, nine sections. Part II: the CAE section system out of the six SaaS templates, proven on glass above. Next milestone per Joe: reconvene and compare before any site page is touched.