spec-* * sections so most of the rules below silently no-op on hubs — the * actual hub-compare-* primitives live in brand.preview.css. * * Decoration lives in brand.preview.css (MATERIAL-PAGE COMPONENTS * block). This file holds:* * - Body reset (margin:0) * - Top-strip kill (announcement bar+container top padding) * - Body-level full-bleed treatment for hero,not-for,cta-close * (matches the large-scale-activations pattern) * - Bridge-band gradient strips at dark↔light transitions * - Section spacing for contained sections * - Grid track counts (key-props 4-up,apps-grid 4-up,* proc-strip 6-up,trust-stack 4-up,etc.) * - Mobile collapse @ 860px * * Every grade preview HTML references this file via * <link href="material-layout.preview.css?v=<datestamp>" rel="stylesheet"/>* The port script copies this file into wp-child-theme/assets/material-layout.css * for the WordPress deploy. *============================================================*/ body{margin:0}.sec-00{display:none}.container:first-of-type{padding-top:0;padding-bottom:0;margin-bottom:0}.container:first-of-type>.sec-01{margin-bottom:0;padding-bottom:0}.container:first-of-type .sec-01>div{padding-top:0;padding-bottom:0}.hero-dark,.perfect-for,.not-for,.cta-close{border-radius:0;box-shadow:none;margin:0}.hero-dark{margin-top:-100px}.hero-dark .copy{padding-top:132px}.hero-dark .stage{height:720px}.hero-dark+.container,.perfect-for+.container,.not-for+.container,.close-band+.container,.perfect-for+section,.not-for+section{padding-top:56px}.not-for+.container>section:first-of-type,.perfect-for+.container>section:first-of-type{margin-top:0}@media (max-width:860px){.hero-dark .stage{height:460px}}.bridge-band{width:100%;height:80px;margin:0;display:block}.bridge-band--into-dark{background:linear-gradient(180deg,transparent 0%,var(--purple-900) 100%)}.bridge-band--out-of-dark{background:linear-gradient(180deg,var(--purple-900) 0%,transparent 100%)}.bridge-band--dark-to-light{background:linear-gradient(180deg,var(--purple-900) 0%,var(--paper) 100%)}.bridge-band--light-to-dark{background:linear-gradient(180deg,var(--paper) 0%,var(--purple-900) 100%)}.container>section,.container>.tldr-card,.container>.anchor-nav,.container>.process-banner,.container>.related-materials{margin-bottom:32px}.key-props{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.proc-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.trust-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.dfam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.post-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.material-page section>h2,.material-page>h2{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0 0 6px;line-height:1.15}.material-page section>.sec-heading,.material-page .sec-heading{font-family:var(--font-mono);font-size:11px;color:var(--ink-600);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.material-page section>.lede{font-size:14.5px;color:var(--ink-700);margin:0 0 18px;line-height:1.6;max-width:760px}.footer{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}@media (max-width:860px){.key-props{grid-template-columns:repeat(2,1fr)}.apps-grid{grid-template-columns:repeat(2,1fr)}.proc-strip{grid-template-columns:repeat(2,1fr);gap:8px}.trust-stack{grid-template-columns:repeat(2,1fr)}.dfam-grid{grid-template-columns:1fr}.post-options-grid{grid-template-columns:1fr}.footer{grid-template-columns:1fr 1fr}}@media (max-width:540px){.proc-strip{grid-template-columns:1fr}.trust-stack{grid-template-columns:1fr}.footer{grid-template-columns:1fr}}@media (max-width:880px){.hero-dark .copy{padding-top:84px!important}}