/* ============================================================
   Cloud Storage - page-only layout. Figma frame 6157:2138
   (Ezee-VPN-Website, "Final Website UI").
   ============================================================ */

/* ---------- 01 Coming soon (6166:2673) - 700px tall, content centred ---------- */
.cs-soon{display:flex;align-items:center;min-height:700px;padding-block:var(--space-9);background:var(--surface)}
.cs-soon__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}

.cs-status{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) 20px; /* 20px horizontal padding is a raw Figma value */
  border-radius:var(--radius-pill);background:var(--warning-50);
  color:var(--warning-700);font-size:16px;line-height:24px;font-weight:500;
}
.cs-status__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}
.cs-status__icon img{width:auto;height:auto}

/* Figma text box is 813 x 77 with the 62px line centred in it */
.cs-soon__title{display:flex;align-items:center;justify-content:center;max-width:813px;min-height:77px}
.cs-soon__lead{max-width:620px;color:var(--gray-600)}

/* Notify form / Default (6166:2682) */
.notify{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding-top:var(--space-5)}
.notify__label{font-size:16px;line-height:24px;font-weight:500;color:var(--gray-900)}
.notify__row{display:flex;align-items:center;gap:var(--space-3)}
.notify__input{
  width:360px;line-height:26px;
  border-color:#b9bdc7; /* raw value in Figma (equals border-strong) */
  border-radius:12px;   /* raw value in Figma */
}
.notify__input::placeholder{color:var(--gray-500)}
.notify__note{font-size:12px;line-height:16px;color:var(--gray-500)}

/* ---------- 03 Ready for you now (6167:2684) ---------- */
.cs-ready__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.cs-ready__body{max-width:700px;color:var(--gray-600)}
.cs-products{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-top:40px} /* 40px gap is a raw Figma value */

/* Web/Product Row (6091:1008) */
.product-row{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-3);border-top:1px solid var(--gray-50)}
.product-row .icon-tile{border-radius:var(--radius-md)}
.product-row__text{display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-width:0}
.product-row__desc{color:var(--text-secondary)}
.product-row__link{display:flex;padding-top:var(--space-1)}
/* 16px icon box with the 5.5 x 9.5 chevron centred, as in Figma */

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .cs-products{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cs-soon{min-height:0;padding-block:var(--section-y)}
  .cs-soon__title{min-height:0}
  .notify{align-self:stretch}
  .notify__row{flex-direction:column;align-items:stretch;width:100%}
  .notify__input{width:100%}
  .notify__row .btn{width:100%}
}