/* Novelle graphite titanium: directional grain, a machined rim, and quiet depth. */
.nvl-metal-surface.nvl-metal-surface {
  --metal-x: 28%;
  --metal-y: 4%;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 11px;
  background:
    linear-gradient(112deg, transparent 7%, #e9edf014 22%, #edf0f508 29%, transparent 45%) padding-box,
    radial-gradient(ellipse at var(--metal-x) var(--metal-y), #e2e8f11c, transparent 65%) padding-box,
    repeating-linear-gradient(0deg, #d9e0e908 0 .5px, #00000009 .6px 1px, transparent 1.1px 2px) padding-box,
    linear-gradient(115deg, #34373b 0%, #24272b 25%, #131518 62%, #24282c 100%) padding-box,
    linear-gradient(138deg, #c8cfd6 0%, #6a737c 23%, #30363d 52%, #68727c 78%, #b1bac3 100%) border-box;
  box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #000000a6, 0 2px 2px #000b, 0 22px 42px -29px #000;
  color: #e4e8ed;
}
.nvl-metal-surface.nvl-metal-surface::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid;
  border-color: #dce3ea28 #a5b1bd12 #0305089c #dce3ea20;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #03050852;
  pointer-events: none;
}
.nvl-metal-surface.nvl-metal-surface:hover { border-color: transparent; }

/* Large product cards: contained visual and generously spaced content. */
.collection .product-grid { gap: 28px; }
.collection .product-card.nvl-metal-surface { padding: 8px; overflow: hidden; transform: none; }
.collection .product-card .product-visual { width: 100%; margin: 0; height: 236px; border-bottom: 1px solid #ced7e221; }
.collection .product-card .product-body { padding: 29px 28px 25px; }
.collection .product-card .product-type { color: #b7c2ce; }
.collection .product-card .product-body h3 { color: #f0f2f5; }
.collection .product-card .product-body>p:not(.product-type) { color: #c1c8cf; }
.collection .product-card .product-features { color: #d1d8df; }
.collection .product-card .voice-orbit { border-color: #d3dce578; background: linear-gradient(130deg,#33393e,#0d1013); box-shadow: inset 0 1px 0 #fff3, 0 0 0 5px #090c0f, 0 0 0 6px #aab8c033; }
.collection .product-card .mini-inquiry, .collection .product-card .mini-summary { background: #0b0f13d6; border-color: #b3c0cc4a; box-shadow: inset 0 1px 0 #ffffff0c; }
.collection .product-card .waveform { opacity: .65; overflow: hidden; }

/* Platform summaries and directory tiles share the same material. */
.integrations .integration-grid { gap: 28px; }
.integrations .integration-card.nvl-metal-surface { padding: 31px; }
.integrations .integration-card.nvl-metal-surface .integration-card-body { padding-top: 30px; }
.integrations .integration-card.nvl-metal-surface h3 { color: #edf0f4; }
.integrations .integration-card.nvl-metal-surface p { color: #c0c8cf; }
.integrations .integration-logo { background: transparent; }
.integrations .ecosystem-grid { gap: 18px; padding-top: 15px; }
.integrations .ecosystem-tool.nvl-metal-surface { padding: 29px 24px 27px; min-height: 258px; }
.integrations .ecosystem-tool .ecosystem-tool-brand { min-height: 43px; }
.integrations .ecosystem-tool .ecosystem-tool-brand h4 { color: #edf1f5; }
.integrations .ecosystem-tool .ecosystem-tool-label { color: #a7b6c5; }
.integrations .ecosystem-tool .ecosystem-tool-description { color: #c4cdd6; }
.ecosystem-filters button[aria-pressed=true] {
  background: repeating-linear-gradient(0deg,#ffffff12 0 .5px,#00000007 .5px 1.5px),linear-gradient(115deg,#e2e5e8,#b8bfc6 53%,#e4e8ec);
  border-color: #eef1f4 #9ca5af #848e98 #d6dde3;
  box-shadow: inset 0 1px 0 #fff9,0 2px 3px #0006;
  color: #161a1e;
  text-shadow: 0 1px #fff5;
}

/* The design and document previews belong to the same material family. */
.website-design-study.nvl-metal-surface .study-browser,
.document-workspace.nvl-metal-surface .document-workspace-header { background: #080c111f; border-bottom-color: #c6d1dc35; }
.website-design-study.nvl-metal-surface .study-page { background: linear-gradient(120deg,#03060b00,#03060b45); }
.website-design-study.nvl-metal-surface .study-headline { color: #f0f3f6; }
.document-workspace.nvl-metal-surface .document-tabs { background: #080c112e; }
.document-workspace.nvl-metal-surface .document-sheet { background: #06090d33; }
.document-workspace.nvl-metal-surface .document-intro,
.document-workspace.nvl-metal-surface .document-scope p,
.document-workspace.nvl-metal-surface .document-authorization p { color: #c1cbd5; }
.document-workspace.nvl-metal-surface .document-workspace-footer { background: #04080c36; color: #abb8c5; }

.legal-work .legal-grid { gap: 28px; }
.legal-work .legal-project.nvl-metal-surface { padding: 8px; }
.legal-work .legal-project.nvl-metal-surface .firm-identity { background: linear-gradient(130deg,#ffffff03,#05080c33); border-top: 0; border-bottom-color: #c7d3df31; }
.legal-work .legal-project.nvl-metal-surface .legal-project-body { padding: 28px; }
.legal-work .legal-project.nvl-metal-surface .legal-project-body>p { color: #c0c9d1; }

@media(min-width:761px) and (max-width:1100px) {
  .collection .product-card .product-body { padding: 26px 23px; }
  .collection .product-card .product-body h3 { font-size: 32px; }
  .integrations .integration-card.nvl-metal-surface { padding: 28px; }
  .integrations .integration-card.nvl-metal-surface h3 { font-size: 34px; }
}
@media(max-width:760px) {
  .collection .product-grid,.integrations .integration-grid,.legal-work .legal-grid { gap: 25px; }
  .integrations .ecosystem-grid { gap: 16px; }
  .integrations .ecosystem-tool.nvl-metal-surface { min-height: 245px; padding: 27px 23px; }
}
@media(max-width:580px) {
  .nvl-metal-surface.nvl-metal-surface { border-radius: 9px; }
  .nvl-metal-surface.nvl-metal-surface::before { border-radius: 5px; }
  .collection .product-card .product-body { padding: 24px 19px 23px; }
  .collection .product-card .product-body h3 { font-size: 33px; }
  .collection .product-card .product-visual { height: 215px; }
  .collection .product-card .intake-visual { padding-inline: 12px; }
  .collection .product-card .mini-inquiry { font-size: 13px; }
  .integrations .integration-card.nvl-metal-surface { padding: 28px 24px; }
  .integrations .integration-card.nvl-metal-surface h3 { font-size: 35px; }
  .integrations .ecosystem-tool.nvl-metal-surface { min-height: 0; padding: 27px 25px; }
  .legal-work .legal-project.nvl-metal-surface .legal-project-body { padding: 24px 19px; }
}
@media(max-width:360px) {
  .collection .product-card .product-body { padding-inline: 15px; }
  .collection .product-card .product-body h3 { font-size: 29px; }
  .integrations .integration-card.nvl-metal-surface { padding: 25px 20px; }
  .integrations .integration-card.nvl-metal-surface h3 { font-size: 32px; }
  .integrations .integration-logo.microsoft-wordmark { gap: 11px; }
  .integrations .integration-logo.microsoft-wordmark img { width: 27px; height: 27px; }
  .integrations .microsoft-wordmark>span { font-size: 23px; }
  .integrations .ecosystem-tool.nvl-metal-surface { padding: 26px 21px; }
  .integrations .ecosystem-tool .ecosystem-tool-brand h4 { font-size: 20px; }
}
@media(forced-colors:active) {
  .nvl-metal-surface.nvl-metal-surface { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow:none; }
  .nvl-metal-surface.nvl-metal-surface::before { display:none; }
  .ecosystem-filters button[aria-pressed=true] { background: Highlight; color: HighlightText; border-color: Highlight; box-shadow:none; text-shadow:none; }
}