/* My DEMEOS final responsive composition.
   The Customer Interface is the sizing reference: a simple concentric DEMEOS
   space with the official logo at its centre, followed by contained cards.
   Presentation only; behaviour, data, auth and DEMEOS rules are unchanged. */

@media (max-width:1100px) and (min-width:701px){
  .my-demeos-main{padding:1.6rem 1.1rem 3rem;overflow-x:hidden}
  .my-demeos-introduction,.my-demeos-future,.my-demeos-evidence{width:min(760px,96%);margin-left:auto;margin-right:auto}
  .my-demeos-introduction h1{font-size:clamp(2.55rem,5.8vw,3.5rem);line-height:1.03}
  .my-demeos-sign-in-status{width:100%;max-width:760px}

  /* Customer-style centre: circles + official logo only. Remove the old
     vertical capsule/text treatment by making the centre a circular logo hub. */
  .my-demeos-areas{display:grid;position:relative;width:100%;min-height:0;margin-top:.75rem;padding:330px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:.8rem}
  .my-demeos-areas:after{position:absolute;left:50%;top:145px;width:min(620px,70vw);height:285px;border:1px solid rgba(223,174,48,.62);border-radius:50%;background:radial-gradient(circle at center,rgba(20,90,190,.18) 0 26%,transparent 27% 100%);box-shadow:0 0 0 42px rgba(45,132,255,.035),0 0 0 43px rgba(78,151,244,.12);transform:translate(-50%,-50%);z-index:0;pointer-events:none}
  .my-demeos-areas:before{content:"";position:absolute;left:50%;top:145px;bottom:auto;width:180px;height:180px;padding:0;border:1px solid rgba(223,174,48,.78);border-radius:50%;background:#04162c url("../images/demeos-logo.png") center/112px auto no-repeat;box-shadow:0 0 0 12px rgba(231,181,50,.05),0 0 0 42px rgba(24,112,235,.045),0 0 70px rgba(37,126,247,.30);font-size:0;line-height:0;transform:translate(-50%,-50%);z-index:2}

  /* Same contained rhythm as the Customer page: equal columns, equal active
     card heights, no card or text enters the centre space. */
  .my-demeos-area:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;min-width:0;min-height:150px;margin:0;padding:1rem;transform:none;grid-row:auto;z-index:3}
  .my-demeos-area:nth-child(1){grid-column:1}.my-demeos-area:nth-child(2){grid-column:2}.my-demeos-area:nth-child(3){grid-column:1}.my-demeos-area:nth-child(4){grid-column:2}.my-demeos-area:nth-child(5){grid-column:1 / -1;justify-self:stretch;min-height:120px}
  .my-demeos-area-active:hover,.my-demeos-area-active:focus-visible{transform:translateY(-2px)}
  .my-demeos-area-title{font-size:1.2rem;line-height:1.15}.my-demeos-area-copy{font-size:.86rem;line-height:1.42}.my-demeos-area-status{font-size:.6rem;line-height:1.35}.my-demeos-area-enter{position:static;display:flex;margin-top:.65rem;padding-top:.55rem;font-size:.68rem;line-height:1.25}
  .my-demeos-evidence{margin-top:1.5rem}
}

@media (max-width:700px){
  .my-demeos-main{padding:1.4rem .75rem 2.5rem;overflow-x:hidden}
  .my-demeos-introduction,.my-demeos-future,.my-demeos-evidence{width:100%;max-width:100%;margin-left:auto;margin-right:auto}
  .my-demeos-introduction h1{font-size:2.65rem;line-height:1.03}
  .my-demeos-sign-in-status{width:100%;margin-top:1rem;padding:1rem}
  .my-demeos-future{margin-top:1rem}

  .my-demeos-areas{display:grid;position:relative;width:100%;min-height:0;margin-top:.5rem;padding:285px 0 0;grid-template-columns:1fr;grid-template-rows:auto;gap:.7rem}
  .my-demeos-areas:after{position:absolute;left:50%;top:125px;width:275px;height:250px;border:1px solid rgba(223,174,48,.62);border-radius:50%;background:radial-gradient(circle at center,rgba(20,90,190,.18) 0 26%,transparent 27% 100%);box-shadow:0 0 0 22px rgba(45,132,255,.035),0 0 0 23px rgba(78,151,244,.12);transform:translate(-50%,-50%);z-index:0;pointer-events:none}
  .my-demeos-areas:before{content:"";position:absolute;left:50%;top:125px;bottom:auto;width:128px;height:128px;padding:0;border:1px solid rgba(223,174,48,.78);border-radius:50%;background:#04162c url("../images/demeos-logo.png") center/80px auto no-repeat;box-shadow:0 0 0 10px rgba(231,181,50,.05),0 0 0 24px rgba(24,112,235,.045),0 0 48px rgba(37,126,247,.28);font-size:0;line-height:0;transform:translate(-50%,-50%);z-index:2}
  .my-demeos-area:nth-child(n){position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;min-width:0;min-height:128px;margin:0;padding:1rem;transform:none;grid-column:1;grid-row:auto;z-index:3}
  .my-demeos-area-active:hover,.my-demeos-area-active:focus-visible{transform:translateY(-2px)}
  .my-demeos-area-title{font-size:1.12rem;line-height:1.15}.my-demeos-area-copy{font-size:.82rem;line-height:1.4}.my-demeos-area-status{font-size:.56rem;line-height:1.35}.my-demeos-area-enter{position:static;display:flex;margin-top:.65rem;font-size:.72rem}
  .my-demeos-evidence{margin-top:1.4rem}
}