/* The same material vocabulary as the product scenes, applied to the hero. */
.hero{background:var(--paper);color:var(--ink);min-height:0;padding-bottom:64px;overflow:hidden}
.hero__intro{height:214px}
.hero h1{color:var(--ink)}
.hero__meta,.hero .data-mark{color:#555a56}
.hero .data-mark::before{background:#627a22;border-radius:50%}
.hero .command{
  --muted:var(--demo-muted);--line:var(--demo-edge);--line-soft:rgba(242,239,232,.07);
  height:550px;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.61fr);
  gap:14px;background:transparent;border:0;color:var(--paper);perspective:1500px;
}
.hero .panel,.hero .owner{
  position:relative;background:var(--demo-surface);border:0;border-radius:var(--demo-radius);
  box-shadow:var(--demo-inset);isolation:isolate;min-width:0;
}
.hero .panel::before,.hero .owner::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,rgba(202,248,78,.065),transparent 70%);
}
.hero .panel__bar{padding:16px 18px;height:76px;border-bottom-color:var(--demo-edge)}
.hero .panel__title{font-size:12px}
.hero .panel:first-child .panel__bar{align-items:start;flex-direction:column;gap:9px;height:108px}
.hero .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px}
.hero .network{height:calc(100% - 108px);border-radius:0 0 16px 16px}
.hero .network-key{grid-template-columns:repeat(3,auto);gap:6px 10px;font-size:11px;right:18px;justify-content:start}
.hero .network-key span:not(:first-child){display:none}
.hero .node::before{background:var(--demo-raised);box-shadow:0 0 0 4px var(--demo-surface);border-color:var(--demo-muted)}
.hero .node:hover::before,.hero .node[aria-pressed="true"]::before{background:var(--signal);border-color:var(--signal)}
.hero .node--bad::before{border-color:var(--danger)}
.hero .detail{grid-template-rows:76px 214px minmax(0,1fr);overflow:hidden}
.hero .detail-toolbar{gap:12px;padding-block:12px}
.hero .segmented{height:44px;border:0;border-radius:8px;background:rgba(9,10,9,.3);box-shadow:var(--demo-inset);padding:3px}
.hero .segmented button{border:0;padding:0 12px;border-radius:6px;color:var(--demo-muted)}
.hero .segmented button[aria-pressed="true"]{background:var(--demo-raised);color:var(--signal);box-shadow:inset 0 1px 0 rgba(242,239,232,.1)}
.hero .chart{grid-template-columns:minmax(0,1fr) 115px;padding:18px;gap:16px}
.hero .chart__value{padding-left:14px}
.hero .chart__value strong{font-size:38px}
.hero .chart__value em,.hero .delta,.hero .alerts li b,.hero .kpi-context b,.hero .staff-caption b{color:#ffb2a7}
.hero .readout{padding:18px 14px}
.hero .readout h3{line-height:1.5;margin-bottom:12px}
.hero .alerts{gap:14px}
.hero .alerts li span{display:block}
.hero .alerts li b{display:block;margin-top:4px;font-size:11px}
.hero .kpi-context,.hero .staff-caption{flex-wrap:wrap;gap:3px 8px}
.hero .staff{gap:4px}
.hero .staff i{flex:1;max-width:11px;min-width:0}
.hero .owner{padding:18px 12px;perspective:1100px;overflow:hidden}
.hero .owner::after{content:"";position:absolute;left:18%;right:12%;bottom:32px;height:12px;background:rgba(0,0,0,.28);filter:blur(9px);border-radius:50%;z-index:-1}
.device-stage{--device-x:0deg;--device-y:0deg;position:relative;transform-style:preserve-3d;transform:rotateX(var(--device-y)) rotateY(var(--device-x))}
.hero .phone{width:202px;height:466px;border:0;background:linear-gradient(145deg,var(--demo-raised),#171d18);box-shadow:inset 0 1px 0 rgba(242,239,232,.3),inset 0 0 0 1px rgba(242,239,232,.17),8px 18px 32px -10px rgba(0,0,0,.65);transform:perspective(1100px) rotateY(-12deg) rotateZ(3deg);position:relative}
.hero .phone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,rgba(242,239,232,.07),transparent 35%);pointer-events:none}
.hero .phone__top{height:58px;padding-top:18px}
.hero .phone__value{font-size:32px}
.hero .phone__delta{color:#ffb2a7}
.hero .phone__row{padding-block:11px}
.hero .phone__list{margin-top:18px}
.hero .phone__pulse{height:30px}
.hero .phone__nav{margin-top:10px}
.hero .command__foot{height:auto;min-height:90px;grid-template-columns:246px minmax(0,1fr) auto;gap:24px;border:0;border-radius:16px;background:var(--demo-surface);color:var(--paper);box-shadow:var(--demo-inset);margin-top:14px;padding:18px 22px}
.hero .command__foot p{max-width:570px;letter-spacing:normal;font-size:14px;line-height:1.5}
.hero .method{grid-column:auto;min-height:44px;border-color:var(--demo-edge)}
.hero .cta{border-radius:8px;min-height:48px}
.hero .continuation{border-top:1px solid #cbc8c0;border-bottom:1px solid #cbc8c0;background:transparent;margin-top:32px;padding:20px 0;height:auto;min-height:96px;grid-template-columns:1.5fr repeat(4,1fr);gap:20px}
.hero .continuation strong{grid-column:auto;font-size:30px;max-width:180px}
.hero .continuation span:nth-of-type(n){grid-column:auto;font-size:12px;padding-left:20px}
@media(min-width:761px) and (max-width:1100px){
  .hero__intro{height:242px}
  .hero .command{height:auto;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:14px}
  .hero .command>.panel{min-height:550px}
  .hero .owner{grid-column:1/-1;min-height:502px}
  .hero .phone{width:224px}
  .hero .detail__lower{grid-template-columns:1.1fr 1fr .9fr}
  .hero .readout{padding-inline:12px}
  .hero .toolbar-controls{gap:10px}
  .hero .segmented button{padding-inline:10px}
  .hero .continuation{gap:16px}
}
@media(max-width:760px){
  .hero{padding-bottom:40px}
  .hero__intro{height:auto;padding:44px 0 28px}
  .hero .command{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .hero .panel__bar{height:auto;min-height:76px;padding:18px}
  .hero .panel:first-child .panel__bar{height:auto;min-height:108px}
  .hero .network{height:402px}
  .hero .detail{grid-template-rows:auto auto auto}
  .hero .detail-toolbar{align-items:stretch;gap:16px}
  .hero .chart{grid-template-columns:minmax(0,1fr);padding:18px}
  .hero .chart__value{padding:14px 0 0;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;border-left:0;border-top:1px solid var(--demo-edge)}
  .hero .chart__value strong{grid-column:2;grid-row:1/4;margin:0;font-size:44px}
  .hero .detail__lower{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none}
  .hero .detail__lower .readout{min-height:0;padding:20px 18px;border-right:0;border-bottom:1px solid var(--demo-edge);border-radius:0}
  .hero .detail__lower .readout:last-child{border-bottom:0}
  .hero .readout h3{font-size:12px}
  .hero .fact-table{font-size:12px}
  .hero .fact-table th,.hero .fact-table td{padding-block:9px}
  .hero .alerts li{font-size:12px}
  .hero .alerts li span{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .hero .alerts li b{margin-top:0;align-self:start}
  .hero .kpi-ring{margin-left:0}
  .hero .staff{max-width:210px}
  .hero .kpi-context,.hero .staff-caption{font-size:12px}
  .hero .owner{min-height:522px;padding:26px 20px}
  .hero .phone{width:228px;height:466px}
  .hero .command__foot{grid-template-columns:minmax(0,1fr);padding:20px;gap:16px;margin-top:16px}
  .hero .command__foot .cta{width:100%}
  .hero .command__foot p{font-size:15px}
  .hero .method{justify-self:start}
  .hero .continuation{grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
  .hero .continuation strong{grid-column:1/-1;max-width:230px}
  .hero .continuation span:nth-of-type(n){padding:12px 0 0;border-left:0;border-top:1px solid #cbc8c0}
}
@media(max-width:350px){
  .hero .legend{gap:8px;font-size:11px}
  .hero .network{height:382px}
  .hero .alerts li span{display:block}
  .hero .alerts li b{margin-top:4px}
  .hero .phone{width:210px}
}