/* Recens Host — hosting page */

/* HEAD */
.hosting-head{padding:60px 0 8px;}
.hosting-head .badge{margin-bottom:20px;}
.hosting-head h1{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.6vw,46px); letter-spacing:-0.02em; margin-bottom:16px;}
.hosting-head .lead{font-size:16.5px; color:var(--slate); line-height:1.6;}
.toggle-row{display:flex; align-items:center; margin-bottom:20px;}
.toggle{display:inline-flex; background:var(--frost); border:1px solid var(--frost-dim); border-radius:30px; padding:3px;}
.toggle label{font-family:var(--font-mono); font-size:12px; padding:6px 15px; border-radius:24px; background:transparent; cursor:pointer; color:var(--slate); transition:color 0.15s ease, background 0.15s ease; user-select:none;}
.toggle label:hover{color:var(--ink);}

/* PER-CARD BILLING TOGGLE (pure-CSS, driven by each card's hidden .cycle-input radios,
   scoped to the card via general-sibling selectors) */
.cycle-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.cyc-monthly:checked ~ .toggle-row label[for$="-monthly"],
.cyc-annual:checked ~ .toggle-row label[for$="-annual"]{background:var(--ink); color:var(--frost);}
.cyc-monthly:focus-visible ~ .toggle-row .toggle,
.cyc-annual:focus-visible ~ .toggle-row .toggle{outline:2px solid var(--amber); outline-offset:2px;}
/* Price/cycle switch: show only the selected cycle's figures within this card */
.price-monthly, .price-annual{display:none;}
.cyc-monthly:checked ~ .price-monthly{display:block;}
.cyc-annual:checked ~ .price-annual{display:block;}
/* Buttons must keep their flex layout when revealed, not become block */
.cyc-monthly:checked ~ .plan-btn.price-monthly,
.cyc-annual:checked ~ .plan-btn.price-annual{display:inline-flex;}

/* PLANS */
.plans-section{padding:36px 0 72px;}
.pricing{position:relative;}
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;}
.plan-card{background:var(--white); border:1px solid var(--frost-dim); border-radius:16px; padding:32px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); position:relative;}
.plan-card.featured{border-color:var(--ink); box-shadow:var(--shadow-lg); position:relative; transform:translateY(-8px);}
.plan-badge{position:absolute; top:-12px; left:30px; background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:6px; font-weight:600;}
.plan-name{font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:6px;}
.plan-desc{color:var(--slate); font-size:13.5px; min-height:38px;}
.plan-price{font-family:var(--font-mono); font-size:38px; font-weight:600; letter-spacing:-0.02em; margin-bottom:2px;}
.plan-price span{font-size:15px; color:var(--slate); font-weight:400;}
.plan-price .was{font-size:20px; color:var(--slate-light); font-weight:400; text-decoration:line-through; margin-right:9px;}
.plan-cycle-note{font-family:var(--font-mono); font-size:12px; color:var(--slate-light); margin-bottom:22px;}
.plan-btn{width:100%; margin-bottom:24px;}
.plan-features{list-style:none;}
.plan-features li{font-size:13.5px; color:var(--ink); padding:9px 0; border-top:1px solid var(--frost); display:flex; align-items:center; gap:10px;}
.plan-features li:first-child{border-top:none;}
.check{color:#1f9d72; font-family:var(--font-mono); font-weight:600;}

/* COMPARISON TABLE */
.compare-section{background:var(--white); border-top:1px solid var(--frost-dim); border-bottom:1px solid var(--frost-dim);}
.compare-scroll{overflow-x:auto;}
.compare-table{width:100%; border-collapse:collapse; min-width:620px;}
.compare-table th, .compare-table td{padding:15px 20px; text-align:left; font-size:14px; border-bottom:1px solid var(--frost);}
.compare-table thead th{font-family:var(--font-display); font-size:15px; font-weight:600; border-bottom:1px solid var(--frost-dim);}
.compare-table tbody td:first-child, .compare-table thead th:first-child{color:var(--slate); font-family:var(--font-body);}
.compare-table td:not(:first-child), .compare-table th:not(:first-child){text-align:center; font-family:var(--font-mono); font-size:13.5px;}
.compare-table .col-featured{background:rgba(232,163,61,0.06);}
.compare-table thead .col-featured{background:rgba(232,163,61,0.1); border-radius:8px 8px 0 0;}
.compare-table .yes{color:#1f9d72; font-weight:600;}
.compare-table .no{color:var(--slate-light);}
.compare-table tbody tr:last-child td{border-bottom:none; font-weight:600; color:var(--ink);}

/* ADD-ONS */
.addons-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.addon-card{background:var(--white); border:1px solid var(--frost-dim); border-radius:14px; padding:24px 22px; box-shadow:var(--shadow-sm); transition:transform 0.15s ease, box-shadow 0.15s ease;}
.addon-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.addon-price{font-family:var(--font-mono); font-size:22px; font-weight:600; margin-bottom:14px;}
.addon-price span{font-size:12px; color:var(--slate); font-weight:400;}
.addon-card h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:8px;}
.addon-card p{font-size:13px; color:var(--slate); line-height:1.55;}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--white); border:1px solid var(--frost-dim); border-radius:12px; padding:2px 22px; box-shadow:var(--shadow-sm);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0; font-family:var(--font-display); font-weight:600; font-size:15.5px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-family:var(--font-mono); font-size:20px; color:var(--amber); font-weight:400; transition:transform 0.2s ease;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{padding:0 0 20px; font-size:14px; color:var(--slate); line-height:1.6; max-width:640px;}

/* CTA */
.cta-banner{
  background:var(--ink); border-radius:20px; padding:56px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  background-image:radial-gradient(circle at 85% 20%, rgba(232,163,61,0.16), transparent 55%);
}
.cta-banner h2{color:var(--frost);}
.cta-banner p{color:var(--slate-light); font-size:14.5px; max-width:420px;}

@media(max-width:900px){
  .plans-grid{grid-template-columns:1fr;}
  .plan-card.featured{transform:none;}
  .addons-grid{grid-template-columns:1fr 1fr;}
  .cta-banner{flex-direction:column; align-items:flex-start;}
}