/* HourlyVPS page sections: billing rules, spec sheet, CTA band, sticky CTA, blog reads.
   Loaded on every view except the blog's own (inc/assets.php). */

/* ---------- Rules, printed big ---------- */
.rules{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;margin:0;padding-block:1.375rem;border-bottom:1px solid var(--rule)}
.rule__icon{width:2rem;height:2rem}
.rule--plain{display:block}
.rule__title{margin:0;font-size:.9375rem;font-weight:650;color:var(--muted)}
.rule__text{margin-top:.375rem;font-size:clamp(1.0625rem,1.5vw,1.1875rem);font-weight:500;line-height:1.5;text-wrap:pretty}
.rule__more{white-space:nowrap;font-size:.9375rem;font-weight:600}
@media (min-width:720px){.rules{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}}

/* ---------- Spec sheet ---------- */
.spec{width:100%;border-collapse:collapse;font:400 .875rem/1.5 var(--mono)}
.spec__caption{padding-bottom:.5rem;text-align:left;font:600 1rem var(--sans)}
.spec th,.spec td{padding:.75rem 0;border-bottom:1px dashed var(--rule);text-align:left;vertical-align:top}
.spec tr:first-child>*{border-top:1px solid var(--ink)}
.spec th{width:40%;padding-right:1rem;font-weight:400;color:var(--muted)}
.spec th.has-icon{position:relative;padding-left:1.625rem}
.spec__icon{position:absolute;left:0;top:.84rem;width:1.125rem;height:1.125rem;color:var(--ink)}
.spec__value{font-weight:600}
.spec__note{display:block;margin-top:.125rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.band{--ink:#0F1215;--bg:var(--tape);--focus:#0F1215;--link:#0F1215;margin-top:clamp(2rem,5vw,3.5rem)}
.band__tape{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem);background:repeating-linear-gradient(90deg,#0F1215 0 1.5px,transparent 1.5px 24px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,#0F1215 0 1.5px,transparent 1.5px 144px) 0 0/100% 20px no-repeat,var(--tape);color:#0F1215;border-block:2px solid #0F1215}
.band__title{max-width:18em;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700}
.band__text{max-width:38rem;margin-top:.875rem;font-size:1.125rem}
.band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem}
.band__link{font-weight:650}
.band__cut{display:flex;align-items:center;gap:.75rem;width:min(100% - 2 * var(--gx),var(--maxw));margin:.75rem auto 2rem;font:400 .75rem/1 var(--mono);color:var(--muted)}
.band__cut::before{content:"";flex:1;border-top:1.5px dashed var(--muted)}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none}
@media (max-width:719px){
html:has(.sticky-cta){--sticky-h:68px}
body:has(.sticky-cta){padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom,0px))}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:var(--sticky-h);padding:.5rem var(--gx) calc(.5rem + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1.5px solid var(--ink);transform:translateY(0);transition:transform .2s ease}
/* With JS the bar waits off-screen (and out of the tab order) until the header and hero
   Deploy buttons have scrolled away; assets.php toggles .is-shown. Without JS it stays. */
.js .sticky-cta{visibility:hidden;transform:translateY(110%);transition:transform .2s ease,visibility 0s linear .2s}
.js .sticky-cta.is-shown{visibility:visible;transform:translateY(0);transition:transform .2s ease}
body:has(:is(input:not([type=range],[type=radio],[type=checkbox]),select,textarea):focus) .sticky-cta{transform:translateY(110%)}
.sticky-cta__info{display:grid;line-height:1.3}
.sticky-cta__plan{font-weight:650}
.sticky-cta__price{font:400 .8125rem var(--mono);color:var(--muted)}
.sticky-cta .btn{flex-shrink:0}
}

/* ---------- Blog reads (hvps_blog_reads, inc/blog-reads.php): no images, title = the one link ---------- */
.breads__head{margin-bottom:1.5rem}
.breads__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin:0;padding:0;list-style:none}
@media (min-width:1024px){.breads__list--2{max-width:calc(66.667% - .333rem)}.breads__list--1{max-width:calc(33.333% - .667rem)}}
.bread{position:relative;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:1.125rem 1.25rem 1.25rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.bread:hover{border-color:var(--ink)}
.bread>*{margin:0}
.bread__k{display:flex;align-items:center;gap:.5rem;font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.bread__k::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--acc,var(--ink))}
.bread.acc-explainers{--acc:var(--link)}.bread.acc-tutorials{--acc:var(--cap)}.bread.acc-use-cases{--acc:var(--tape-text)}.bread.acc-security{--acc:var(--error)}
.bread__t{font-size:1.125rem;font-weight:650;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.bread__t a{color:var(--ink);text-decoration:none}
.bread__t a::after{content:"";position:absolute;inset:0;border-radius:6px}
.bread:hover .bread__t a{text-decoration:underline;text-decoration-thickness:1.5px}
.bread__t a:focus-visible{outline:0}
.bread__t a:focus-visible::after{outline:2px solid var(--focus);outline-offset:2px}
.bread__x{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.breads__more{display:inline-block;margin-top:1.25rem}