/* OFFPEAK material and full-card explanation layer.
   Loaded after scenes.css. Geometry, type sizes, animation names and durations remain in scenes.css. */
:root {
  --material-neon: #ccff00;
  --material-edge: #747574;
  --material-ink: #ebebeb;
  --material-muted: #acafac;
  --material-ease: cubic-bezier(.22, 1, .36, 1);
}
/* The dissolve reveals only the explainer, in place, without distorting its surface. */
@property --material-dissolve { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --material-hover { syntax:"<number>"; inherits:false; initial-value:0; }

/* The card plane stays straight in every state; illustration descendants retain their 3D. */
:is(.material-card,.material-panel) {
  transform:none!important;
  rotate:none!important;
  scale:1!important;
  perspective:none!important;
}

/* Apply the approved graphite chassis to the objects, not to their surrounding page. */
.material-card .offpeak-scene {
  --scene-ink: #e4e4e4;
  --scene-muted: #a3a7a3;
  --scene-line: #5f625f;
  --scene-paper: #3d3e3d;
  --scene-lime: #ccff00;
  background: transparent;
}
.material-card [data-material-surface] {
  background-color: #3d3e3d;
  background-image: linear-gradient(155deg, #636463e8 0%, #474847 32%, #353635 78%, #2d2e2d 100%);
  border-color: #727472;
  color: var(--material-ink);
  box-shadow: inset 0 1px 0 #f3f3f33b, inset 1px 0 0 #dfe0df1f,
    inset 0 -2px 0 #14141480, 0 3px 0 -1px #242624, 0 11px 24px #25262515;
}
.material-card [data-material-surface] :is(h3,strong,b) { color: #e5e6e5; }
.material-card [data-material-surface] :is(p,small,.scene-subtitle) { color: #abaeab; }
.material-card [data-material-surface] :is(.scene-kicker,.scene-small-icon,.scene-demo) { color: #b1b4b1; }
.material-card [data-material-surface] .scene-demo {
  background: #22232250;
  border-color: #737873;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.material-card [data-material-surface] :is(.scene-small-icon svg,.endpoint-icon svg) {
  transform: none;
  stroke: currentColor;
  filter: drop-shadow(0 1px 0 #17181766);
}
.material-card .quote-document {
  isolation: isolate;
  color: #e3e4e3;
  background: none;
  box-shadow: none;
}
.material-card .quote-document::before {
  content: "";
  position: absolute;
  inset: -22px -5px -22px -22px;
  z-index: -1;
  border-radius: 15px;
  border: 1px solid #6d726d;
  background: linear-gradient(155deg,#5b5e5b,#3f433f 45%,#2f312f);
  box-shadow: inset 0 1px 0 #f2f3f24a,inset 0 -2px 0 #17181780,0 10px 30px #34353415;
}
.material-card .quote-copy { border-color: #6c716c5c; }
.material-card .quote-copy>span { color: #adb2ad; }
.material-card .quote-selected strong { color: #dddedd; }
.material-card .quote-selection { background: #ccff0025; outline: 1px solid #ccff0050; }
.material-card .quote-context { background: #393c39ed; border-color: #79817a; color: #cecece; backdrop-filter: blur(12px); }
.material-card .scene-key { background: #262726; border: 1px solid #6b726b; color: #cacaca; }
.material-card :is(.quote-faint-line,.sheet-rule) { background: #a1a6a124; }
.material-card .model-sheet-back { background: linear-gradient(145deg,#919391,#6f736f); color:#d0d2d0; }
.material-card .model-sheet-middle { background: linear-gradient(145deg,#717571,#515551); color:#c2c5c2; }
.material-card .model-paper-art { color: #878c87; }
.material-card .model-center { fill: #ccff00; stroke: #bebfbe; filter: drop-shadow(0 0 7px #ccff0059); }
.material-card .model-reveal { background: #323232ee; border-color: #7d847d; color: #e4e5e4; backdrop-filter: blur(12px); }
.material-card .model-reveal p { border-color:#767d764d; }
.material-card .model-reveal p span { color:#dddedd; }
.material-card :is(.endpoint-icon,.endpoint-connection>span) {
  background: linear-gradient(145deg,#5e635f,#3d403d);
  border-color:#838a83;
  color:#d1d1d1;
  box-shadow:inset 0 1px 0 #f2f3f233,0 2px 0 #212221;
}
.material-card .endpoint-preview { background:#2c2f2c; border-color:#6269634a; }
.material-card .endpoint-model { background:linear-gradient(140deg,#717872,#3b3c3b); border-color:#999a99; }
.material-card .endpoint-flow-labels { color:#a3a8a3; }
.material-card .endpoint-connection>span svg { stroke:#c3c4c3; }
.material-card .endpoint-connection i { background:#868e8666; }
.material-card .endpoint-connection i::after { background:#ccff00; box-shadow:0 0 8px #ccff0066; }
.material-card .endpoint-caret { background:#ccff00; }
.material-card .endpoint-code,.material-card .endpoint-code small { color:#adaead; }
.material-card .endpoint-code>span { color:#ccff00; }
.material-card .availability-tile { background-image:linear-gradient(140deg,#606360,#393d39 60%,#2e2e2e); border-color:#7c847c; }
.material-card .availability-header { color:#bdbebd; }
.material-card .availability-tile p,.material-card .availability-foot { color:#a3a9a3; }
.material-card :is(.scene-dot,.availability-pulse,.radar-table i,.assistant-thinking i) {
  background:#ccff00;
  box-shadow:0 0 8px #ccff0047;
}
.material-card .capacity-state { color:#dedfde; }
.material-card .availability-glyph i { background:#ccff00; border-color:#babbba; box-shadow:inset 0 1px 0 #e7e8e7,0 0 12px #ccff0030; }
.material-card .meter-wave { background:#232523; border-color:#656c6547; box-shadow:inset 0 2px 5px #12131238; }
.material-card .wave-bar { background:#a4a6a4; }
.material-card .meter-playhead { background:#ccff00; box-shadow:0 0 10px #ccff0055; }
.material-card .meter-controls,.material-card .meter-note,.material-card .meter-settlement span { color:#acadac; }
.material-card .meter-token-pill { background:#2c2c2c; border-color:#6d6f6d; color:#c2c2c2; }
.material-card .meter-play { color:#ccff00; }
.material-card .meter-divider { background:#7880794d; }
.material-card .meter-settlement strong { color:#dbdcdb; }
.material-card .signature-sheet { background-image:linear-gradient(150deg,#696c69,#4b4e4b 47%,#383938); }
.material-card .signature-title { color:#e9eae9; }
.material-card .signature-header,.material-card .signature-field { color:#b7b7b7; border-color:#8a918a4f; }
.material-card .signature-rule { background:#7d847e4d; }
.material-card :is(.signature-line,.signature-understroke,.signature-tick) { stroke:#ccff00; filter:drop-shadow(0 0 2px #ccff0029); }
.material-card .signature-pen { fill:#545a55; stroke:#cccccc; filter:drop-shadow(2px 4px 2px #1e1f1e33); }
.material-card .radar-heading,.material-card .radar-footer { color:#bfc3bf; }
.material-card .radar-grid { stroke:#848c84; opacity:.54; }
.material-card .radar-area { fill:#ccff0022; stroke:#ccff00; }
.material-card .radar-points { fill:#ccff00; stroke:#c5c6c5; }
.material-card .radar-labels { fill:#b9bab9; }
.material-card .radar-table>div { border-color:#8485843b; }
.material-card .radar-table span,.material-card .radar-table strong { color:#c7c8c7; }
.material-card .radar-table i.limited { background:#8d8e8d; box-shadow:none; }
.material-card .radar-toggle { background:#2a2d2a; border-color:#686968; }
.material-card .radar-toggle i { background:#b3b3b3; }
.material-card :is(.assistant-prompt,.assistant-followup) { color:#dedfde; border-radius:12px; }
.material-card .assistant-source { color:#b9bab9; border-radius:9px; }
.material-card .assistant-output>div { color:#d8d8d8; border-color:#8890886b; }
.material-card .assistant-output i { color:#afb0af; }
.material-card .assistant-answer { color:#b6bab7; }
.material-card .assistant-thinking,.material-card .assistant-complete { color:#a8aaa8; }
.material-card .assistant-complete svg { stroke:#ccff00; }
.material-card .wallet-browser { background:#393939; }
.material-card .wallet-browser-tabs { background:linear-gradient(#a9aaa9,#909490); }
.material-card .wallet-browser-tabs>span { background:#606460; color:#e4e4e4; }
.material-card .wallet-browser-tabs>span i { background:#ccff00; border-color:#bababa; box-shadow:0 0 7px #ccff002e; }
.material-card .wallet-browser-tabs :is(b,em) { color:#d9d9d9; }
.material-card .wallet-browser-toolbar { background:#595e59; border-color:#939a9466; color:#cecece; }
.material-card .wallet-browser-toolbar>div { background:#3a3e3a; color:#b7b8b7; box-shadow:inset 0 1px 4px #1f201f40; }
.material-card .wallet-toolbar-icon { background:#373737; color:#ccff00; }
.material-card .wallet-browser-skeleton i { background:#82888336; }
.material-card .wallet-authorization p,.material-card .wallet-sign-row { color:#a9aaa9; }
.material-card .wallet-authorization strong { color:#dedfde; }
.material-card .wallet-cap { border-color:#868e864f; }
.material-card .wallet-sign-row>strong { background:linear-gradient(#5b5d5b,#434343); border-color:#8b8d8b; color:#dfe0df; box-shadow:inset 0 1px 0 #dfe0df38; }
.material-card .wallet-sign-row svg { stroke:#ccff00; }
.material-card .wallet-approved>span { background:#2f302f; border-color:#858785; color:#ccff00; box-shadow:inset 0 1px 0 #ccff002a,0 0 15px #ccff000c; }
.material-card .wallet-approved h3 { color:#dddedd; }
.material-card .request-canvas { background-color:#363636; background-image:radial-gradient(circle,#96989645 .8px,transparent 1px); }
.material-card :is(.request-canvas-label,.request-canvas-foot,.quote-after) { color:#b1b2b1; }
.material-card .request-log-paper { box-shadow:inset 1px 0 0 #f3f4f329,-9px 0 25px #34353412; }
.material-card .request-log-lines>div { color:#adaead; border-color:#8f908f40; }
.material-card .request-log-lines strong { color:#d9d9d9; }
.material-card .request-inserted { background:#363636; border-color:#7778775c; }
.material-card .request-inserted-icon { background:#2a2a2a; border-color:#8b8d8b; color:#ccff00; }
.material-card .request-inserted :is(strong,p) { color:#cccdcc; }
.material-card .request-drop-line { background:#ccff00; box-shadow:0 0 8px #ccff003d; }
.material-card .export-button { background:linear-gradient(145deg,#636a64,#3e3e3e); border:1px solid #848684; color:#cecece; box-shadow:inset 0 1px 0 #e6e7e62e; }
.material-card .export-tooltip { background:#2b2b2b; color:#d5d6d5; border:1px solid #7b7c7b; }
.material-card .export-menu>div { color:#bdbdbd; }
.material-card .export-menu>div:first-child { background:#52535238; }
.material-card .export-check-icon { stroke:#ccff00; }
.material-card .scene-cursor { fill:#e2e3e2; stroke:#373737; filter:drop-shadow(0 2px 3px #19191935); }
.material-card .scene-bottom-fade { background:linear-gradient(0deg,#323232,#32323299 22%,#32323200); }
.material-card .material-eye { stroke:#ccff00!important; stroke-width:2.8; stroke-linecap:round; filter:drop-shadow(0 0 2px #ccff0066); }

/* Physical graphite casing; all card interactions retain a straight front face. */
.material-card {
  position:relative; isolation:isolate;
  background-color:#4c504d;
  background-image:
    repeating-linear-gradient(110deg,#ffffff03 0 1px,#00000002 1px 3px,transparent 3px 6px),
    radial-gradient(ellipse at 20% 0%,#b9bab966,transparent 57%),
    linear-gradient(150deg,#747975 0%,#4b504b 38%,#373837 78%,#292a29 100%);
  box-shadow:inset 0 1px 0 #e1e3e19e,inset 1px 0 0 #aaaeab57,
    inset -1px 0 0 #191b1999,inset 0 -3px 0 #131413b3,
    0 1px 1px #181b191a,0 7px 12px -8px #21232180;
}
.material-card::before {
  content:""; position:absolute; inset:8px; z-index:0; border-radius:inherit;
  border:1px solid #1e1f1e;
  background:
    radial-gradient(ellipse at 35% -20%,#8f939029,transparent 64%),
    repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#3b3b3b,#2f302f 76%,#323232);
  box-shadow:inset 0 2px 5px #0e0f0e4d,inset 0 0 0 1px #c7cac70c,
    0 1px 0 #cbcfcb3b;
  pointer-events:none;
}
.material-card::after {
  content:""; position:absolute; inset:0; z-index:10; border-radius:inherit;
  border:1px solid #aaafaa52;
  background:
    linear-gradient(#ccff00,#ccff00) calc(50% - 4px) calc(100% - 3px)/2px 3px no-repeat,
    linear-gradient(#ccff00,#ccff00) calc(50% + 4px) calc(100% - 3px)/2px 3px no-repeat,
    linear-gradient(160deg,#e7e9e726,transparent 25% 72%,#1112112b);
  box-shadow:inset 0 1px 0 #f3f3f34d,inset 0 -1px 0 #0c0c0c80;
  transition:border-color .38s var(--material-ease),box-shadow .38s var(--material-ease);
  pointer-events:none;
}
.material-card>.scene-frame { background:transparent; z-index:1; }
.material-card>p { color:#d6d8d6; text-shadow:0 1px 4px #12131273; }
/* The whole feature card opens the explanation; the native button also supports keyboards. */
.material-card.material-card-interactive { cursor:pointer; }
.material-card.material-card-interactive::after {
  --material-hover:0;
  background:
    radial-gradient(ellipse at var(--panel-light-x,35%) var(--panel-light-y,20%),rgb(204 255 0 / calc(var(--material-hover) * .035)),transparent 62%),
    linear-gradient(#ccff00,#ccff00) calc(50% - 4px) calc(100% - 3px)/2px 3px no-repeat,
    linear-gradient(#ccff00,#ccff00) calc(50% + 4px) calc(100% - 3px)/2px 3px no-repeat,
    linear-gradient(160deg,#e7e9e726,transparent 25% 72%,#1112112b);
  transition:--material-hover .38s var(--material-ease),border-color .38s var(--material-ease),box-shadow .38s var(--material-ease);
}
.material-card.material-card-interactive:is(:hover,:focus-within)::after {
  --material-hover:1;
  border-color:#c5d59866;
  box-shadow:inset 0 1px 0 #f3f3f363,inset 0 0 22px #ccff0007,inset 0 -1px 0 #0c0c0c80;
}
.material-explore {
  position:absolute;z-index:12;top:12px;right:12px;
  display:flex;align-items:center;gap:7px;min-height:31px;padding:5px 9px;
  border:1px solid #868c866b;border-radius:6px;
  background:linear-gradient(150deg,#50534f,#30322f);color:#c9cebf;
  box-shadow:inset 0 1px 0 #e1e5d729,0 1px 2px #12151240;
  font:500 10px/1.2 Manrope,Arial,sans-serif;letter-spacing:.015em;
  cursor:pointer;touch-action:manipulation;
  transition:color .38s var(--material-ease),border-color .38s var(--material-ease),box-shadow .38s var(--material-ease);
}
.material-explore svg { width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.material-card:hover .material-explore,.material-explore:focus-visible {
  color:#e2ebd1;border-color:#ccff0059;
  box-shadow:inset 0 1px 0 #e1e5d747,0 1px 2px #12151240,0 0 0 1px #ccff000c;
}
.material-explore:focus-visible { outline:2px solid #ccff00;outline-offset:4px; }
.material-card[data-material-active="true"]::after { border-color:#b8c89b70; }

/* A fixed local portal matches the original rectangle and never changes the page or card plane. */
.material-stage {
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .46s var(--material-ease),visibility 0s linear .46s;
}
.material-stage.is-open { opacity:1;visibility:visible;transition:opacity .46s var(--material-ease); }
.material-backdrop { display:none!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important; }
.material-portal {
  position:absolute;left:0;top:0;width:0;height:0;
  margin:0;padding:0;border:0;border-radius:var(--material-radius,8px);
  overflow:visible;pointer-events:auto;perspective:none;
}
.material-volume {
  --material-dissolve:0px;
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  transform:none;rotate:none;scale:1;
  mask-image:radial-gradient(circle,#000 calc(var(--material-dissolve) - .6px),transparent var(--material-dissolve));
  mask-size:8px 8px;
  transition:--material-dissolve .46s var(--material-ease);
}
.material-stage.is-open .material-volume {
  --material-dissolve:7px;
  transform:none;rotate:none;scale:1;
}
.material-volume>.offpeak-card-explainer {
  width:100%;height:100%;min-width:0;min-height:0;margin:0;border-radius:inherit;
}
.material-controls { position:absolute;z-index:30;top:12px;right:12px;display:flex;pointer-events:auto; }
.material-controls button {
  display:grid;place-items:center;width:30px;height:30px;margin:0;padding:0;
  border:1px solid #747a6c;border-radius:50%;background:#30352a;color:#e1e6d7;
  box-shadow:inset 0 1px 0 #eef1e729,0 1px 3px #181d152e;cursor:pointer;touch-action:manipulation;
}
.material-controls button:hover { background:#3d4531;border-color:#a4bb7b; }
.material-controls button:focus-visible { outline:2px solid #7a983e;outline-offset:3px; }
.material-controls svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.material-sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

/* Front-facing, cast graphite controls. Existing padding, type and footprints are retained. */
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy) {
  --surface-lift:0px;
  isolation:isolate;
  color:#eff0ef;
  border-color:#71747180;
  background-color:#3c3e3c;
  --surface-skin:
    radial-gradient(ellipse at var(--surface-x,28%) var(--surface-y,0%),#c1c6c12b,transparent 65%),
    repeating-linear-gradient(108deg,#ffffff04 0 1px,#00000003 1px 2px,transparent 2px 4px),
    linear-gradient(165deg,#5f635f 0%,#404440 24%,#323432 72%,#272a27 100%);
  background-image:var(--surface-skin);
  box-shadow:inset 0 1px 0 #d7dbd857,inset 1px 0 0 #a0a8a12b,
    inset -1px 0 0 #181b1980,inset 0 -1px 0 #121412cc,
    0 2px 0 #1a1c1a,0 4px 6px -3px #16171647;
  text-shadow:0 1px 1px #13141380;
  opacity:1;
  transform:var(--surface-placement,translate(0,0)) perspective(550px) translateY(calc(var(--surface-lift) + var(--surface-press,0) * 2px))
    rotateX(var(--surface-rx,0deg)) rotateY(var(--surface-ry,0deg)) scale(calc(1 - var(--surface-press,0) * .016));
  transition:box-shadow .22s,color .2s,border-color .2s,transform .4s cubic-bezier(.2,.85,.25,1.15);
  backdrop-filter:none;
}
.faithful-button,#hero .hero-example-button,#hero .hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy,.opcity-district-tab { position:relative; }
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy)::before {
  content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;
  border:1px solid #b6bbb617;
  background:linear-gradient(165deg,#e7e8e70f,transparent 48%);
  box-shadow:inset 0 1px 0 #eceeec0d;
}
:is(.faithful-button,#hero .hero-example-button,.opcity-pause)::after {
  content:"";position:absolute;left:calc(50% - 6px);bottom:4px;width:12px;height:2px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,#ccff00 0 25%,transparent 25% 75%,#ccff00 75%);
  box-shadow:0 1px 3px #ccff0012;
  opacity:.64;transition:opacity .2s,filter .2s;
}
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):is(:hover,:focus-visible,.is-surface-hover) {
  --surface-lift:-1px;
  border-color:#a1a8a18f;color:#f4f4f4;opacity:1;
  background-color:#3f423f;
  background-image:var(--surface-skin);
  box-shadow:inset 0 1px 0 #e7e8e780,inset 1px 0 0 #bdc2bd40,
    inset -1px 0 0 #1a1c1a80,inset 0 -1px 0 #121312cc,
    0 2px 0 #1c1f1c,0 6px 9px -4px #21232152,0 0 0 1px #ccff0010;
}
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):is(:hover,:focus-visible,.is-surface-hover,:active,.is-surface-pressed) {
  transform:var(--surface-placement,translate(0,0)) perspective(550px)
    translateY(calc(var(--surface-lift) + var(--surface-press,0) * 2px))
    rotateX(var(--surface-rx,0deg)) rotateY(var(--surface-ry,0deg)) scale(calc(1 - var(--surface-press,0) * .016));
}
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy)[data-surface-ready] {
  transition-property:box-shadow,color,border-color;
}
:is(.faithful-button,#hero .hero-example-button,.opcity-pause):is(:hover,:focus-visible,.is-surface-hover)::after { opacity:1;filter:drop-shadow(0 0 3px #ccff0066); }
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):is(:active,.is-surface-pressed) {
  background-image:var(--surface-skin);
  box-shadow:inset 0 1px 3px #1113116b,inset 0 0 0 1px #929a9233,0 1px 0 #1c1e1c;
}
:is(.opcity-hotspot,.opcity-district-tab,#hero .hero-example-button,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):is([aria-pressed="true"]) { color:#ccff00;border-color:#ccff0070;box-shadow:inset 0 1px 0 #dae0d54d,0 2px 0 #1c1f1c,0 0 0 2px #ccff0019; }
:is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):focus-visible { outline:2px solid #7b857b;outline-offset:4px; }
.opcity-hotspot {
  --surface-placement:translate(-50%,-50%);
}
.opcity-hotspot[aria-pressed="true"] { color:#dadcda;border-color:#ccff0070;box-shadow:inset 0 1px 0 #d4d7d454,0 2px 0 #1c1f1c,0 0 0 2px #ccff0019; }
.opcity-hotspot svg { filter:drop-shadow(0 1px 0 #121412); }
/* Shared card families: cast rims and brushed plates, with the existing layout untouched. */
.material-panel {
  --panel-light-x:26%;--panel-light-y:0%;
  position:relative;isolation:isolate;color:#e5e5e5;
  background-color:#3d3d3d;
  --material-panel-skin:
    linear-gradient(#ccff00,#ccff00) calc(50% - 4px) calc(100% - 4px)/2px 2px no-repeat,
    linear-gradient(#ccff00,#ccff00) calc(50% + 4px) calc(100% - 4px)/2px 2px no-repeat,
    radial-gradient(ellipse at var(--panel-light-x) var(--panel-light-y),#acafac28,transparent 68%),
    repeating-linear-gradient(108deg,#ffffff03 0 1px,#00000003 1px 2px,transparent 2px 5px),
    linear-gradient(155deg,#555755,#373937 58%,#2c2c2c);
  background:var(--material-panel-skin);
  border-color:#6e716e5c;
  box-shadow:inset 0 1px 0 #d9dcd96b,inset 1px 0 0 #b7bbb736,
    inset -1px 0 0 #18191899,inset 0 -2px 0 #131413b3,
    0 2px 0 -1px #191a194d,0 8px 14px -10px #1d201e70;
}
.material-panel::after {
  content:"";position:absolute;inset:3px;z-index:4;pointer-events:none;
  border:1px solid #c8ccc810;border-radius:inherit;
  box-shadow:inset 0 1px 0 #ecedec0b;
  transition:border-color .38s var(--material-ease),box-shadow .38s var(--material-ease);
}
:is(.docs-page,.offpeak-page,.console-page) .material-panel { background:var(--material-panel-skin); }
.material-panel :is(h2,h3,h4,strong,blockquote) { color:#e3e4e3; }
.material-panel :is(p,small,li,label,dt,figcaption) { color:#b3b6b3; }
.material-panel :is(.text-muted,.pages-card-eyebrow,.pages-widget-description,.preview-footnote,.docs-tiny-label,.docs-caption) { color:#a7aba8; }
.material-panel :is(.pages-preview,.tiny-tag,.docs-phase-state) { background:#252826;border-color:#676e6847;color:#b4b9b4; }
.material-panel :is(.pages-text-link,.docs-inline-link) { color:#d3d6d3;border-color:#a4aaa459; }
.material-panel a:not(.pages-pill,.faithful-button,.docs-button,.button):focus-visible { outline-color:#ccff00; }
.material-panel:is(a,[tabindex]):is(:hover,:focus-visible) {
  box-shadow:inset 0 1px 0 #e8e9e880,inset 0 0 0 1px #ccff0033,
    inset 0 -2px 0 #131413b3,0 7px 15px -9px #2b2d2b80;
}
.material-panel.gallery-box::before { background:linear-gradient(145deg,#969d9630,#ccff0007 65%); }
.material-panel.gallery-box .gallery-box__toolbar { color:#bfc2bf; }
.material-panel.gallery-box:hover .gallery-box__toolbar { color:#eef0ee; }
.material-panel .gallery-box__frame {
  background:#2e302e;
  box-shadow:inset 0 0 0 1px #8f968f33,0 1px 0 #c2c7c32e,0 5px 15px #12131233;
}
.material-panel.gallery-box[aria-current="true"] { outline-color:#798179; }
.material-panel-illustration .article-object { background:transparent!important; }
.material-panel .integration-row { color:#d4d7d4; }
.material-panel .usecase-avatar { background:linear-gradient(150deg,#666966,#373b37)!important;box-shadow:inset 0 1px 0 #d6d9d63d,inset 0 -1px 0 #12141299,0 2px 3px #0f110f33; }
.material-panel .usecase-avatar>.line-icon { color:#ccff00; }
.material-panel[data-closing="panel"] .closing-dots { filter:invert(1);opacity:.48; }

/* The native workflow illustrations use the same physical paper/glass materials. */
.offpeak-page .page-scene { color:#d4d6d4;background:transparent; }
.offpeak-page .page-scene.material-panel { background:var(--material-panel-skin); }
.offpeak-page .page-scene::after { background:linear-gradient(140deg,#e6e7e60a,transparent 65%); }
.offpeak-page :is(.preview-sheet,.preview-classification,.preview-table,.preview-summary,.preview-source,.preview-routes span,.preview-compare>div,.preview-network>span,.preview-network>b,.preview-meter,.preview-chat>div,.preview-stack>div:first-child,.preview-stack>div:nth-child(2)) {
  background-color:#404340;
  background-image:repeating-linear-gradient(105deg,#ffffff03 0 1px,transparent 1px 3px),linear-gradient(150deg,#656966,#404340 43%,#2d2f2d);
  border-color:#7e847e73;
  color:#d9dcd9;
  box-shadow:inset 0 1px 0 #edeeed38,inset 0 -1px 0 #16171670,0 1px 0 #1c1d1c,0 1.2cqw 2.4cqw #16171633;
}
.offpeak-page .page-scene :is(p,b,strong,.preview-sheet-title) { color:#dbdddb; }
.offpeak-page .page-scene :is(span,small) { color:#abaeab; }
.offpeak-page .preview-row i { background:#ccff00;box-shadow:0 0 4px #ccff0033; }
.offpeak-page :is(.preview-tags b,.preview-tagcloud b) { background:linear-gradient(#464b46,#2e312e);border:1px solid #70787066;box-shadow:inset 0 1px 0 #bcc0bc2b;color:#d1d4d1; }
.offpeak-page .preview-table>div { border-color:#7c827c40; }
.offpeak-page .preview-table>div:nth-child(3) { background:#ccff000a; }
.offpeak-page .preview-summary i { background:#7e857e52; }
.offpeak-page .preview-routes .selected { border-color:#ccff0070;box-shadow:inset 0 0 0 1px #ccff0014,0 1.2cqw 2.4cqw #16171633; }
.offpeak-page .preview-wires path { stroke:#ccff0070; }
.offpeak-page .preview-network { background:linear-gradient(28deg,transparent 49.8%,#ccff0040 50%,transparent 50.4%),linear-gradient(-28deg,transparent 49.8%,#ccff0040 50%,transparent 50.4%); }
.offpeak-page .preview-meter i { background:linear-gradient(to right,#ccff00 var(--value),#282b28 var(--value));box-shadow:inset 0 1px 3px #13151352; }
.offpeak-page .preview-compare p { border-color:#8b928b40; }
.offpeak-page .pages-price-card li::before { color:#ccff00; }
.offpeak-page .pages-code-block pre { color:#ccd0cc; }
.offpeak-page .pages-workflow-detail textarea { background:#292b29;border-color:#737b734d;color:#d1d5d2;box-shadow:inset 0 2px 5px #1416144d; }

/* Reference FAQs remain rows; only their small disclosure control receives a casing. */
[data-faq]>span:last-child { border-radius:50%;background:linear-gradient(145deg,#515351,#2e302e);color:#d4d7d4;box-shadow:inset 0 1px 0 #c7cac747,0 1px 0 #161716; }
[data-faq][aria-expanded="true"]>span:last-child { color:#ccff00;box-shadow:inset 0 1px 0 #cacdca66,0 0 0 1px #ccff0033; }

/* Documentation keeps its reading column open; only existing bounded examples are plates. */
.docs-page .material-panel { --docs-line:#666b664d;--docs-muted:#a2a6a2;--docs-ink:#e1e3e1; }
.docs-page .material-panel :is(h3,dd,tbody th,strong) { color:#dbdedb; }
.docs-page .material-panel :is(caption,.docs-case-flow span) { background:#2a2e2b;color:#bec3be; }
.docs-page .material-panel :is(th,td) { border-color:#737b7340;color:#b3b8b3; }
.docs-page .material-panel :is(thead th,.docs-amounts dt) { color:#a0a5a0; }
.docs-page .material-panel code { color:#dcdfdc; }
.docs-page .material-panel .code-comment { color:#9ca29d; }
.docs-page .docs-note { border-left-color:#ccff00; }

/* Functional console cards: retain all field/table dimensions and the existing disabled states. */
.console-page .material-panel { --line:#6f746f47;--muted:#a8aba8;--white:#373a37;--ink:#e0e3e1; }
.console-page .material-panel :is(h2,strong,.balance-number,.stat-value,.max-charge strong,.price-lines dd) { color:#dde0dd; }
.console-page .material-panel :is(.card-label,.balance-details,.stat-description,.capacity-footer,.field-label,.field-help,.quote-explainer,.quote-disclaimer,.model-facts span,.receipt-row p,.receipt-summary,.result-footer,.step-tag) { color:#a4a9a4; }
.console-page .material-panel :is(textarea,select,pre,.model-selection,.quote-status) { background:#292d2a;border-color:#6e776f4d;color:#c7cac7;box-shadow:inset 0 2px 5px #15171545; }
.console-page .material-panel :is(textarea,select)::placeholder { color:#989e99; }
.console-page .material-panel :is(td,td small,.receipt-details,.receipt-row h2) { color:#b9bdb9;border-color:#676f6840; }
.console-page .material-panel th { background:#2c302d;color:#c0c5c1; }
.console-page .material-panel :is(.balance-details,.max-charge,.receipt-row) { border-color:#77807847; }
.console-page .material-panel .status-pill,.console-page .material-panel .neutral-status:is(.ready,.completed) { color:#ccff00; }
.console-page .material-panel .capacity-visual span { background:linear-gradient(#abb0ab,#666d66);border-color:#99a099; }
.console-page .material-panel .capacity-visual span:nth-child(n+6) { background:#4c514c40;border-color:#717a7240; }
.console-page .button:disabled { color:#8b8d8b;filter:saturate(.25);opacity:.48;box-shadow:inset 0 1px 3px #14151433;transform:none; }
.console-page .material-panel .table-action { color:#bfc3bf; }
.console-page .material-panel :is(p,.panel-title p:not(.eyebrow),.card-header p,.panel-header p,.field-label.prompt-label span,.model-selection span:not(.tiny-tag),.price-lines dt,.price-lines dd small,.max-charge>span,.max-charge small,.quote-timer,.balance-number>span:last-child,.capacity-footer>span,.request-progress span) { color:#b8c5ac; }
#hero .hero-example-panel.material-panel { background:var(--material-panel-skin);border-color:#70776380;color:#dce1d6;box-shadow:inset 0 1px 0 #dce1d560,inset 0 -2px 0 #1c201980,0 8px 20px #22252226; }
#hero .hero-example-panel.material-panel :is(h2,.hero-example-value,.hero-example-row strong,.hero-example-slider-label output) { color:#e1e7dc; }
#hero .hero-example-panel.material-panel :is(p,small,.hero-example-row,.hero-example-timer,.hero-example-slider-label,.hero-example-status,.hero-example-badge) { color:#b8c5ac; }
#hero .hero-example-panel.material-panel .hero-example-rule { background:#828a7840; }
#hero .hero-example-panel.material-panel .hero-example-receipt { background:#2a3027;border-color:#6c785c4d;color:#c4cdbb;box-shadow:inset 0 1px 4px #171d1433; }
#hero .hero-example-panel.material-panel .hero-example-receipt b { color:#dce4d5; }
.opcity-info.is-selected { background:linear-gradient(150deg,#53584f,#30352d);border-color:#838a7660;box-shadow:inset 0 1px 0 #dce2d138,inset 0 -2px 0 #19201666,0 5px 10px #1c221a19;backdrop-filter:none; }
.opcity-info.is-selected :is(h3,.opcity-kicker) { color:#e2e7dd; }
.opcity-info.is-selected :is(p,.opcity-hint) { color:#b8c5ac; }
@media(hover:none) { .material-explore { min-height:34px; } }
@media(prefers-reduced-motion:reduce) {
  .material-stage,.material-portal,.material-volume,.material-explore,.material-card::after,.material-panel::after { transition:none!important; }
  .material-volume { mask-image:none; }
  .material-stage.is-open .material-volume { transform:none; }
  :is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy) { transition:none;transform:var(--surface-placement,none); }
  :is(.faithful-button,#hero .hero-example-button,.opcity-hotspot,.opcity-district-tab,.opcity-pause,.film-control,.hero-example-close,.material-controls button,.pages-pill,.pages-filter button,.pages-rate-switch button,.pages-flow-tabs button,.pages-code-block button,.docs-button,.console-page .button,.widget-copy):is(:hover,:focus-visible,.is-surface-hover,:active,.is-surface-pressed) { transform:var(--surface-placement,none); }
  .opcity-hotspot { transform:translate(-50%,-50%); }
}

/* Six capability previews: one crisp, front-facing housing per illustration. */
#features .material-card {
  box-shadow:inset 0 1px 0 #efefef9c,inset 1px 0 0 #bbbbbb73,
    inset -1px 0 0 #181818a6,inset 0 -5px 0 #181818a1,
    0 9px 15px -12px #13131375;
}
#features .material-card::before {
  border-color:#181818;
  background:
    repeating-linear-gradient(0deg,#ccff0003 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,#ccff0003 0 1px,transparent 1px 32px),
    radial-gradient(ellipse at 26% -10%,#acacac1c,transparent 58%),
    linear-gradient(160deg,#3a3a3a,#2c2c2c 80%,#323232);
  box-shadow:inset 0 2px 4px #12121273,inset 0 0 0 1px #bcbcbc12,0 1px 0 #d5d5d53d;
}
#features .material-card.material-card-interactive::after {
  border-color:#bdbdbd76;
  box-shadow:inset 0 1px 0 #f2f2f27a,inset 0 0 0 3px #adadad2b,
    inset 0 0 0 4px #12121280,inset 0 -1px 0 #0909098c;
}
#features .material-card.material-card-interactive:is(:hover,:focus-within)::after {
  border-color:#c4c4c498;
  box-shadow:inset 0 1px 0 #f2f2f28f,inset 0 0 0 3px #b2b2b234,
    inset 0 0 0 4px #12121280,inset 0 0 26px #ccff0007;
}
/* Hover is light only. The scripted text, scans and state changes retain their clocks. */
#features .offpeak-scene .scene-hover-plane { transform:none!important;transition:none; }
#features .material-card :is(.model-sheet-back,.model-sheet-middle) { display:none!important; }
#features .material-card :is(.model-sheet-front,.endpoint-card,.availability-tile,.meter-card,.signature-sheet) {
  border-color:#a6a6a699;
  border-radius:12px;
  background-color:#383838;
  background-image:
    linear-gradient(135deg,#efefef13,transparent 31%),
    repeating-linear-gradient(0deg,#ccff0003 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,#ccff0003 0 1px,transparent 1px 32px),
    linear-gradient(155deg,#5a5a5a,#393939 56%,#2c2c2c);
  box-shadow:inset 0 1px 0 #f3f3f3b8,inset 1px 0 0 #c2c2c285,
    inset -1px 0 0 #121212cc,inset 0 -1px 0 #101010cc,
    inset 0 0 0 3px #c3c3c35e,inset 0 0 0 4px #1717179c,
    inset 0 0 0 5px #d6d6d614,0 8px 12px -9px #12121285;
}
#features .material-card .quote-document::before {
  border-color:#a6a6a699;border-radius:12px;
  background:
    linear-gradient(135deg,#efefef13,transparent 31%),
    repeating-linear-gradient(0deg,#ccff0003 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,#ccff0003 0 1px,transparent 1px 32px),
    linear-gradient(155deg,#5a5a5a,#393939 56%,#2c2c2c);
  box-shadow:inset 0 1px 0 #f3f3f3b8,inset 1px 0 0 #c2c2c285,
    inset -1px 0 0 #121212cc,inset 0 -1px 0 #101010cc,
    inset 0 0 0 3px #c3c3c35e,inset 0 0 0 4px #1717179c,
    inset 0 0 0 5px #d6d6d614,0 8px 12px -9px #12121285;
}
#features .material-card .model-paper-art {
  border:1px solid #a7a7a73b;border-radius:12px;
  background:linear-gradient(145deg,#b4b4b405,#1313131f);
  box-shadow:inset 0 1px 2px #11111126,inset 0 -1px 0 #bfbfbf12;
}
#features .material-card .model-reveal {
  border-color:#8282828a;background:#2d2d2dfa;backdrop-filter:none;
  box-shadow:inset 0 2px 5px #11111166,inset 0 0 0 1px #d9d9d91f,0 1px 0 #d1d1d129;
}
#features .material-card .quote-context {
  border-color:#a0a0a075;background:#3f3f3f;backdrop-filter:none;
  box-shadow:inset 0 1px 0 #dddddd42,inset 0 -2px 0 #18181873,0 3px 6px #14141426;
}
#features .material-card .signature-sheet { transform:none!important; }
#features .material-card :is(.model-paper-caption p,.signature-foot,.signature-sheet>small) { color:#b8b8b8; }
#features .material-card .signature-field>span:last-child { color:#d8d8d8; }

/* Feature-only invitation: a frosted hint and glare confined to the narrow bevel. */
#features .material-card>.material-explore {
  color:#ededed;border-color:#ffffff36;
  background:linear-gradient(145deg,#ffffff0e,#ffffff03),#303030a6;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 #ffffff26,0 2px 6px #1111112b;
  opacity:1;
  transition:opacity .32s var(--material-ease),color .32s var(--material-ease),border-color .32s var(--material-ease),box-shadow .32s var(--material-ease);
}
#features .material-hover-glass {
  position:absolute;inset:3px;z-index:11;pointer-events:none;
  padding:4px;border:1px solid #ffffff24;border-radius:inherit;
  opacity:0;background:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 #ffffff1a;
  transition:opacity .32s var(--material-ease);
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
  #features .material-hover-glass {
    background:linear-gradient(135deg,#ffffff1a,transparent 36% 65%,#ffffff0d);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
}
#features .material-card:is(:hover,:focus-within)>.material-hover-glass { opacity:1; }
@media(hover:hover) and (pointer:fine) {
  #features .material-card>.material-explore { opacity:0;pointer-events:none; }
  #features .material-card:is(:hover,:focus-within)>.material-explore { opacity:1;pointer-events:auto; }
}
#features .material-card[data-material-active="true"]>.material-hover-glass,
#features .material-card[data-material-active="true"]>.material-explore { opacity:0;pointer-events:none; }
@media(prefers-reduced-motion:reduce) {
  #features .material-hover-glass,#features .material-card>.material-explore { transition:none!important; }
}

/* Use-case cards share one height; copy length must not create a taller masonry item. */
#reviews .columns-1{display:grid;columns:auto;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--gallery-gap);align-items:stretch}
#reviews .columns-1>figure{min-width:0;margin:0;align-self:stretch;break-inside:auto}
@media(min-width:40rem){#reviews .columns-1{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){#reviews .columns-1{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone explainers inherit the exact source bounds, so wide work cards need the same room as their square siblings. */
@media(max-width:639px){
  #productivity .material-card:has(>.scene-frame:is([data-scene="scene-productivity-3"],[data-scene="scene-productivity-4"])) { aspect-ratio:1; }
}