/* ========================================================================== enterprise-v2.css — page layer for /by-size/enterprise -------------------------------------------------------------------------- Scoped to `.nm-ent` on , loaded AFTER site-v2.css. Consumes the shared v2 tokens (§1 of site-v2.css) — declares no colours or type sizes of its own beyond composition values. Rhythm is NOT set here: every section on the page uses the shared shapes (`.section.pad-layout`, `.bg-light`, `.bg-dark-wrapper`) so site-v2.css §6 owns the vertical gaps — sections take padding-top, bands take margin-top. Radius follows DESIGN-SYSTEM.md "sharp shell, curved interior": outer cells and panels are square, everything nested inside them uses --v2-radius-inner or a pill. ========================================================================== */ .nm-ent { --ent-gap: clamp(1.6rem, 1.6vw, 2.4rem); --ent-cell-pad: clamp(2.4rem, 2.4vw, 3.2rem); --ent-hairline: var(--v2-line); --ent-hairline-dark: rgba(254, 254, 252, 0.14); --ent-on-dark: rgba(254, 254, 252, 0.72); } /* ========================================================================== Shared: the eyebrow. `.nm-ent-eyebrow` is registered in site-v2.css §12, so it takes the ONE canonical label treatment (bare wide-tracked PT Mono between fading hairlines). Everything here is surface colour and spacing only — never a second eyebrow idiom. ========================================================================== */ .nm-ent .nm-ent-eyebrow { margin-bottom: 1.6rem; } .nm-ent .bg-dark-wrapper .nm-ent-eyebrow { color: rgba(254, 254, 252, 0.72); } /* Left-aligned eyebrows drop the leading rule — a rule before a flush-left block reads as an indent (same rule §12 applies to hero eyebrows). */ .nm-ent .nm-ent-plus__head .nm-ent-eyebrow:before, .nm-ent .nm-ent-cs__head .nm-ent-eyebrow:before { display: none; } /* Centred section intro shared by the light sections */ .nm-ent .nm-ent-intro { margin-bottom: clamp(4rem, 5vw, 6rem); } /* ========================================================================== 1. HERO ========================================================================== */ .nm-ent .nm-ent-hero { grid-column-gap: clamp(4rem, 6vw, 9rem); overflow: hidden; } .nm-ent .nm-ent-hero__copy { max-width: 62rem; flex: 1 1 52%; } .nm-ent .nm-ent-hero__copy .big-heading-n { margin-bottom: 2.4rem; } .nm-ent .nm-ent-hero__copy .text-80 { max-width: 54rem; } .nm-ent .nm-ent-hero__btns { grid-column-gap: 1.2rem; flex-wrap: wrap; margin-top: 3.2rem; display: flex; } .nm-ent .nm-ent-hero__proof { grid-column-gap: 2.4rem; grid-row-gap: 0.8rem; flex-wrap: wrap; margin: 3.2rem 0 0; padding: 0; list-style: none; display: flex; } .nm-ent .nm-ent-hero__proof li { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.06em; color: rgba(254, 254, 252, 0.55); display: flex; align-items: center; } .nm-ent .nm-ent-hero__proof li + li:before { content: ""; width: 0.4rem; height: 0.4rem; margin-right: 2.4rem; border-radius: 50%; background: rgba(254, 254, 252, 0.28); } /* ---- the demand console -------------------------------------------------- */ .nm-ent .nm-ent-console { flex: 0 1 48rem; position: relative; max-width: 48rem; } .nm-ent .nm-ent-console__glow { position: absolute; inset: -18% -12% -12%; background: radial-gradient(60% 55% at 62% 34%, rgba(67, 128, 249, 0.42), rgba(67, 128, 249, 0) 70%); filter: blur(0.6rem); pointer-events: none; } .nm-ent .nm-ent-console__panel { position: relative; border: 1px solid rgba(254, 254, 252, 0.12); border-radius: var(--v2-radius-inner); background: linear-gradient(180deg, rgba(39, 38, 50, 0.92), rgba(18, 17, 28, 0.92)); box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.45); backdrop-filter: blur(0.8rem); overflow: hidden; } .nm-ent .nm-ent-console__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.8rem 2.4rem; border-bottom: 1px solid rgba(254, 254, 252, 0.09); } .nm-ent .nm-ent-console__title { font-size: var(--fs-body-sm); color: rgba(254, 254, 252, 0.92); } .nm-ent .nm-ent-console__live { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 1rem; border-radius: 999px; background: rgba(67, 128, 249, 0.16); font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--_apps---colors--secondary); } .nm-ent .nm-ent-console__live i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #5fd0a6; animation: nmEntPulse 2.4s ease-in-out infinite; } @keyframes nmEntPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .nm-ent .nm-ent-console__rows { padding: 2.4rem; display: grid; gap: 1.8rem; } .nm-ent .nm-ent-console__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; margin-bottom: 0.8rem; } .nm-ent .nm-ent-console__store { font-size: var(--fs-body-sm); color: rgba(254, 254, 252, 0.82); } .nm-ent .nm-ent-console__count { font-family: "PT Mono", monospace; font-size: var(--fs-caption); color: rgba(254, 254, 252, 0.5); } .nm-ent .nm-ent-console__meter { height: 0.5rem; border-radius: 999px; background: rgba(254, 254, 252, 0.09); overflow: hidden; } .nm-ent .nm-ent-console__meter span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--v2-blue), var(--v2-blue-bright)); transform-origin: left center; animation: nmEntFill 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes nmEntFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .nm-ent .nm-ent-console__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(254, 254, 252, 0.09); } .nm-ent .nm-ent-console__stat { padding: 1.8rem 2.4rem; } .nm-ent .nm-ent-console__stat + .nm-ent-console__stat { border-left: 1px solid rgba(254, 254, 252, 0.09); } .nm-ent .nm-ent-console__stat-num { display: block; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); color: #fefefc; } .nm-ent .nm-ent-console__stat-lbl { display: block; margin-top: 0.4rem; font-size: var(--fs-caption); color: rgba(254, 254, 252, 0.5); } /* the floating restock chip */ .nm-ent .nm-ent-console__chip { position: absolute; left: -4rem; bottom: -3.2rem; display: flex; align-items: center; gap: 1.2rem; max-width: 26rem; padding: 1.4rem 1.8rem; border: 1px solid rgba(18, 17, 28, 0.06); border-radius: var(--v2-radius-inner); background: #fefefc; box-shadow: 0 2rem 4.8rem rgba(0, 0, 0, 0.28); font-size: var(--fs-caption); line-height: 1.45; color: var(--v2-muted); animation: nmEntFloat 7s ease-in-out infinite; } .nm-ent .nm-ent-console__chip strong { font-weight: 600; color: var(--_apps---colors--foreground); } .nm-ent .nm-ent-console__chip-mark { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--v2-ink); } @keyframes nmEntFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8rem); } } /* ========================================================================== 2. METRICS BAND ========================================================================== */ .nm-ent .nm-ent-metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-metrics__item { padding: clamp(2.8rem, 3vw, 4rem) clamp(2rem, 2.4vw, 3.2rem); border-right: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-metrics__item:first-child { padding-left: 0; } .nm-ent .nm-ent-metrics__item:last-child { border-right: 0; padding-right: 0; } .nm-ent .nm-ent-metrics__num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3.6rem, 4vw, 4.8rem); line-height: 1; letter-spacing: var(--tr-display); color: var(--_apps---colors--foreground); } .nm-ent .nm-ent-metrics__num span { color: var(--v2-blue-bright); } .nm-ent .nm-ent-metrics__lbl { margin-top: 1.2rem; max-width: 22rem; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--v2-muted); } .nm-ent .nm-ent-metrics__spark { display: flex; align-items: flex-end; gap: 0.4rem; height: 2.4rem; margin-top: 2rem; } .nm-ent .nm-ent-metrics__spark i { width: 0.6rem; height: var(--h); border-radius: 999px; background: linear-gradient(180deg, var(--v2-blue-bright), rgba(67, 128, 249, 0.25)); } /* ========================================================================== 3. CAPABILITY BENTO ========================================================================== */ .nm-ent .nm-ent-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ent-gap); } /* Cells span the 6-col track: full-width feature, then 3-up, then 2-up. */ .nm-ent .nm-ent-cell { grid-column: span 2; } .nm-ent .nm-ent-cell:nth-last-child(-n+2) { grid-column: span 3; } .nm-ent .nm-ent-cell { display: flex; flex-direction: column; padding: var(--ent-cell-pad); border: 1px solid var(--ent-hairline); background: var(--web-white); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nm-ent .nm-ent-cell:hover { transform: translateY(-4px); border-color: rgba(67, 128, 249, 0.35); box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.07); } .nm-ent .nm-ent-cell--wide { grid-column: span 6; flex-direction: row; align-items: center; gap: clamp(3.2rem, 4vw, 6rem); } .nm-ent .nm-ent-cell--wide .nm-ent-cell__body { flex: 1 1 46%; } .nm-ent .nm-ent-cell__icon { width: 3.2rem; height: 3.2rem; margin-bottom: 2rem; } .nm-ent .nm-ent-cell__title { margin: 0 0 1.2rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-ent .nm-ent-cell--wide .nm-ent-cell__title { font-size: var(--fs-h2); } .nm-ent .nm-ent-cell__copy { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-ent .nm-ent-cell__link { margin-top: auto; padding-top: 2rem; font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-blue); text-decoration: none; } .nm-ent .nm-ent-cell__link:after { content: " \2192"; transition: opacity 0.2s ease; } .nm-ent .nm-ent-cell__link:hover { color: var(--v2-blue-bright); } /* product chips inside the wide cell */ .nm-ent .nm-ent-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; } .nm-ent .nm-ent-chip { padding: 0.6rem 1.6rem; border: 1px solid var(--ent-hairline); border-radius: 999px; font-size: var(--fs-body-sm); color: var(--_apps---colors--foreground); text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .nm-ent .nm-ent-chip:hover { border-color: var(--v2-blue); background: rgba(0, 59, 175, 0.06); color: var(--v2-blue); } /* the three stacked widget cards */ .nm-ent .nm-ent-stack { flex: 1 1 44%; position: relative; /* holds the four offset cards: 3 × 7rem of stagger + one card (~6rem) */ min-height: 27rem; } .nm-ent .nm-ent-stack__card { position: absolute; left: 0; /* the cards are INSET rather than translated, so the stagger can never push the third card past its cell's edge */ width: calc(100% - 9.6rem); display: flex; align-items: center; gap: 1.6rem; padding: 1.4rem 1.6rem 1.4rem 2rem; border: 1px solid var(--ent-hairline); border-radius: var(--v2-radius-inner); background: #fff; box-shadow: 0 1.2rem 3.2rem rgba(18, 17, 28, 0.08); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } /* The vertical step is the card's own height, so the cascade reads as three distinct widgets rather than one card with two slivers behind it. */ .nm-ent .nm-ent-stack__card--bis { top: 0; transform: translateX(0); z-index: 3; } .nm-ent .nm-ent-stack__card--pre { top: 7rem; transform: translateX(3.2rem); z-index: 2; } .nm-ent .nm-ent-stack__card--low { top: 14rem; transform: translateX(6.4rem); z-index: 2; } .nm-ent .nm-ent-stack__card--wish { top: 21rem; transform: translateX(9.6rem); z-index: 1; } .nm-ent .nm-ent-cell--wide:hover .nm-ent-stack__card--pre { transform: translateX(2rem); } .nm-ent .nm-ent-cell--wide:hover .nm-ent-stack__card--low { transform: translateX(4rem); } .nm-ent .nm-ent-cell--wide:hover .nm-ent-stack__card--wish { transform: translateX(6rem); } .nm-ent .nm-ent-stack__tag { flex: none; font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-blue); } .nm-ent .nm-ent-stack__card--pre .nm-ent-stack__tag { color: #2f8f6b; } .nm-ent .nm-ent-stack__card--low .nm-ent-stack__tag { color: var(--red); } .nm-ent .nm-ent-stack__card--wish .nm-ent-stack__tag { color: var(--wishlist--wishlist-color); } .nm-ent .nm-ent-stack__line { flex: 1 1 auto; height: 0.6rem; border-radius: 999px; background: var(--grey); } .nm-ent .nm-ent-stack__btn { flex: none; white-space: nowrap; padding: 0.6rem 1.6rem; border-radius: 999px; background: var(--_apps---colors--foreground); font-size: var(--fs-caption); color: #fefefc; } .nm-ent .nm-ent-stack__card--pre .nm-ent-stack__btn { background: #2f8f6b; } .nm-ent .nm-ent-stack__card--low .nm-ent-stack__btn { background: var(--red); } .nm-ent .nm-ent-stack__card--wish .nm-ent-stack__btn { background: var(--wishlist--wishlist-color); } /* small in-cell visuals */ .nm-ent .nm-ent-mini { margin-top: 2.4rem; border: 1px solid var(--ent-hairline); border-radius: var(--v2-radius-inner); background: var(--grey); overflow: hidden; } .nm-ent .nm-ent-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1rem 1.6rem; font-size: var(--fs-caption); color: var(--v2-muted); } .nm-ent .nm-ent-mini__row + .nm-ent-mini__row { border-top: 1px solid rgba(18, 17, 28, 0.06); } .nm-ent .nm-ent-mini__row b { font-family: "PT Mono", monospace; font-weight: 400; color: #2f8f6b; } .nm-ent .nm-ent-mini__row b.is-out { color: var(--red); } .nm-ent .nm-ent-mini--langs { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1.4rem; background: var(--grey); } .nm-ent .nm-ent-mini--langs span { padding: 0.4rem 1.2rem; border-radius: 999px; background: #fff; font-size: var(--fs-caption); color: var(--v2-muted); } .nm-ent .nm-ent-mini--swatch { display: flex; align-items: center; gap: 0.8rem; padding: 1.4rem 1.6rem; } .nm-ent .nm-ent-mini--swatch i { width: 2rem; height: 2rem; border-radius: 50%; } .nm-ent .nm-ent-mini--swatch .sw-1 { background: var(--v2-blue); } .nm-ent .nm-ent-mini--swatch .sw-2 { background: var(--v2-blue-bright); } .nm-ent .nm-ent-mini--swatch .sw-3 { background: var(--_apps---colors--foreground); } .nm-ent .nm-ent-mini--swatch .sw-4 { background: var(--red); } .nm-ent .nm-ent-mini--swatch span { font-family: "PT Mono", monospace; font-size: var(--fs-caption); color: var(--v2-muted); } .nm-ent .nm-ent-code { margin-top: 2.4rem; padding: 1.6rem; border-radius: var(--v2-radius-inner); background: var(--v2-ink); font-family: "PT Mono", monospace; font-size: var(--fs-caption); line-height: 1.8; color: rgba(254, 254, 252, 0.86); } .nm-ent .nm-ent-code__k { color: var(--_apps---colors--secondary); } .nm-ent .nm-ent-code__c { color: rgba(254, 254, 252, 0.42); } /* ========================================================================== 4. NOTIFY ME! PLUS — dark band ========================================================================== */ .nm-ent .nm-ent-plus__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(4rem, 6vw, 9rem); align-items: start; } .nm-ent .nm-ent-plus__head .big-heading-n { max-width: 46rem; margin-bottom: 2rem; text-align: left; color: #fefefc; } .nm-ent .nm-ent-plus__lead { max-width: 46rem; margin: 0; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--ent-on-dark); } .nm-ent .nm-ent-plus__sla { margin: 3.2rem 0; max-width: 46rem; border: 1px solid var(--ent-hairline-dark); border-radius: var(--v2-radius-inner); background: rgba(254, 254, 252, 0.04); overflow: hidden; } .nm-ent .nm-ent-plus__sla-row { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.4rem 2rem; font-size: var(--fs-body-sm); color: var(--ent-on-dark); } .nm-ent .nm-ent-plus__sla-row + .nm-ent-plus__sla-row { border-top: 1px solid var(--ent-hairline-dark); } .nm-ent .nm-ent-plus__sla-row b { font-family: "PT Mono", monospace; font-weight: 400; color: var(--_apps---colors--secondary); } /* `.white-btn` is a block-level Webflow button; inside a grid column it would stretch to the full column width and stop reading as a control. */ .nm-ent .nm-ent-plus__cta { display: inline-flex; align-items: center; width: auto; align-self: flex-start; } .nm-ent .nm-ent-plus__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ent-hairline-dark); } .nm-ent .nm-ent-plus__item { display: flex; gap: 1.8rem; padding: clamp(2.4rem, 2.6vw, 3.2rem) 0; border-bottom: 1px solid var(--ent-hairline-dark); } .nm-ent .nm-ent-plus__item img { flex: none; width: 3.2rem; height: 3.2rem; } .nm-ent .nm-ent-plus__title { margin: 0 0 0.8rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); color: #fefefc; } .nm-ent .nm-ent-plus__item p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ent-on-dark); } /* ========================================================================== 5. ONBOARDING STEPS ========================================================================== */ .nm-ent .nm-ent-steps__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ent-gap); } .nm-ent .nm-ent-step { padding-top: 2.4rem; border-top: 2px solid var(--ent-hairline); position: relative; } .nm-ent .nm-ent-step:first-child { border-top-color: var(--v2-blue); } .nm-ent .nm-ent-step__num { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.12em; color: var(--v2-blue); } .nm-ent .nm-ent-step__title { margin: 1.2rem 0 1rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); color: var(--_apps---colors--foreground); } .nm-ent .nm-ent-step p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-ent .nm-ent-steps__links { display: flex; align-items: center; flex-wrap: wrap; gap: 2.4rem; margin-top: clamp(3.2rem, 4vw, 4.8rem); } .nm-ent .nm-ent-steps__links .nm-ent-cell__link { padding-top: 0; } /* ========================================================================== 6. CASE STUDIES BAND -------------------------------------------------------------------------- LIGHT on purpose. site-v2.css §13: the closing CTA plus the footer are the page's dark finale — a third dark band directly above them merges into one undifferentiated slab and the CTA stops reading as a moment. ========================================================================== */ .nm-ent .nm-ent-cs__head { margin-bottom: clamp(3.2rem, 4vw, 4.8rem); } .nm-ent .nm-ent-cs__grid { display: grid; /* minmax(0,…): with `1fr` the photos' intrinsic width becomes the column's min size and the grid grows past the page — that shipped a 168px horizontal scroll on the first pass. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ent-gap); } .nm-ent .nm-ent-cs__card { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; text-decoration: none; } .nm-ent .nm-ent-cs__media { aspect-ratio: 4 / 3; border-radius: var(--v2-radius-inner); overflow: hidden; } .nm-ent .nm-ent-cs__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .nm-ent .nm-ent-cs__card:hover .nm-ent-cs__media img { transform: scale(1.04); } .nm-ent .nm-ent-cs h3 { margin: 0; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); color: var(--_apps---colors--foreground); } .nm-ent .nm-ent-cs__card > div:last-child { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--v2-muted); } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ @media (max-width: 1199px) { .nm-ent .nm-ent-metrics__grid { grid-template-columns: repeat(2, 1fr); } .nm-ent .nm-ent-metrics__item:nth-child(2) { border-right: 0; padding-right: 0; } .nm-ent .nm-ent-metrics__item:nth-child(3) { padding-left: 0; border-top: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-metrics__item:nth-child(4) { border-top: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-ent .nm-ent-cell, .nm-ent .nm-ent-cell:nth-last-child(-n+2) { grid-column: span 1; } .nm-ent .nm-ent-cell--wide { grid-column: span 2; } .nm-ent .nm-ent-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-ent .nm-ent-cs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991px) { .nm-ent .nm-ent-hero { flex-direction: column; align-items: flex-start; } .nm-ent .nm-ent-hero__copy { max-width: none; } .nm-ent .nm-ent-console { flex: none; width: 100%; max-width: 52rem; margin-top: clamp(4rem, 6vw, 6rem); } .nm-ent .nm-ent-console__chip { left: auto; right: -1.6rem; bottom: -2.4rem; } .nm-ent .nm-ent-plus__grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .nm-ent .nm-ent-metrics__grid { grid-template-columns: 1fr; border-top: 0; } .nm-ent .nm-ent-metrics__item { padding: 2.4rem 0; border-right: 0; border-top: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-metrics__item:nth-child(2) { border-top: 1px solid var(--ent-hairline); } .nm-ent .nm-ent-metrics__lbl { max-width: none; } .nm-ent .nm-ent-bento { grid-template-columns: minmax(0, 1fr); } .nm-ent .nm-ent-cell, .nm-ent .nm-ent-cell:nth-last-child(-n+2), .nm-ent .nm-ent-cell--wide { grid-column: span 1; } .nm-ent .nm-ent-cell--wide { flex-direction: column; align-items: stretch; } .nm-ent .nm-ent-stack { min-height: 27rem; margin-top: 3.2rem; } .nm-ent .nm-ent-stack__card { width: calc(100% - 4.8rem); } .nm-ent .nm-ent-stack__card--pre { transform: translateX(1.6rem); } .nm-ent .nm-ent-stack__card--low { transform: translateX(3.2rem); } .nm-ent .nm-ent-stack__card--wish { transform: translateX(4.8rem); } .nm-ent .nm-ent-steps__grid { grid-template-columns: 1fr; } .nm-ent .nm-ent-cs__grid { grid-template-columns: 1fr; } .nm-ent .nm-ent-console__chip { position: static; margin-top: 1.6rem; max-width: none; animation: none; } } /* Motion is an enhancement, never a gate. */ @media (prefers-reduced-motion: reduce) { .nm-ent .nm-ent-console__meter span, .nm-ent .nm-ent-console__chip, .nm-ent .nm-ent-console__live i { animation: none; } .nm-ent .nm-ent-cell, .nm-ent .nm-ent-stack__card, .nm-ent .nm-ent-cs__media img { transition: none; } }