/* Hosting page (hosting.php): hero facts, the "which one?" guide, VPS comparison tables. Plan cards, FAQ and contact use sections.css. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hero: lowest prices in three tiles */
.host-hero .sec-head{margin-bottom:3rem}
.host-facts{display:grid;gap:1rem;margin:0}
.host-facts div{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--card)}
.host-facts dt{font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--fg-35)}
.host-facts dd{display:flex;align-items:baseline;gap:.5rem;margin:0;font:700 1.75rem/1 var(--display);letter-spacing:-.02em}
.host-facts .unit{margin-left:-.25rem;font:400 .9rem var(--body);letter-spacing:0;color:var(--fg-45)}
.host-facts .from{font:400 .65rem/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-35)}
@media (min-width:720px){.host-facts{grid-template-columns:repeat(3,1fr)}}

/* Which one? */
.guide-grid{display:grid;gap:1rem}
.guide{display:flex;flex-direction:column;padding:2rem}
.guide h3{margin-bottom:.75rem;font-size:1.3rem}
.guide p{margin:0 0 1.75rem;color:var(--fg-55);line-height:1.65}
.guide-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;font:500 .75rem/1 var(--mono);letter-spacing:.08em;color:var(--blue-hi)}
.guide:hover .guide-go{color:#fff}
.guide-unsure{margin-top:2rem;color:var(--fg-55)}
.guide-unsure a{border-bottom:1px solid var(--line-hi);transition:color .2s,border-color .2s}
.guide-unsure a:hover{color:#fff;border-color:var(--blue-hi)}
@media (min-width:900px){.guide-grid{grid-template-columns:repeat(3,1fr)}}

/* Mivo Cloud VPS: one table per family */
.vps-family{margin-top:3.5rem}
.vps-family:first-of-type{margin-top:0}
.vps-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin-bottom:1.25rem}
.vps-head h3{font-size:1.5rem}
.vps-head p{max-width:36rem;margin:0;font-size:.9rem;color:var(--fg-45)}
.vps-table{width:100%;border:1px solid var(--line);border-radius:1.25rem;border-spacing:0;overflow:hidden;background:var(--card);text-align:left}
.vps-table thead th{padding:1rem 1.25rem;font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-35)}
.vps-table tbody th,.vps-table tbody td{padding:1rem 1.25rem;border-top:1px solid var(--line)}
.vps-table tbody th{font:600 1.05rem/1.2 var(--display);letter-spacing:-.01em}
.vps-table tbody td{font:400 .85rem/1.3 var(--mono);color:var(--fg-65)}
.vps-table tbody tr{transition:background .25s}
.vps-table tbody tr:hover{background:rgba(255,255,255,.025)}
.vps-price{white-space:nowrap}
.vps-price .amt{font:700 1.2rem/1 var(--display);letter-spacing:-.01em;color:#fff}
.vps-price .unit{margin-left:.3rem;font:400 .85rem var(--body);color:var(--fg-45)}
.vps-act{text-align:right}
.vps-act .btn{font-family:var(--body)}
/* Same columns in every family's table */
@media (min-width:720px){
  .vps-table{table-layout:fixed}
  .vps-table thead th:nth-child(1){width:16%}
  .vps-table thead th:nth-child(2){width:17%}
  .vps-table thead th:nth-child(3),.vps-table thead th:nth-child(4){width:15%}
  .vps-table thead th:nth-child(5){width:17%}
}

/* Extras: four cards, two by two */
@media (min-width:640px){#extras .plans{grid-template-columns:repeat(2,1fr)}}
/* Phones: each server is a card */
@media (max-width:719px){
  .vps-table,.vps-table tbody{display:block;border:0;border-radius:0;background:none;overflow:visible}
  .vps-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vps-table tbody tr{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:.75rem;padding:1.25rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--card)}
  .vps-table tbody th,.vps-table tbody td{padding:0;border:0}
  .vps-table tbody th{grid-column:1/3;font-size:1.25rem}
  .vps-price{grid-column:3;grid-row:1;text-align:right}
  .vps-table td[data-label]{display:flex;flex-direction:column;gap:.35rem}
  .vps-table td[data-label]::before{content:attr(data-label);font:400 .6rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--fg-35)}
  .vps-act{grid-column:1/-1}
  .vps-act .btn{width:100%}
}