/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Settings Design system tokens (CSS custom properties). Primitive -> Semantic; components bind to semantic tokens. Source of truth: Figma "On The Stage - Website (2026)" Design System page (see design-system/figma-sections.json). */ /* Design system tokens: colors Source: Figma "On The Stage - Website (2026)" > Design System > Section / 02 Colors Verified against the Figma variable collections: "Primitive / Colors" (72 variables) and "Semantic / Brand" (39 variables). Architecture: Primitive -> Semantic (components bind to semantic tokens only). Owned by the Colors section agent. */ :root { /* --- Primitive / Crimson --- */ --brand-crimson-50: #fceaee; --brand-crimson-100: #f8d0d8; --brand-crimson-200: #f2a3b4; --brand-crimson-300: #ef4466; --brand-crimson-400: #e72047; --brand-crimson-500: #c41033; --brand-crimson-600: #a60524; --brand-crimson-700: #8a0420; --brand-crimson-800: #660318; --brand-crimson-900: #470210; /* --- Primitive / Gold --- */ --brand-gold-50: #fef7e6; --brand-gold-100: #fdefc9; --brand-gold-200: #fbdf93; --brand-gold-300: #fbcd58; --brand-gold-400: #f6c344; --brand-gold-500: #e0af32; --brand-gold-600: #cea337; --brand-gold-700: #a6822c; --brand-gold-800: #7d6221; --brand-gold-900: #574516; /* --- Primitive / Teal --- */ --brand-teal-50: #e3f4f8; --brand-teal-100: #bfe6ef; --brand-teal-200: #8cd2e3; --brand-teal-300: #53bcd5; --brand-teal-400: #19a6c7; --brand-teal-500: #088dac; --brand-teal-600: #006981; --brand-teal-700: #005367; --brand-teal-800: #004352; --brand-teal-900: #003542; /* --- Primitive / Petrol --- */ --brand-petrol-50: #eaeeee; --brand-petrol-100: #cfdadb; --brand-petrol-200: #9fb3b5; --brand-petrol-300: #6e8c8f; --brand-petrol-400: #436266; --brand-petrol-500: #2c3d41; --brand-petrol-600: #1f3337; --brand-petrol-700: #082329; --brand-petrol-800: #04191e; --brand-petrol-900: #001216; /* --- Primitive / Tan --- */ --brand-tan-50: #fbf9f6; --brand-tan-100: #f7f3ec; --brand-tan-200: #ebe2d0; --brand-tan-300: #dccbac; --brand-tan-400: #cab081; --brand-tan-500: #b89456; --brand-tan-600: #97773f; --brand-tan-700: #735b30; --brand-tan-800: #4f3e21; --brand-tan-900: #2f2514; /* --- Primitive / Status Green --- */ --status-green-50: #edf7f2; --status-green-100: #dbefe4; --status-green-200: #b7e0c9; --status-green-300: #8bcca8; --status-green-400: #55b57f; --status-green-500: #1f9d57; --status-green-600: #1a8449; --status-green-700: #156b3b; --status-green-800: #10522d; --status-green-900: #0c3c21; /* --- Primitive / Neutral --- Full gray 50-900 ramp confirmed from the "Primitive / Colors" collection. */ --neutral-white: #ffffff; --neutral-black: #000000; --neutral-gray-50: #f9f8f5; --neutral-gray-100: #f5f3ef; --neutral-gray-200: #f7f3ec; --neutral-gray-300: #e4e1db; --neutral-gray-400: #c9c4bb; --neutral-gray-500: #9a958c; --neutral-gray-600: #5c5853; --neutral-gray-700: #3e3b37; --neutral-gray-800: #2a2825; --neutral-gray-900: #1a1a1a; /* --- Semantic / Brand --- */ --color-brand-primary: var(--brand-crimson-500); --color-brand-primary-dark: var(--brand-crimson-700); --color-brand-secondary: var(--brand-gold-500); --color-brand-highlight: var(--brand-teal-500); --color-brand-surface: var(--neutral-gray-50); --color-brand-white: var(--neutral-white); /* --- Semantic / Background --- */ --color-background-default: var(--neutral-white); --color-background-subtle: var(--neutral-gray-50); --color-background-hover: var(--neutral-gray-100); --color-background-inverse: var(--brand-petrol-700); /* --- Semantic / Text --- */ --color-text-primary: var(--brand-petrol-700); --color-text-secondary: var(--neutral-gray-600); --color-text-on-brand: var(--neutral-white); --color-text-on-dark: var(--neutral-white); --color-text-disabled: var(--neutral-gray-400); /* --- Semantic / Border --- */ --color-border-default: var(--neutral-gray-200); --color-border-strong: var(--neutral-gray-400); --color-border-focus-form: var(--color-brand-highlight); --color-border-focus-button: var(--brand-crimson-200); /* --- Semantic / Accent --- */ --color-accent-gold: var(--brand-gold-500); --color-accent-teal: var(--brand-teal-500); /* --- Semantic / Photo filter --- Colors for the Image Filter Layers primitive (Recipe A / Recipe B). Every other value the recipes need already has a token: Recipe A layer 1 and Recipe B both bind to --color-text-primary (#082329) and --brand-petrol-900 (#001216), and the S3 accent bar binds to --brand-gold-500 (#e0af32). --photo-filter-warm is an intentional Image Filter Layers token: #ffb561 is an unbound raw fill in Figma (node 1715:15115), so it stays separate from the Gold ramp. Snapping it would visibly shift the hero and the S3 overlay away from the approved comp. Confirmed in issue #20. */ --photo-filter-warm: #ffb561; /* --- Semantic / Status --- */ --color-status-success: var(--status-green-500); --color-status-success-light: var(--status-green-100); --color-status-warning: var(--brand-gold-500); --color-status-warning-light: var(--brand-gold-100); --color-status-error: var(--brand-crimson-500); --color-status-error-light: var(--brand-crimson-100); --color-status-info: var(--brand-teal-500); --color-status-info-light: var(--brand-teal-100); /* --- Semantic / Link (light surfaces) --- */ --color-link-light-default: var(--brand-crimson-500); --color-link-light-hover: var(--brand-crimson-700); --color-link-light-active: var(--brand-crimson-800); --color-link-light-visited: var(--neutral-gray-600); --color-link-light-disabled: var(--neutral-gray-400); /* --- Semantic / Link (dark surfaces) --- */ --color-link-dark-default: var(--brand-teal-300); --color-link-dark-hover: var(--brand-teal-200); --color-link-dark-active: var(--brand-teal-100); --color-link-dark-visited: var(--neutral-gray-300); --color-link-dark-disabled: var(--neutral-gray-600); } /* Design system tokens: typography Source: Figma "On The Stage - Website (2026)" > Design System > Section / 03 Typography Variable collection "Typography" - 4 responsive modes, mobile-first here: SM >=320px (base), MD >=768px, LG >=1025px, XL >=1280px. Heading letter-spacing resolves in px per breakpoint (Figma platform constraint): 0px SM, -1px MD, -1.5px LG, -2px XL. H3-H6 are flat 0px at all breakpoints. Body letter-spacing tokens (body-min/body-max) exist in Figma but are inert; do not wire them. Owned by the Typography section agent. */ :root { --font-family-brand: "Open Sans", sans-serif; --font-weight-regular: 400; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-line-height-heading-lg: 1.1; /* H1, H2 */ --font-line-height-heading-md: 1.2; /* H3, H4 */ --font-line-height-heading-sm: 1.3; /* H5, H6 */ --font-line-height-body: 1.5; --font-line-height-label: 1.3; /* SM mode (>=320px) */ --font-size-h1: 34px; --font-size-h2: 24px; --font-size-h3: 20px; --font-size-h4: 18px; --font-size-h5: 16px; --font-size-h6: 16px; --font-size-body-lg: 18px; --font-size-body: 16px; --font-size-sm: 14px; --font-size-xs: 12px; --font-size-xxs: 12px; --font-letter-spacing-heading: 0px; } @media (min-width: 768px) { /* MD mode */ :root { --font-size-h1: 44px; --font-size-h2: 30px; --font-size-h3: 24px; --font-size-h4: 18px; --font-size-h5: 16px; --font-size-h6: 16px; --font-size-body-lg: 20px; --font-size-body: 16px; --font-size-sm: 14px; --font-size-xs: 12px; --font-size-xxs: 12px; --font-letter-spacing-heading: -1px; } } @media (min-width: 1025px) { /* LG mode */ :root { --font-size-h1: 52px; --font-size-h2: 36px; --font-size-h3: 26px; --font-size-h4: 20px; --font-size-h5: 18px; --font-size-h6: 16px; --font-size-body-lg: 22px; --font-size-body: 18px; --font-size-sm: 16px; --font-size-xs: 14px; --font-size-xxs: 12px; --font-letter-spacing-heading: -1.5px; } } @media (min-width: 1280px) { /* XL mode */ :root { --font-size-h1: 60px; --font-size-h2: 40px; --font-size-h3: 30px; --font-size-h4: 20px; --font-size-h5: 18px; --font-size-h6: 16px; --font-size-body-lg: 24px; --font-size-body: 20px; --font-size-sm: 16px; --font-size-xs: 14px; --font-size-xxs: 12px; --font-letter-spacing-heading: -2px; } } /* Design system tokens: spacing & layout Source: Figma "On The Stage - Website (2026)" > Design System > Section / 08 Spacing Scale Figma collection "Spacing / Layout" - all 30 variables, verified against the live Figma variable collection (single "Value" mode). Note: spacing/8 is 30px in Figma (not 32) - the scale is not a strict powers-of-4 ramp. Owned by the Spacing section agent. */ :root { /* Spacing scale - base unit 4px; each step is a multiple used for padding, gaps, and layout */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 30px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-30: 120px; /* Section vertical rhythm: authored px values are desktop values; this scale shrinks them per breakpoint so 120px becomes 80px on tablet and 64px on mobile (BugHerd #67, updated per design direction: mobile was 48px/0.4, now 64px/8:15). Mobile-first: base is the mobile scale. */ --section-pad-scale: calc(8 / 15); /* 64 / 120 */ /* Layout: page margins per breakpoint */ --layout-margin-sm: 20px; --layout-margin-md: 30px; --layout-margin-lg: 80px; --layout-margin-xl: 100px; /* Resolved page margin for the current breakpoint. theme-overrides.css sets .dnd-section padding with a single shorthand (it has to - the vertical half is theme-setting driven), so it cannot use the per-breakpoint tokens above without four media queries in generated CSS. Binding the shorthand to this one property keeps the DS margins alive at every breakpoint (BugHerd #68); before this it was a flat `1rem`, which tracked the root font size (16px on mobile, 20px on desktop) and overrode objects/_containers-dnd.css outright. */ --layout-margin: var(--layout-margin-sm); /* Layout: grid gutters per breakpoint */ --layout-gutter-sm: 20px; --layout-gutter-md: 30px; --layout-gutter-lg: 30px; --layout-gutter-xl: 30px; /* Layout: grid column counts per breakpoint (unitless) */ --layout-columns-sm: 4; --layout-columns-md: 8; --layout-columns-lg: 12; --layout-columns-xl: 12; /* Breakpoints (reference only - custom properties cannot be used in media queries). SM >=320px, MD >=768px, LG >=1025px, XL >=1280px. */ --layout-breakpoint-sm: 320px; --layout-breakpoint-md: 768px; --layout-breakpoint-lg: 1025px; --layout-breakpoint-xl: 1280px; /* Layout: content max width (XL cap) */ --layout-max-width: 1280px; } @media (min-width: 768px) { :root { --layout-margin: var(--layout-margin-md); --section-pad-scale: calc(2 / 3); /* 80 / 120 */ } } @media (min-width: 1025px) { :root { --layout-margin: var(--layout-margin-lg); --section-pad-scale: 1; } } @media (min-width: 1280px) { :root { --layout-margin: var(--layout-margin-xl); } } /* Design system tokens: border radius Source: Figma "On The Stage - Website (2026)" > Design System > Section / 09 Border Radius Full collection (9 variables) confirmed from the Figma variable dump. Owned by the Border Radius section agent. */ :root { --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; } /* Design system tokens: elevation & shadows Source: Figma "On The Stage - Website (2026)" > Design System > Section / 10 Elevation & Shadows Verified against Figma node 27:139 effect styles (Elevation/XS-XL) - exactly 5 levels, single drop shadow each, x=0, spread=0; alphas 0D/0F/14/1A/1F hex = 5/6/8/10/12%. "Elevation none" appears in the spec as a specimen but has no effect style, hence no token. Owned by the Elevation section agent. */ :root { --elevation-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --elevation-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06); --elevation-md: 0 4px 8px 0 rgba(0, 0, 0, 0.08); --elevation-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.1); --elevation-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.12); } /* Nav effect styles (Figma: Elevation/Nav + Elevation/Overlay, node 1066:456). Not part of the XS-XL ramp above: both are tinted (#0D0514 / #0D0814 base, not pure black) and Elevation/Nav carries a -10px spread. Appended by the header/nav build; token files are append-only. */ :root { --elevation-nav: 0 10px 20px -10px rgba(13, 5, 20, 0.1); --elevation-overlay: 0 12px 32px 0 rgba(13, 8, 20, 0.14); } /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /* Full-bleed elements (100vw breakout trick, e.g. hero.module) measure against the viewport width including the scrollbar, which overshoots the real scrollable area by half the scrollbar's width on each side. This is the standard guard against that residual horizontal overflow. */ html { overflow-x: hidden; } /* Sitewide default background. Most sections on this site want the cream surface tone rather than stark white (confirmed: nothing else in this theme sets a page-level background, so this was previously just browser default white). Setting it once here means any section without its own explicit background - including future modules that don't have a Style- tab color field at all - automatically gets the cream tone for free, instead of every module needing to redeclare it. Modules that want a different color (or a full-bleed photo, e.g. hero.module) still set their own background explicitly and are unaffected by this default. */ body { background-color: var(--color-brand-surface); } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* Grid layout Design system (Figma Section / 07 Breakpoints & Grid): gutters are 20px at SM (>=320px) and 30px from MD (>=768px) up. --grid-gutter derives from the layout gutter tokens; columns stack below 768px. */ :root { --grid-gutter: var(--layout-gutter-sm); } @media (min-width: 768px) { :root { --grid-gutter: var(--layout-gutter-md); } } /* Mobile layout (SM: columns stack full width) */ .row-fluid { display: flex; flex-wrap: wrap; /* Stacked columns take the gutter vertically, so a multi-column dnd row keeps the SM 20px rhythm once it collapses instead of butting together (BugHerd #68). Rows with a single span are unaffected. */ row-gap: var(--grid-gutter); width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout (MD and up: 12-unit grid, token-driven gutters) */ @media (min-width: 768px) { .row-fluid { column-gap: var(--grid-gutter); flex-wrap: nowrap; } .row-fluid .span1 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); } .row-fluid .span2 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); } .row-fluid .span3 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); } .row-fluid .span4 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); } .row-fluid .span5 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); } .row-fluid .span6 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); } .row-fluid .span7 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); } .row-fluid .span8 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); } .row-fluid .span9 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); } .row-fluid .span10 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); } .row-fluid .span11 { width: calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); } } /* Containers & DND sections Design system (Figma Section / 07 Breakpoints & Grid): SM >=320px margins 20px gutters 20px 4 cols (stacked) MD >=768px margins 30px gutters 30px 8 cols LG >=1025px margins 80px gutters 30px 12 cols XL >=1280px margins 100px gutters 30px 12 cols, content cap 1280px Gutters live in objects/_layout.css (--grid-gutter on .row-fluid). Note: theme-overrides.css can override max-width/padding here via theme settings (container_width, dnd_section_padding); these are the DS defaults. */ .content-wrapper { margin: 0 auto; /* XL content cap + side margins (box-sizing: border-box) */ max-width: calc(var(--layout-max-width) + 2 * var(--layout-margin-xl)); padding: 0 var(--layout-margin-sm); } .dnd-section { padding-left: var(--layout-margin-sm); padding-right: var(--layout-margin-sm); } .dnd-section > .row-fluid { margin: 0 auto; max-width: var(--layout-max-width); } /* Column gutters come from .row-fluid column-gap (objects/_layout.css), so dnd columns carry no extra horizontal padding of their own. */ .dnd-section .dnd-column { padding: 0; } /* Full-bleed modules escape their section's horizontal padding themselves, but theme-overrides.css's `.dnd-section { padding: {vertical}px 1rem }` (loads after this file, wins on source order) still adds its own vertical padding above/below on top of whatever the module sets - :has() gives this enough specificity to win regardless of load order, and scopes it to only sections wrapping one of these full-bleed modules, so every other section keeps the theme's normal vertical rhythm untouched. Each of these modules owns its own Style-tab padding-top/padding-bottom fields instead, so there's exactly one place controlling their vertical spacing, not two stacked on top of each other. .article-block is here for the other half of the same problem. The three article body blocks are not full-bleed sections - they are prose blocks inside an 818px article column (css/components/_article-blocks.css) - but they are dropped into a dnd_area all the same, so each one lands in its own .dnd-section carrying the theme's 120px between-sections padding. That is the gap between two sections of a page, not the gap between a heading and the paragraph under it. Zeroed here, and _article-blocks.css owns the 16/40 rhythm instead. Those three carry no Style-tab padding fields on purpose: an article's rhythm belongs to the article, not to each block in it. The four .blog-* entries are the blog landing's counterparts to the .resources-* four above (templates/blog-index.html) - same full-bleed breakout, same Style-tab padding fields, same reason for being here. There is no .blog-hero: that page reuses resources-hero.module verbatim, so it is already covered by the .resources-hero entry. */ .dnd-section:has( .hero, .audience-rows, .jump-nav, .product-snapshot, .media-copy-split, .stats-marquee, .hover-reveal-cards, .gallery-cards, .outcome-cards, .comparison-cards, .customer-story, .resource-cards, .resources-hero, .resources-featured, .resources-filters, .resources-grid, .resources-pagination, .blog-featured, .blog-filters, .blog-grid, .blog-pagination, .faq, .final-cta, .final-reassurance, .alternating-rows, .screenshot-cards, .process-steps, .section-header, .what-to-expect, .list-callout-section, .support, .copy-photo-carousel, .proof-panel, .article-block ) { padding-bottom: 0; padding-top: 0; } @media (min-width: 768px) { .content-wrapper { padding: 0 var(--layout-margin-md); } .dnd-section { padding-left: var(--layout-margin-md); padding-right: var(--layout-margin-md); } } @media (min-width: 1025px) { .content-wrapper { padding: 0 var(--layout-margin-lg); } .dnd-section { padding-left: var(--layout-margin-lg); padding-right: var(--layout-margin-lg); } } @media (min-width: 1280px) { .content-wrapper { padding: 0 var(--layout-margin-xl); } .dnd-section { padding-left: var(--layout-margin-xl); padding-right: var(--layout-margin-xl); } } /* Elements Base HTML elements are styled in this section (,

, ,

,