/* Doorway's physical interface: ivory faces, brass edges and purposeful depth.
   Scene animation lives separately; hero headline coordinates remain untouched. */
:root{
  --depth-ivory:#fffaf0;
  --depth-edge:#d5c4a7;
  --depth-edge-dark:#b7a17e;
  --depth-sage:#6c8971;
  --depth-brass:#aa8a56;
  --depth-ease:cubic-bezier(.2,.72,.18,1);
}

/* The fixed navigation is a shallow, continuous shelf. */
.site-header.wrap{
  background:linear-gradient(180deg,#f5eee1f5,#eee6d8eb);
  border-bottom-color:#cbbda24d;
  box-shadow:inset 0 -1px 0 #fff8,0 3px 0 #d8cbb63b,0 12px 30px #53432906;
}
.brand-mark{box-shadow:2px 1px 0 #aa987b50;perspective:90px}
.brand-mark:before{transition:transform .55s var(--depth-ease),box-shadow .55s var(--depth-ease);box-shadow:2px 1px 0 #675c4b40}
.brand:hover .brand-mark:before,.brand:focus-visible .brand-mark:before{transform:perspective(40px) rotateY(-58deg);box-shadow:3px 1px 0 #675c4b33}
.desktop-nav a{position:relative;border-radius:7px;padding:8px 10px;margin-inline:-10px;transition:background .22s,box-shadow .22s,color .22s}
.desktop-nav a:hover,.desktop-nav a:focus-visible{background:#fff7;box-shadow:inset 0 1px 1px #fff,0 2px 0 #c3b59a55,0 5px 9px #4c3c2010}

/* Pressable controls communicate that a choice has been made. */
.button{
  position:relative;
  background:linear-gradient(165deg,#36352f,#1c1c18 75%);
  border-color:#272820;
  border-top-color:#56574b;
  box-shadow:inset 0 1px 0 #ffffff0f,0 3px 0 #121610,0 7px 12px #332b1917;
  transition:transform .22s var(--depth-ease),box-shadow .22s var(--depth-ease),background .22s;
}
.button:hover{
  background:linear-gradient(165deg,#44443a,#2b2c24 75%);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #ffffff17,0 5px 0 #171b13,0 10px 18px #332b1920;
}
.button:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 3px #0002,0 1px 0 #121610,0 2px 4px #332b1915;
}
.button-ivory{background:linear-gradient(160deg,#fffdf6,#e8dfcc);border-color:#e4d8c1;border-top-color:#fff;box-shadow:inset 0 1px 0 #fff,0 4px 0 #a4977a,0 9px 16px #080b0a26}
.button-ivory:hover{background:linear-gradient(160deg,#fff,#f2e9d7);box-shadow:inset 0 1px 0 #fff,0 6px 0 #a4977a,0 12px 22px #080b0a2b}
.button-ivory:active{box-shadow:inset 0 1px 3px #806f4924,0 1px 0 #a4977a,0 3px 5px #080b0a20}
.button svg,.text-link svg{transition:transform .25s var(--depth-ease)}
.button:hover svg,.text-link:hover svg{transform:translateX(3px)}
.button:focus-visible,.text-link:focus-visible{outline:2px solid #526e53;outline-offset:6px}

/* Small labels are enamel plaques; data/live indicators are inset lamps. */
.section-kicker{color:#75664f;text-shadow:0 1px 0 #fff8}
.managed-heading h2,.section-heading h2,.privacy-intro h2,.examples-heading h2{text-shadow:0 1px 0 #fff9,0 2px 1px #7b65450b}
.status-dot,.cloud-proof-dot{background:radial-gradient(circle at 32% 28%,#c6dbb0 0,#7b9a71 35%,#506c4f 85%);box-shadow:0 1px 1px #fff8,inset 0 1px 2px #30432d25,0 0 0 3px #7e986414}
.cloud-labels .cloud-scene-label{background:linear-gradient(155deg,#fffaf0f5,#eee4d3ef);box-shadow:inset 0 1px 0 #fff,0 2px 0 #bbaa8a52,0 5px 12px #5545260c}
.cloud-labels .cloud-scene-label--app{background:linear-gradient(155deg,#f7faeff5,#e3ead8ef);box-shadow:inset 0 1px 0 #fff,0 2px 0 #9cac8e52,0 5px 12px #354c2b0c}
.cloud-agent{background:linear-gradient(150deg,#fffaf0ee,#f1e8d6d9);border-color:#fff9;box-shadow:inset 0 1px 0 #fff,0 4px 0 #cbbd9c4d,0 12px 24px #4d3b1c09}
.cloud-chapters a[aria-current]:after{height:2px;box-shadow:0 1px 0 #fffb,0 -1px 0 #51664522}
.cloud-footer{box-shadow:inset 0 1px 0 #fff5}
.cloud-privacy-row{border-block-color:#c7b99d42;box-shadow:inset 0 1px 0 #fff7,inset 0 -1px 0 #fff5}
.cloud-privacy-row button{border:1px solid #fff8;border-radius:12px;padding:13px 18px;background:linear-gradient(155deg,#fbf8eeaa,#e9e4d5aa);box-shadow:inset 0 1px 0 #fff8,0 3px 0 #c6b99b40,0 9px 16px #4d3b1c06;transition:transform .25s var(--depth-ease),box-shadow .25s}
.cloud-privacy-row button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff8,0 5px 0 #c6b99b40,0 13px 20px #4d3b1c0a}
.cloud-privacy-row button:active{transform:translateY(1px)}
.cloud-privacy-row button>svg:first-child{filter:drop-shadow(1px 2px 0 #97876525)}

/* The service controls sit in individual sockets. Selecting one lifts that
   component out of its socket, matching the selected object in the 3D scene. */
.managed-grid{gap:16px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;perspective:1100px}
.managed-grid article{
  border:1px solid #fff9!important;
  border-radius:17px;
  background:linear-gradient(145deg,#fbf6eb,#eae2d1);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #d8c9ad,0 4px 0 #c8b795,0 7px 0 #b9a98955,0 14px 24px #5c46280c;
  transform-style:preserve-3d;
  transition:transform .45s var(--depth-ease),background .4s,box-shadow .4s;
  isolation:isolate;
}
.managed-grid article::before{content:'';position:absolute;inset:6px;border:1px solid #fff5;border-radius:12px;pointer-events:none}
.managed-grid article:hover,.managed-grid article:focus-visible,.managed-grid article:focus-within,
.managed-grid article[data-active="true"],.managed-grid article[aria-selected="true"],.managed-grid article[aria-pressed="true"]{
  transform:translateY(-5px) translateZ(8px);
  background:linear-gradient(145deg,#fffbf1,#edf0df);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #d2d5b8,0 5px 0 #bdc3a0,0 8px 0 #a8b18b66,0 20px 28px #42503914;
}
.managed-grid article:active{transform:translateY(-1px) translateZ(3px)}
.managed-icon{width:38px;height:38px;border:1px solid #fff9;border-radius:10px;background:linear-gradient(145deg,#fffdf5,#e7dbc1);box-shadow:inset 0 1px 0 #fff,2px 3px 0 #bbaa8b60,4px 7px 10px #64503010;color:#806b49;transform:translateZ(13px);transition:transform .45s var(--depth-ease),background .35s}
.managed-icon svg{filter:drop-shadow(0 1px 0 #fff)}
.managed-grid article:hover .managed-icon,.managed-grid article[data-active="true"] .managed-icon,.managed-grid article[aria-pressed="true"] .managed-icon{transform:translateZ(22px) translateY(-2px);background:linear-gradient(145deg,#f4f8e9,#d9e1c6);color:#506d50}
.managed-takeaway{margin-top:12px;border-top:1px solid #b9aa8d35;box-shadow:inset 0 1px 0 #fff5}

/* Privacy statements are layered protective panels, with a solid perimeter.
   Focus raises a panel without changing the reading order or text position. */
.privacy-list{perspective:1100px;display:flex;flex-direction:column;gap:17px}
.privacy-list article{
  position:relative;
  border:1px solid #faf9ee!important;
  border-radius:16px;
  padding:24px;
  background:linear-gradient(145deg,#f7f4e9,#e6e5d7);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #bec5aa70,0 6px 0 #b2baa04d,0 15px 27px #34402e08;
  transform-style:preserve-3d;
  transition:transform .45s var(--depth-ease),background .35s,box-shadow .4s;
}
.privacy-list article::before{content:'';position:absolute;inset:7px;border:1px solid #fff5;border-radius:10px;pointer-events:none}
.privacy-list article:hover,.privacy-list article:focus-visible,.privacy-list article:focus-within,
.privacy-list article[data-active="true"],.privacy-list article[aria-selected="true"],.privacy-list article[aria-pressed="true"]{
  transform:translateZ(9px) translateY(-3px);
  background:linear-gradient(145deg,#fbfcf0,#e1e8d5);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #bec5aa,0 7px 0 #aab69870,0 20px 30px #34402e10;
}
.feature-icon{display:grid;place-items:center;flex:none;width:34px;height:36px;background:linear-gradient(145deg,#f8fbee,#d5dfc4);border:1px solid #fff9;border-radius:9px;color:#5a7455;box-shadow:inset 0 1px 0 #fff,2px 3px 0 #a3b18b66,4px 7px 10px #4653380c;transform:translateZ(12px)}
.feature-icon svg{height:20px;width:20px}
.feature-index{color:#8b9478;text-shadow:0 1px 0 #fff}
.privacy-seal{filter:drop-shadow(3px 6px 0 #b4b49628)}

/* Choice chips use the same shallow depth as the cloud's object labels. */
.everyday-benefits>span{padding:9px 12px;border:1px solid #fff9;border-radius:9px;background:linear-gradient(155deg,#fcf8edb3,#e5e3d3a8);box-shadow:inset 0 1px 0 #fff8,0 3px 0 #bdbea35c,0 8px 12px #5a532806}
.everyday-benefits svg{color:#647554;filter:drop-shadow(0 1px 0 #fff9)}
.update-note{padding:14px 17px;border:1px solid #fff8;border-radius:10px;background:linear-gradient(145deg,#fff9ef8c,#e9e5d68c);box-shadow:inset 0 1px 0 #fffa,0 3px 0 #c5bea34d}

/* The signup panel arrives towards you, like a card passed through the door.
   Field wells and a depressed submit control reinforce the action. */
.dialog{border:1px solid #fffc;background:linear-gradient(135deg,#fff9ed,#eee5d3);box-shadow:inset 0 1px 0 #fff,0 4px 0 #d3c09b,0 8px 0 #ad96714d,0 32px 90px #29221750}
.dialog[open]{animation:doorway-dialog-enter .48s var(--depth-ease) both;transform-origin:50% 65%}
@keyframes doorway-dialog-enter{from{opacity:0;transform:perspective(1100px) translateY(24px) translateZ(-80px) rotateX(5deg)}to{opacity:1;transform:perspective(1100px) translateY(0) translateZ(0) rotateX(0)}}
.dialog-close{background:linear-gradient(145deg,#faf3e5,#dfd3bc);border-color:#fff9;box-shadow:inset 0 1px 0 #fff,0 2px 0 #bbaa8b,0 4px 7px #5b45230c;transition:transform .2s,box-shadow .2s}
.dialog-close:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 3px 0 #bbaa8b,0 6px 8px #5b452310}
.dialog-close:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #8e775126}
.dialog input,.dialog textarea{background:linear-gradient(170deg,#f5f0e4,#fffdf5);border-color:#cbbd9f;border-bottom-color:#fffc;box-shadow:inset 0 2px 4px #7b624615,0 1px 0 #fff;transition:background .2s,box-shadow .2s,border-color .2s}
.dialog input:focus,.dialog textarea:focus{background:#fffdf6;border-color:#93a17c;box-shadow:inset 0 1px 3px #57734712,0 0 0 3px #b6c79b2b}
.form-disclosure{background:linear-gradient(155deg,#efe7d7,#e5d9c3);border:1px solid #c7b89866;border-bottom-color:#fffb;box-shadow:inset 0 1px 3px #7b62460d,0 1px 0 #fff8}
.success-icon{background:radial-gradient(circle at 30% 20%,#eff4df,#c0d1ac);border:1px solid #faffec;box-shadow:inset 0 1px 0 #fff,0 3px 0 #9caf85,0 7px 14px #40552c12;transform:perspective(400px) rotateX(6deg)}
.security-points li{border:1px solid #fff7;border-radius:10px;background:#fff9ed52;padding:15px;margin-bottom:10px;box-shadow:0 2px 0 #bdaf9140}
.security-points svg{filter:drop-shadow(1px 2px 0 #a48d6530)}

/* A cast plinth gives the closing invitation and footer a physical ending. */
.closing-panel{background:linear-gradient(140deg,#33382d,#242820 72%);border-color:#5f624a;box-shadow:inset 0 1px 0 #ffffff16,0 5px 0 #181e15,0 11px 0 #88765020,0 28px 48px #3c301e1a}
.closing-panel:before{content:'';position:absolute;inset:10px;border:1px solid #ded0a00c;border-radius:16px;pointer-events:none}
.closing h2{text-shadow:0 2px 1px #0003}
.site-footer{position:relative;border-top:1px solid #c7b89b33;margin-top:24px;box-shadow:inset 0 1px 0 #fff6}
.site-footer>a:last-child{padding:8px 12px;border:1px solid #fff8;border-radius:8px;background:#f6efdf80;box-shadow:inset 0 1px 0 #fffc,0 2px 0 #baab8b4d;transition:transform .25s,box-shadow .25s}
.site-footer>a:last-child:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fffc,0 4px 0 #baab8b4d}
.preview-bar{background:linear-gradient(160deg,#fffcf3f5,#eee6d5ed);box-shadow:inset 0 1px 0 #fff,0 2px 0 #b5a98c45,0 6px 18px #44382112}

@media(max-width:800px){
  .managed-grid{gap:13px}
  .managed-icon{width:33px;height:34px}
  .privacy-list article{padding:22px 18px}
  .everyday-benefits{gap:12px}
  .everyday-benefits>span{padding:8px 10px}
}
@media(max-width:600px){
  .managed-grid{gap:14px}
  .managed-grid article{padding:23px 18px;column-gap:15px}
  .managed-icon{width:30px;height:31px;border-radius:8px}
  .managed-icon svg{width:19px;height:19px}
  .privacy-list{gap:15px}
  .privacy-list article{padding:23px 17px;gap:14px}
  .feature-icon{width:30px;height:32px;border-radius:8px}
  .feature-icon svg{height:18px;width:18px}
  .privacy-list h3{font-size:18px}
  .privacy-list p{font-size:12px}
  .cloud-privacy-row button{padding:12px;gap:9px}
  .everyday-benefits{max-width:350px;gap:10px}
  .everyday-benefits>span{font-size:9px;padding:7px 8px}
  .update-note{padding:12px 13px}
  .site-footer{margin-top:19px}
}
@media(hover:none){
  .managed-grid article:hover,.privacy-list article:hover{transform:none}
  .managed-grid article[data-active="true"],.managed-grid article[aria-selected="true"],.managed-grid article[aria-pressed="true"]{transform:translateY(-3px)}
  .privacy-list article[data-active="true"],.privacy-list article[aria-selected="true"],.privacy-list article[aria-pressed="true"]{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
  .dialog[open]{animation:none;transform:none}
  .managed-grid article,.privacy-list article,.managed-icon,.feature-icon,.success-icon{transform:none!important}
  .brand-mark:before,.button,.button svg,.text-link svg,.dialog-close,.cloud-privacy-row button,.site-footer>a:last-child{transition:none}
  .button:hover,.button:active,.dialog-close:hover,.dialog-close:active,.cloud-privacy-row button:hover,.cloud-privacy-row button:active,.site-footer>a:last-child:hover{transform:none}
  .brand:hover .brand-mark:before,.brand:focus-visible .brand-mark:before{transform:perspective(40px) rotateY(-30deg)}
}