/* The original six phone plates, isolated from the studio design system. */
.product-layers{--acc:#b6f5c6;--acc2:#d5f8de;--warm:#dfc58b;--ink2:#b0bfb5;--ink3:#849e8e;--line2:#b6f5c642;background:#0c120e;border-top:1px solid var(--line);overflow:hidden}
.product-layers .section-heading{margin-bottom:36px}
.pl-exhibit{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(0,1.3fr);border:1px solid var(--line);border-radius:10px;background:#0f1812;overflow:hidden}
.pl-copy{padding:35px 30px;position:relative;z-index:2}
.pl-kicker{font-size:8px;color:#9bb2a3;margin-bottom:24px}
.pl-options{display:grid;border-top:1px solid var(--line)}
.pl-options button{background:transparent;border-bottom:1px solid var(--line);padding:14px 0;display:flex;align-items:center;gap:17px;font-size:13px;text-align:left;color:#9eb0a4;transition:color .25s,background .25s,padding .25s}
.pl-options button>span{font:9px var(--mono);color:#668472}
.pl-options svg{width:14px;height:14px;margin-left:auto;opacity:.35}
.pl-options button:hover,.pl-options button[aria-pressed=true]{color:var(--mint);padding-inline:9px;background:#b6f5c608}
.pl-options button[aria-pressed=true]>span,.pl-options button[aria-pressed=true] svg{color:var(--mint);opacity:1}
.pl-info{margin-top:26px;min-height:153px}
.pl-info .eyebrow{font-size:7px;color:#86a390;margin-bottom:12px}
.pl-info h3{font-size:23px;line-height:1.16;letter-spacing:-.035em;margin-bottom:12px}
.pl-info p{font-size:12px;line-height:1.85;color:#a0b3a6}
.pl-back{display:flex;align-items:center;gap:15px;background:none;color:var(--mint);font-size:10px;padding:12px 0 0}
.pl-visual{position:relative;background:radial-gradient(ellipse at 54% 44%,#244c323f,transparent 70%),#0b140e;border-left:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.pl-visual-top{position:absolute;top:24px;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:2;pointer-events:none}
.pl-visual-top .eyebrow{font-size:7px;color:#9cb2a3;gap:8px}
.pl-preview-label{font:6px var(--mono);letter-spacing:.06em;color:#708c79}
.pl-scene{position:relative;min-height:550px;flex:1;perspective:1500px;perspective-origin:50% 46%;touch-action:pan-y;cursor:grab;user-select:none}
.pl-scene.dragging{cursor:grabbing}
.pl-scene-grid{position:absolute;inset:40px 0;background-image:linear-gradient(#b6f5c607 1px,transparent 1px),linear-gradient(90deg,#b6f5c607 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse,#000,transparent 70%);pointer-events:none}
.pl-rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(32deg) rotateZ(-8deg) scale3d(.65,.65,.65)}
.pl-layer{position:absolute;width:302px;height:552px;margin:-276px 0 0 -151px;border-radius:34px;transform-style:preserve-3d;box-shadow:0 35px 70px -40px #000;cursor:pointer;transition:opacity .45s}
.pl-layer .pl-plate{position:absolute;inset:0;border-radius:34px;border:1px solid var(--line2);overflow:hidden;backdrop-filter:blur(6px)}
.pl-layer .pl-edge{position:absolute;inset:0;border-radius:34px;pointer-events:none;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #0006}
.pl-layer:hover .pl-edge{box-shadow:inset 0 0 0 1px var(--mint),0 0 35px #b6f5c62b}
.pl-tagpin{position:absolute;right:-12px;top:20px;width:26px;height:26px;border:1px solid #c4f8d281;border-radius:7px;background:#183723;color:var(--mint);display:grid;place-items:center;font:10px var(--mono)}
.pl-layer[data-i="5"]{transform:translate3d(-225px,20px,-212px)}
.pl-layer[data-i="4"]{transform:translate3d(-135px,12px,-127px)}
.pl-layer[data-i="3"]{transform:translate3d(-45px,4px,-42px)}
.pl-layer[data-i="2"]{transform:translate3d(45px,-4px,42px)}
.pl-layer[data-i="1"]{transform:translate3d(135px,-12px,127px)}
.pl-layer[data-i="0"]{transform:translate3d(225px,-20px,212px);opacity:.42}
.pl-sc{display:block;font:650 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.pl-toolbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 27px;padding-top:15px;border-top:1px solid var(--line)}
.pl-view-buttons{display:flex;gap:4px;border:1px solid var(--line);border-radius:5px;padding:3px}
.pl-view-buttons button{font-size:10px;background:none;color:#92ab9b;padding:8px 13px;border-radius:3px}
.pl-view-buttons button[aria-pressed=true]{background:var(--mint);color:#183b24}
.pl-reset{background:none;color:#95ae9e;font-size:10px;display:flex;gap:10px;align-items:center;padding:10px 0}
.pl-reset span{font-size:17px;color:var(--mint)}
.pl-instructions{font:7px/1.8 var(--mono);color:#799885;text-align:center;margin:16px 20px 21px}
.pl-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px}
.pl-bottom>span{font:7px var(--mono);letter-spacing:.08em;color:#73907e}
.pl-bottom .text-link{font-size:10px;color:var(--mint)}
.pl-noscript{font-size:12px;line-height:1.8;color:#9fb5a7;margin-top:20px}
.product-layers:not(.pl-ready) .pl-options{display:none}
.product-layers:not(.pl-ready) .pl-instructions{display:none}
@media(max-width:1150px){.pl-copy{padding:30px 23px}.pl-rig{transform:rotateX(8deg) rotateY(32deg) rotateZ(-8deg) scale3d(.56,.56,.56)}.pl-scene{min-height:535px}.pl-visual-top{left:20px;right:20px}.pl-preview-label{font-size:5px}.pl-toolbar{margin-inline:20px}}
@media(max-width:900px){.pl-exhibit{grid-template-columns:minmax(255px,.9fr) minmax(0,1fr)}.pl-copy{padding:28px 20px}.pl-options button{font-size:12px;gap:12px}.pl-kicker{font-size:6px}.pl-info h3{font-size:21px}.pl-rig{transform:rotateX(8deg) rotateY(32deg) rotateZ(-8deg) scale3d(.40,.40,.40)}.pl-preview-label{display:none}.pl-toolbar{gap:9px;flex-wrap:wrap}.pl-instructions{font-size:6px;margin-inline:17px}.pl-view-buttons button{padding-inline:9px;font-size:9px}.pl-reset{font-size:9px}}
@media(max-width:650px){.pl-exhibit{display:flex;flex-direction:column}.pl-visual{order:-1;border-left:0;border-bottom:1px solid var(--line)}.pl-scene{min-height:0;height:410px;flex:none}.pl-rig{transform:rotateX(8deg) rotateY(32deg) rotateZ(-8deg) scale3d(.32,.32,.32)}.pl-visual-top{top:20px}.pl-preview-label{display:block;font-size:5px}.pl-visual-top .eyebrow{font-size:6px}.pl-toolbar{margin-inline:20px;flex-wrap:nowrap}.pl-view-buttons button{font-size:10px;padding-inline:12px}.pl-copy{padding:27px 22px}.pl-kicker{font-size:7px;margin-bottom:20px}.pl-options{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:17px}.pl-options button{gap:9px;font-size:10px;min-height:48px}.pl-options button>span{font-size:8px}.pl-options button:hover,.pl-options button[aria-pressed=true]{padding-inline:3px}.pl-options svg{width:11px;height:11px}.pl-info{min-height:142px;margin-top:24px}.pl-info h3{font-size:24px}.pl-info p{font-size:12px}.pl-bottom{align-items:flex-start;flex-direction:column;gap:13px}.pl-bottom>span{font-size:6px}.pl-bottom .text-link{font-size:10px}}
@media(max-width:360px){.pl-scene{height:365px}.pl-rig{transform:rotateX(8deg) rotateY(32deg) rotateZ(-8deg) scale3d(.27,.27,.27)}.pl-copy{padding-inline:17px}.pl-options{column-gap:11px}.pl-options button{font-size:9px;gap:6px}.pl-toolbar{margin-inline:15px}.pl-preview-label{display:none}.pl-view-buttons button{padding:7px 9px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.product-layers *{animation:none!important;transition:none!important}}


  .pl-l-glass .pl-plate{background:linear-gradient(150deg,rgba(210,250,222,.15),rgba(130,190,150,.04) 46%,
      rgba(255,255,255,.10));border-color:rgba(210,250,220,.45)}
  .pl-l-glass .pl-sheen{position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 46%,transparent 60%);
    transform:translateX(-30%);animation:pl-sweep 7s var(--ease) infinite}
  @keyframes pl-sweep{50%{transform:translateX(30%)}}
  .pl-l-glass .pl-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:110px;
    height:26px;border-radius:14px;background:rgba(6,10,16,.72)}

  /* layer 2 — interface */
  .pl-l-ui .pl-plate{background:linear-gradient(178deg,#172d20,#122619);padding:40px 16px 16px;
    border-color:rgba(182,245,198,.34)}
  .pl-l-ui .pl-k{font:650 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
  .pl-l-ui h4{margin:11px 0 16px;font-size:23px;letter-spacing:-.04em}
  .pl-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;
    background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02))}
  .pl-card .pl-kk{font:650 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
  .pl-card .pl-vv{font-size:27px;font-weight:750;letter-spacing:-.045em;margin-top:7px}
  .pl-card .pl-vv u{text-decoration:none;font-size:11.5px;color:var(--acc2);margin-left:9px}
  .pl-bars{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:13px}
  .pl-bars i{flex:1;border-radius:5px;background:linear-gradient(180deg,var(--acc),rgba(182,245,198,.2))}
  .pl-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;
    padding:11px 12px;margin-bottom:9px;background:rgba(255,255,255,.045)}
  .pl-row .pl-i{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
    background:rgba(182,245,198,.18);color:var(--acc2)}
  .pl-row .pl-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .pl-row b{display:block;font-size:12px}.pl-row small{font-size:10.5px;color:var(--ink3)}
  .pl-row .pl-r{margin-left:auto;font:650 11px var(--mono);color:var(--ink2)}

  /* layer 3 — design system */
  .pl-l-ds .pl-plate{background:linear-gradient(178deg,#192d20,#112117);padding:30px 18px;
    border-color:rgba(213,248,222,.28)}
  .pl-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
  .pl-swatches i{height:34px;border-radius:9px}
  .pl-comp{border:1px dashed var(--line2);border-radius:12px;padding:11px;margin-bottom:10px;
    display:flex;align-items:center;gap:9px}
  .pl-comp .pl-b1{height:26px;border-radius:8px;background:var(--acc);width:78px}
  .pl-comp .pl-b2{height:26px;border-radius:8px;border:1px solid var(--line2);width:64px}
  .pl-comp .pl-b3{height:10px;border-radius:5px;background:var(--line2);flex:1}
  .pl-typeline{display:block;height:8px;border-radius:4px;background:rgba(238,242,248,.16);margin-bottom:9px}

  /* layer 4 — api */
  .pl-l-api .pl-plate{background:linear-gradient(178deg,#14281c,#0c1d12);padding:30px 16px;
    font-family:var(--mono);border-color:rgba(182,245,198,.3)}
  .pl-ep{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
    padding:10px 11px;margin-bottom:8px;font-size:11px;color:var(--ink2)}
  .pl-ep .pl-m{font-weight:700;font-size:9.5px;letter-spacing:.1em;padding:4px 6px;border-radius:5px}
  .pl-ep .pl-m.pl-get{background:rgba(182,245,198,.2);color:var(--acc2)}
  .pl-ep .pl-m.pl-post{background:rgba(255,180,92,.2);color:var(--warm)}
  .pl-ep .pl-ms{margin-left:auto;color:var(--ink3)}

  /* layer 5 — data */
  .pl-l-db .pl-plate{background:linear-gradient(178deg,#242b1b,#171e13);padding:30px 16px;
    border-color:rgba(255,180,92,.24)}
  .pl-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
  .pl-tbl div{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);
    font:11px/1 var(--mono);color:var(--ink2)}
  .pl-tbl div:last-child{border-bottom:0}
  .pl-tbl div span:last-child{margin-left:auto;color:var(--ink3)}
  .pl-tbl .pl-hd{background:rgba(255,255,255,.045);color:var(--ink3);letter-spacing:.14em;
    text-transform:uppercase;font-size:9px}
  .pl-cyl{height:74px;border:1px solid var(--line2);border-radius:50%/22px;position:relative;
    background:linear-gradient(180deg,rgba(182,245,198,.14),rgba(182,245,198,.03))}
  .pl-cyl::after{content:"";position:absolute;left:0;right:0;top:0;height:22px;border-radius:50%;
    border:1px solid var(--line2)}

  /* layer 6 — cloud */
  .pl-l-cloud .pl-plate{background:linear-gradient(178deg,#112d23,#0b2119);padding:30px 16px;
    border-color:rgba(110,231,168,.26)}
  .pl-nodes{position:relative;height:150px;margin-bottom:14px}
  .pl-nodes i{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--acc);
    box-shadow:0 0 0 5px rgba(182,245,198,.14);animation:pl-ping 2.8s var(--ease) infinite}
  @keyframes pl-ping{50%{box-shadow:0 0 0 13px rgba(182,245,198,0)}}
  .pl-nodes s{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);
    text-decoration:none}
  .pl-stat{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
    padding:11px 12px;margin-bottom:9px;font-size:11.5px}
  .pl-stat .pl-d{width:8px;height:8px;border-radius:50%;background:#6ee7a8;flex:none;
    box-shadow:0 0 10px 1px rgba(110,231,168,.7)}
  .pl-stat .pl-r{margin-left:auto;font:650 11px var(--mono);color:var(--ink3)}

  
.pl-swatches i{display:block;width:auto;margin:0;border:0}.pl-l-ui h4{font-weight:700}.pl-row b{font-weight:650}