.c4y-pcc {
  --c4y-pcc-accent: rgb(104,200,81);
  width:100%;
  font-family:Inter,sans-serif;
}
.c4y-pcc * { box-sizing:border-box; }
.c4y-pcc__layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:1.25rem; align-items:stretch; width:100%; }
.c4y-pcc__layout--single { grid-template-columns:minmax(0,1fr); }

.c4y-pcc__server {
  min-width:0; padding:1.5rem; border:1px solid rgb(228,231,236); border-radius:1rem;
  background:#fff; color:rgb(20,31,56); display:flex; flex-direction:column;
}
.c4y-pcc__server-title { margin:0 0 .5rem!important; color:rgb(20,31,56)!important; font-family:"Space Grotesk",sans-serif!important; font-size:1.25rem!important; line-height:1.75rem!important; font-weight:700!important; }
.c4y-pcc__server-price { display:flex; align-items:baseline; gap:.25rem; margin:0 0 1.5rem; }
.c4y-pcc__server-price strong { color:rgb(20,31,56); font-size:2.25rem; line-height:2.5rem; font-weight:700; }
.c4y-pcc__server-price span { color:rgb(107,114,128); font-size:1rem; line-height:1.5rem; }
.c4y-pcc__server-specs { display:grid; gap:.75rem; margin:0 0 1.5rem; }
.c4y-pcc__server-spec { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:0; }
.c4y-pcc__server-spec dt,.c4y-pcc__server-spec dd { margin:0; font-size:.875rem; line-height:1.25rem; }
.c4y-pcc__server-spec dt { color:rgb(107,114,128); font-weight:400; }
.c4y-pcc__server-spec dd { max-width:62%; color:rgb(20,31,56); font-weight:600; text-align:right; }
.c4y-pcc__server-button,.c4y-pcc__server-button:link,.c4y-pcc__server-button:visited {
  display:inline-flex!important; width:100%; min-height:2.5rem; margin-top:auto; padding:.5rem 1rem; align-items:center; justify-content:center;
  border:1px solid rgb(228,231,236); border-radius:.75rem; background:#fff; color:rgb(20,31,56)!important;
  font-size:.875rem!important; line-height:1.25rem!important; font-weight:500!important; text-decoration:none!important;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
.c4y-pcc__server-button:hover { background:var(--c4y-pcc-accent); color:#fff!important; }

.c4y-pcc__cloud {
  position:relative; overflow:hidden; min-width:0; padding:1.25rem 1.5rem 1.5rem; border:1px solid rgba(104,200,81,.2);
  border-radius:1rem; background:linear-gradient(135deg,hsl(227 42% 20%),hsl(227 42% 28%)); color:#fff;
  box-shadow:0 20px 25px -5px rgba(41,54,101,.1),0 8px 10px -6px rgba(41,54,101,.1);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.c4y-pcc__badge { display:inline-flex; margin:0 0 .75rem; padding:.25rem .75rem; border-radius:999px; background:var(--c4y-pcc-accent); color:#fff; font-size:.75rem; line-height:1rem; font-weight:600; }
.c4y-pcc__title-row { display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 0 .375rem; }
.c4y-pcc__icon { width:2rem; height:2rem; border-radius:.5rem; background:rgba(104,200,81,.2); color:var(--c4y-pcc-accent); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.c4y-pcc__icon svg { width:1rem; height:1rem; }
.c4y-pcc__title { margin:0!important; color:#fff!important; font-family:"Space Grotesk",sans-serif!important; font-size:1.5rem!important; line-height:2rem!important; font-weight:700!important; letter-spacing:-.025em; }
.c4y-pcc__desc { max-width:36rem; margin:0 auto 1rem!important; color:rgba(255,255,255,.7)!important; font-size:.875rem!important; line-height:1.25rem!important; }
.c4y-pcc__tech { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 0 1rem; }
.c4y-pcc__tech-item { padding:.375rem .75rem; border:1px solid rgba(255,255,255,.1); border-radius:.375rem; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); }
.c4y-pcc__tech-label { display:block; color:rgba(255,255,255,.6); font-size:.625rem; line-height:.875rem; letter-spacing:.05em; text-transform:uppercase; }
.c4y-pcc__tech-value { display:block; color:#fff; font-size:.875rem; line-height:1.25rem; font-weight:700; }
.c4y-pcc__tech-item:nth-child(2) .c4y-pcc__tech-value { color:var(--c4y-pcc-accent); }
.c4y-pcc__specs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; width:100%; max-width:42rem; margin:0 auto 1.25rem; }
.c4y-pcc__spec { min-width:0; padding:.5rem; border:1px solid rgba(255,255,255,.1); border-radius:.5rem; background:rgba(255,255,255,.05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.125rem; text-align:center; transition:background-color .3s ease,border-color .3s ease; }
.c4y-pcc__spec:hover { background:rgba(255,255,255,.1); border-color:rgba(104,200,81,.3); }
.c4y-pcc__spec-icon { display:inline-flex; margin-bottom:.125rem; color:var(--c4y-pcc-accent); }
.c4y-pcc__spec-icon svg { width:.75rem; height:.75rem; }
.c4y-pcc__spec-label { color:rgba(255,255,255,.5); font-size:.625rem; line-height:.875rem; }
.c4y-pcc__spec-value { max-width:100%; color:#fff; font-size:.75rem; line-height:1rem; font-weight:600; overflow-wrap:anywhere; }
.c4y-pcc__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:auto; }
.c4y-pcc__button,.c4y-pcc__button:link,.c4y-pcc__button:visited {
  display:inline-flex!important; min-height:2.25rem; padding:.5rem .75rem; align-items:center; justify-content:center; gap:.375rem;
  border-radius:.375rem; color:#fff!important; font-size:.75rem!important; line-height:1rem!important; font-weight:500!important; text-decoration:none!important;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
.c4y-pcc__button svg { width:.75rem; height:.75rem; }
.c4y-pcc__button--primary { border:1px solid var(--c4y-pcc-accent); background:var(--c4y-pcc-accent); box-shadow:0 10px 15px -3px rgba(104,200,81,.25); }
.c4y-pcc__button--primary:hover { background:rgba(104,200,81,.9); }
.c4y-pcc__button--secondary { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05); }
.c4y-pcc__button--secondary:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); color:#fff!important; }
.c4y-pcc__server-button:focus-visible,.c4y-pcc__button:focus-visible { outline:2px solid var(--c4y-pcc-accent); outline-offset:3px; }

@media(max-width:900px){
  .c4y-pcc__layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:639px){
  .c4y-pcc__server,.c4y-pcc__cloud{padding:1.25rem}
  .c4y-pcc__server-price{margin-bottom:1.5rem}
  .c4y-pcc__specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c4y-pcc__actions{width:100%;flex-direction:column}
  .c4y-pcc__button{width:100%}
}
@media(prefers-reduced-motion:reduce){.c4y-pcc__spec,.c4y-pcc__button,.c4y-pcc__server-button{transition:none}}

.c4y-pcc__footer { margin:1.4rem 0 0!important; text-align:center; color:rgb(107,114,128)!important; font-size:14px!important; line-height:20px!important; font-weight:400!important; }
.c4y-pcc__footer-link, .c4y-pcc__footer-link:link, .c4y-pcc__footer-link:visited { color:rgb(104,200,81)!important; text-decoration:none; font-weight:500; }
.c4y-pcc__footer-link:hover { text-decoration:underline; }