/* ============================================================================ firm.css -- Terms.Law unified design system Single source of truth for every page across the site. Sergei Tokmakov, Esq. -- CA Bar 279869 -- Terms.Law ---------------------------------------------------------------------------- Why this file exists. The site has 11,722+ static HTML pages. Each was authored at a different time, with its own :root block and its own one-off color palette. The result reads as a thousand WordPress posts, not as one attorney-supervised boutique law firm. firm.css fixes that. Every page links this file first and inherits the same tokens, the same card shape, the same buttons, the same vertical rhythm. Design intent. Premium attorney boutique. Dark navy surface, ivory canvas, restrained blue accent. Not "AI SaaS gradient." Not playful. Calm, factual, attorney-confident. If a color, size, or class is not in this file, do not introduce it on a page. Voice notes (apply to any copy that lives next to these classes). First-person "I" -- never "we." No em dashes -- comma, colon, semicolon, period, or hyphen-with-spaces only. The chatbox brand is "AI Legal Analyst" -- never "AI Lawyer." Token discipline. Exactly ten tokens by count: 2 background, 3 text, 1 accent, 1 border, 3 spacing. Plus one type ramp (5 sizes + h1-h4). No light/dark theme, no gradient tokens, no animation tokens, no per-page colors. Restraint is the discipline. Token sourcing. Hex values are flat and self-contained. No CSS variable is defined in terms of another CSS variable. Older pages may reference --color-primary or --gray-500; those map to the canonical tokens below via fallbacks in per-page wrappers, not here. ========================================================================== */ :root { /* -------------------------------------------------------------------------- BACKGROUNDS (2) -------------------------------------------------------------------------- */ /* The canvas color. Used on and full-width section backgrounds that are not "elevated." Ivory rather than pure white so cards on top read as lifted. */ --surface: #f7f5f0; /* The lifted color. Used on .card, on the top nav, on sticky trust panels, on form panels. Crisp white sits cleanly on the ivory canvas. */ --surface-elevated: #ffffff; /* -------------------------------------------------------------------------- TEXT (3) -------------------------------------------------------------------------- */ /* Body copy and h-tags. Deep navy, not pure black -- pure black reads as low quality at body sizes. */ --text-primary: #0b1733; /* Secondary copy: sub-headings, lane descriptions, meta lines, price-row labels. Reads calm against the canvas and supports AA contrast on both surface and surface-elevated. */ --text-secondary: #475569; /* Tertiary copy: footnotes, captions, "per hour" suffixes, micro-meta. Use sparingly. Anything that needs to be read should be -primary or -secondary. */ --text-tertiary: #94a3b8; /* -------------------------------------------------------------------------- ACCENT (1) -------------------------------------------------------------------------- */ /* The single allowed accent color. Used on .btn-primary background, on active nav links, on link underlines, on lane border highlights. The temptation to introduce a second accent (gold for testimonials, green for trust pills, purple for AI features) is exactly the failure mode this design system corrects. One accent. */ --accent: #1e3a8a; /* -------------------------------------------------------------------------- BORDER (1) -------------------------------------------------------------------------- */ /* One border color sitewide. Used on .card, on form inputs, on .price-row dividers, on table cells. */ --border: #e2e8f0; /* -------------------------------------------------------------------------- SPACING (3) -------------------------------------------------------------------------- */ /* Rem-based so the scale follows the user's root font size and accessibility zoom settings. Three steps, no more. Anything that does not fit into tight, base, or loose should not be added as a fourth step; it should be reconsidered as a layout choice. */ --space-tight: 0.75rem; /* 12px at 16px root -- inline gaps, button padding */ --space-base: 1.5rem; /* 24px -- card padding, gap between grid items */ --space-loose: 3rem; /* 48px -- section vertical padding multiplier */ /* -------------------------------------------------------------------------- TYPE RAMP (5 body sizes + h1-h4) -------------------------------------------------------------------------- */ /* Inter is the only font. The size scale is restrained: 5 body sizes for paragraph text, captions, and labels; 4 heading sizes for h1-h4. */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 0.75rem; /* 12px -- captions, fine print, micro-meta */ --text-sm: 0.875rem; /* 14px -- labels, secondary copy, table cells */ --text-base: 1rem; /* 16px -- body default */ --text-lg: 1.125rem; /* 18px -- lead paragraphs, lane descriptions */ --text-2xl: 1.5rem; /* 24px -- small section openers, large pull-quotes */ --heading-1: 2.25rem; /* 36px -- page h1 */ --heading-2: 1.75rem; /* 28px -- section h2 */ --heading-3: 1.25rem; /* 20px -- card / lane h3 */ --heading-4: 1rem; /* 16px -- inline h4, callout title */ } /* ============================================================================ BASE ============================================================================ */ /* Reset is the bare minimum. The rest of the page inherits from these tokens by class, not by global tag-level overrides. */ html { font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text-primary); background: var(--surface); } body { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background: var(--surface); } /* ============================================================================ UTILITY CLASSES Built only from tokens above. Do not add color or size literals here. ============================================================================ */ /* ---------------------------------------------------------------------------- .card -- the canonical card shape. Used for: service lanes, built-section cards, trust panels, related-resource pills, FAQ accordions, calculator output panels. Every "white box on a background" on the site should be a .card. ---------------------------------------------------------------------------- */ .card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-base); color: var(--text-primary); } /* ---------------------------------------------------------------------------- .section-pad-y -- the only vertical section padding used sitewide. Pairs with .section-container for full-width section backgrounds with constrained content. Top and bottom equal -- no asymmetric padding. ---------------------------------------------------------------------------- */ .section-pad-y { padding-top: var(--space-loose); padding-bottom: var(--space-loose); } /* ---------------------------------------------------------------------------- .section-container -- the only content max-width used sitewide. 1200px matches the existing homepage hero, nav, stats bar, service lanes, how-it-works, intake grid. Horizontal padding uses --space-base so the container collapses gracefully on mobile without a separate breakpoint override. ---------------------------------------------------------------------------- */ .section-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--space-base); padding-right: var(--space-base); } /* ---------------------------------------------------------------------------- .btn-primary -- the canonical primary action. Used for the hire CTA, the "Generate Letter" submit, the chatbox send, the intake-modal continue button. Solid accent background, white text. The class name is preserved from the legacy site so existing inline HTML continues to render correctly after migration. ---------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--accent); color: var(--surface-elevated); border: 1px solid var(--accent); border-radius: 8px; padding: var(--space-tight) var(--space-base); font-family: var(--font-family); font-size: var(--text-base); font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px; /* WCAG 2.5.5 tap target */ transition: background-color 0.15s ease, transform 0.15s ease; } .btn-primary:hover { background: var(--text-primary); /* dark navy on hover -- one accent rule */ border-color: var(--text-primary); } /* ---------------------------------------------------------------------------- .btn-secondary -- the canonical secondary action. Used for "View related cases," "Open the calculator," "Show all 47 letters," "Cancel" in the intake modal. Ghost button: surface-elevated background, accent border and text. ---------------------------------------------------------------------------- */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--surface-elevated); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: var(--space-tight) var(--space-base); font-family: var(--font-family); font-size: var(--text-base); font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px; transition: background-color 0.15s ease, color 0.15s ease; } .btn-secondary:hover { background: var(--surface); color: var(--text-primary); } /* ---------------------------------------------------------------------------- .heading-1 ... .heading-4 -- semantic headings without a tag change. Use when the document outline requires a different h-level than the visual weight you want, e.g. a card title that should look like h3 but lives inside a region whose first heading is already h3. Prefer real h1-h4 tags when the outline allows. Letter-spacing and line-height match the visual rhythm of an attorney letter, not a marketing landing page. ---------------------------------------------------------------------------- */ .heading-1 { font-family: var(--font-family); font-size: var(--heading-1); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 var(--space-tight) 0; } .heading-2 { font-family: var(--font-family); font-size: var(--heading-2); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 var(--space-tight) 0; } .heading-3 { font-family: var(--font-family); font-size: var(--heading-3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 var(--space-tight) 0; } .heading-4 { font-family: var(--font-family); font-size: var(--heading-4); font-weight: 600; line-height: 1.4; color: var(--text-primary); margin: 0 0 var(--space-tight) 0; } /* ============================================================================ v12 unification: vertical page utilities ---------------------------------------------------------------------------- Added 2026-05-17. Lifts the ~4 KB inline style block that was duplicated across /hire-vs-diy/*/index.html, /intake/*/index.html, and the v11 /insights/*.html memos. Each vertical page now ships only the bare page-specific residue inline (under 500 bytes per page). Opt-in scoping. The class names below are namespaced (.vertical-page, .memo, .intake-card, .lane) so they only apply to pages that opt in via the documented body / wrapper class. They do not override the global .card / .heading-* utilities defined above. Reset note. The legacy inline CSS shipped a global * { box-sizing, margin: 0, padding: 0 } reset. Firm.css already sets the relevant defaults on html and body; the per-page reset is dropped during the v12 lift because no element in the vertical or memo markup depends on a zeroed default outside of what the typography rules below set explicitly. The intake forms reset fieldset/legend defaults via the .field-fieldset and .field-legend utilities (see below). ========================================================================== */ Layered on top of the canonical tokens above. The legacy --color-* names referenced inside these classes are re-mapped to the canonical tokens via the .legacy-token-map root block below; pages opt in by adding the class to . New pages should use the canonical tokens directly. ========================================================================== */ /* Legacy --color-* token shim. Older inline blocks referenced --color-primary, --color-text, --color-bg, etc. The shim publishes those names at the root so the lifted utility classes work without rewriting every rule. The shim is opt-in: it activates only when or the class is applied to . */ .legacy-token-map, html.legacy-token-map, body.legacy-token-map { --color-primary: var(--accent); --color-primary-dark: var(--text-primary); --color-secondary: var(--accent); --color-text: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-bg: var(--surface); --color-border: var(--border); --color-card: var(--surface-elevated); --border-radius: 8px; } /* ---------------------------------------------------------------------------- Page layout shells used by /hire-vs-diy and /intake pages. .page-wrap is the 880px content shell. .vertical-main is the section padding. ---------------------------------------------------------------------------- */ .page-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; } .vertical-main { padding: 32px 0 64px; } @media (max-width: 600px) { .vertical-main { padding: 22px 0 48px; } } /* ---------------------------------------------------------------------------- Vertical-page typography. These intentionally override the firm-css defaults for h1/h2/h3 because the hire-vs-diy and intake pages use a slightly larger, tighter ramp than the global one. Scoped to .vertical-page so it does not leak into other layouts. ---------------------------------------------------------------------------- */ .vertical-page { -webkit-font-smoothing: antialiased; line-height: 1.6; } .vertical-page h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.015em; } .vertical-page h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; color: var(--text-primary); margin: 36px 0 14px; line-height: 1.3; } .vertical-page h3 { font-size: 1.1rem; font-weight: 700; margin: 22px 0 8px; color: var(--text-primary); } .vertical-page p { margin-bottom: 14px; color: var(--text-primary); font-size: 1rem; } .vertical-page ul, .vertical-page ol { margin: 0 0 14px 22px; } .vertical-page ul li, .vertical-page ol li { margin-bottom: 8px; line-height: 1.55; } .vertical-page .lede { font-size: 1.06rem; color: var(--text-primary); } /* ---------------------------------------------------------------------------- Breadcrumbs row used at the top of every vertical and intake page. ---------------------------------------------------------------------------- */ .breadcrumbs-row { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 18px; } .breadcrumbs-row a { color: var(--text-secondary); text-decoration: none; } .breadcrumbs-row a:hover { color: var(--accent); text-decoration: underline; } /* ---------------------------------------------------------------------------- .pill -- inline category pill above the H1. .pill on its own uses the canonical blue (--accent). The two color variants are for two clusters that needed a different hue: .pill-cyan -- cross-border-us-asia .pill-indigo -- hire-vs-diy default The base .pill class already covers the intake-page blue. ---------------------------------------------------------------------------- */ .pill { display: inline-block; background: #dbeafe; color: #1e3a8a; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-right: 6px; margin-bottom: 10px; } .pill-indigo { background: #e0e7ff; color: #3730a3; } .pill-cyan { background: #cffafe; color: #155e75; } /* ---------------------------------------------------------------------------- Lanes for the hire-vs-diy decision pages. .lane is the card. The three modifiers are the colored left border + the matching lane-label background. ---------------------------------------------------------------------------- */ .lane { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 22px; margin: 18px 0; } .lane h2 { margin-top: 0; } .lane-diy { border-left: 4px solid #10b981; } .lane-grey { border-left: 4px solid #f59e0b; } .lane-hire { border-left: 4px solid var(--accent); } .lane-label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .lane-diy .lane-label { background: #d1fae5; color: #065f46; } .lane-grey .lane-label { background: #fef3c7; color: #92400e; } .lane-hire .lane-label { background: #dbeafe; color: #1e3a8a; } /* ---------------------------------------------------------------------------- .rubric -- the "honest decision rubric" card under the lanes. ---------------------------------------------------------------------------- */ .rubric { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 22px; margin: 22px 0; } .rubric h2 { margin-top: 0; } .rubric ol li { margin-bottom: 10px; } /* ---------------------------------------------------------------------------- .fee -- inline price callout inside lane bullets. ---------------------------------------------------------------------------- */ .fee { display: inline-block; font-weight: 700; color: var(--accent); } /* ---------------------------------------------------------------------------- .disclaimer-amber -- the yellow informational disclaimer panel used on hire-vs-diy pages and the noscript notes on intake pages. ---------------------------------------------------------------------------- */ .disclaimer-amber, .noscript-note { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 12px 16px; margin: 14px 0; font-size: 0.92rem; color: var(--text-primary); border-radius: 4px; } /* ---------------------------------------------------------------------------- .cta-block -- the dark-navy gradient CTA card at the bottom of hire-vs-diy pages. The gradient stops are fixed because the navy is the brand hero color and the same on every page; do not introduce per-vertical accents. ---------------------------------------------------------------------------- */ .cta-block { background: linear-gradient(135deg, #1a1a2e 0%, #2d3548 100%); color: #fff; border-radius: 8px; padding: 24px; margin: 28px 0; } .cta-block h2 { color: #fff; margin-top: 0; } .cta-block p { color: #d1d5db; } /* CTA buttons used inside .cta-block and on intake pages. */ .cta-btn { display: inline-block; background: var(--accent); color: #fff; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: 700; min-height: 44px; } .cta-btn:hover { background: var(--text-primary); } .cta-btn-secondary { background: transparent; border: 1px solid #93c5fd; color: #93c5fd; margin-left: 6px; } /* ---------------------------------------------------------------------------- .related-card -- the "Related on Terms.Law" panel at the bottom of hire-vs-diy and insights pages. ---------------------------------------------------------------------------- */ .related-card { margin-top: 28px; padding: 20px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; } .related-card a { color: var(--accent); text-decoration: none; font-weight: 600; } .related-card a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------------- .footer-strip -- the dark navy footer band at the bottom of every vertical and intake page. The navy uses the canonical --text-primary token so it matches the .cta-block stop and the global header dark theme. ---------------------------------------------------------------------------- */ .footer-strip { background: var(--text-primary); color: #cbd5e1; padding: 28px 0; margin-top: 40px; font-size: 0.9rem; } .footer-strip a { color: #93c5fd; text-decoration: none; } .footer-strip a:hover { text-decoration: underline; } .footer-disclaimer { font-size: 0.78rem; color: #94a3b8; line-height: 1.5; margin-top: 10px; } /* ---------------------------------------------------------------------------- .intake-page -- minor typography overrides for /intake/*/index.html pages. The intake h1 is slightly smaller (clamp max 2.4rem vs hire-vs-diy 2.5rem), h2 is slightly smaller (1.5rem vs 1.6rem), and the lede has explicit bottom margin to push the form below. Use alongside .vertical-page. ---------------------------------------------------------------------------- */ .intake-page h1 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); } .intake-page h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 32px 0 14px; } .intake-page .lede { font-size: 1.05rem; margin-bottom: 24px; } /* ---------------------------------------------------------------------------- Intake form. The .intake-card is the form panel; field grid and controls are tuned for 44px tap targets per CLAUDE.md section 5. ---------------------------------------------------------------------------- */ .intake-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 24px 0; } @media (max-width: 600px) { .intake-card { padding: 18px; } } .intake-card .field { margin-bottom: 18px; } .intake-card .field label { display: block; font-weight: 600; color: var(--text-primary); font-size: 0.95rem; margin-bottom: 6px; } .intake-card .field .field-hint { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; } .intake-card .field input[type="text"], .intake-card .field input[type="email"], .intake-card .field input[type="number"], .intake-card .field input[type="date"], .intake-card .field input[type="file"], .intake-card .field select, .intake-card .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-elevated); color: var(--text-primary); font-family: inherit; font-size: 1rem; min-height: 44px; } .intake-card .field textarea { min-height: 100px; resize: vertical; } .intake-card .field input:focus, .intake-card .field select:focus, .intake-card .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Reset for

wrappers inside .intake-card. Replaces the prior inline style="border:none;padding:0;" attribute usage. */ .intake-card .field-fieldset { border: none; padding: 0; margin: 0; } /* styling matching .field label. Replaces inline legend style. */ .intake-card .field-legend { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; margin-bottom: 6px; padding: 0; } .radio-group { display: flex; flex-wrap: wrap; gap: 8px; } .radio-group label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 0.92rem; min-height: 36px; } .radio-group input[type="radio"] { accent-color: var(--accent); } .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .checkbox-grid label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.95rem; cursor: pointer; min-height: 36px; } .checkbox-grid input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); } @media (max-width: 600px) { .checkbox-grid { grid-template-columns: 1fr; } } .submit-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .submit-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 14px 24px; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; min-height: 48px; } .submit-btn:hover { background: var(--text-primary); } .crpc-disclaimer { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 6px; } .required-mark { color: #dc2626; font-weight: 700; } /* ---------------------------------------------------------------------------- .next-steps -- the numbered "what happens next" card at the bottom of every intake page. ---------------------------------------------------------------------------- */ .next-steps { margin: 32px 0; padding: 24px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 12px; } .next-steps h2 { margin-top: 0; } .next-steps ol { list-style: none; counter-reset: step; padding: 0; margin: 12px 0 0; } .next-steps ol li { counter-increment: step; padding: 10px 0 10px 40px; position: relative; border-bottom: 1px solid var(--border); } .next-steps ol li:last-child { border-bottom: none; } .next-steps ol li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } .next-steps ol li strong { display: block; margin-bottom: 2px; } /* ---------------------------------------------------------------------------- .memo -- /insights/*.html memo body shell. Narrower than .page-wrap (760px) and uses a tighter type scale than .vertical-page. The .eyebrow, .lede, .breadcrumbs-row, .related-card, and .disclaimer pieces are shared with the vertical pages. ---------------------------------------------------------------------------- */ .memo { -webkit-font-smoothing: antialiased; line-height: 1.65; font-size: 16px; } .memo-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; } .memo .eyebrow { color: var(--text-secondary); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 8px; } .memo h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; } .memo .lede { font-size: 18px; color: var(--text-secondary); margin: 0 0 32px; } .memo h2 { font-size: 22px; margin: 36px 0 12px; font-weight: 700; letter-spacing: -0.01em; } .memo h3 { font-size: 18px; margin: 24px 0 8px; font-weight: 600; } .memo p { margin: 0 0 16px; } .memo ul, .memo ol { margin: 0 0 16px; padding-left: 22px; } .memo li { margin-bottom: 6px; } .memo a { color: var(--accent); text-decoration: none; } .memo a:hover { text-decoration: underline; } .memo blockquote { border-left: 3px solid var(--accent); margin: 20px 0; padding: 4px 16px; color: var(--text-secondary); background: var(--surface-elevated); border-radius: 0 8px 8px 0; } .memo .cta-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-top: 40px; } .memo .cta-card h3 { margin-top: 0; } .memo .related { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-top: 28px; font-size: 14px; } .memo .related strong { display: block; margin-bottom: 6px; } .memo .disclaimer { font-size: 12px; color: var(--text-secondary); margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); } .memo .breadcrumbs { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } .memo .breadcrumbs a { color: var(--text-secondary); } @media (max-width: 600px) { .memo h1 { font-size: 26px; } .memo .lede { font-size: 16px; } .memo-wrap { padding: 20px 16px 60px; } } /* ============================================================================ v13: next-step CTA utilities (Sergei's deployment-discipline pass) ---------------------------------------------------------------------------- Added 2026-05-17. Lifts the inline-style residue left behind by the Move 3 conversion-graph "Next step" / "Already decided?" / "Engage now" CTA cards on /hire-vs-diy/*/index.html, /intake/*/index.html, and the v11 /insights/*.html memos. Each of those 24 files previously carried six style="..." attributes (section margin, grid layout, card link reset, card paragraph type ramp) which pushed every page over the check-inline-css.js threshold of three style attrs per file. These class names absorb the pattern so the inline residue drops to zero. Conventions: .next-step-section - section wrapper used by intake "Already decided?" and insights "Next step" blocks (margin-top: 2rem). .engage-now-section - section wrapper used by hire-vs-diy "Engage now" blocks (margin: 1.5rem 0). Same vertical rhythm as the intake/insights wrapper but with bottom margin to separate from the related-card below. .next-step-grid - responsive auto-fit grid for the two CTA cards. .next-step-card - link-card variant of .card (text-decoration: none, color: inherit, display: block) so the entire card is the click target without inheriting underlines. .next-step-card p - secondary-text paragraph below the card heading. ============================================================================ */ .next-step-section { margin-top: 2rem; } .engage-now-section { margin: 1.5rem 0; } .next-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 0.75rem; } .next-step-card { text-decoration: none; color: inherit; display: block; } .next-step-card p { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--text-secondary); } /* ============================================================================ v14: locale hub page utilities (ES/RU practice-areas and insights indexes) ---------------------------------------------------------------------------- Added 2026-05-17. Lifts the inline