/* ResellBox 2026, page layer (WordPress only). Tokens and header/footer live in rb-base.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--link)}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.rb-section{padding-block:clamp(56px,8vw,96px)}
.rb-section--alt{background:var(--surface);border-block:1px solid var(--line)}
.rb-lead{color:var(--muted);font-size:1.1rem;max-width:60ch}
.rb-sechead{display:grid;gap:12px;margin-bottom:40px;max-width:740px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* hero (shared bones, three treatments) */
.rb-hero{position:relative;overflow:hidden;padding-block:clamp(44px,7vw,84px)}
.rb-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent);pointer-events:none}
.rb-hero .rb-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.rb-hero__copy{display:grid;gap:22px;min-width:0}
.rb-crumbs{font-size:.85rem;color:var(--muted)}
.rb-crumbs a{color:var(--muted)}
.rb-hero__sub{font-size:1.15rem;color:var(--muted);max-width:52ch}
.rb-hero__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rb-hero__price strong{font:800 2rem var(--font-display);color:var(--accent);letter-spacing:-.02em}
.theme-shared .rb-hero__price strong,.theme-brand .rb-hero__price strong{color:var(--navy)}
.rb-hero__price span{color:var(--muted);font-size:.95rem}
.rb-cta{display:flex;gap:12px;flex-wrap:wrap}
.rb-ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:.95rem}
.rb-ticks li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:8px}
@media (max-width:920px){.rb-hero .rb-wrap{grid-template-columns:minmax(0,1fr)}}

/* VPS hero: navy band on an otherwise light page */
.theme-vps .rb-hero{
  --bg:#0A0F2E; --surface:#121946; --surface2:#1A2358; --line:#2B3470;
  --fg:#EEF0FA; --muted:#A7ADD4; --link:#FFC233; --green:#8DB36B; --ok:#6FD39B;
  background:var(--bg);color:var(--fg)
}
.theme-vps .rb-hero .rb-btn--ghost{color:var(--fg)}
.theme-vps .rb-hero a{color:var(--muted)}
.theme-vps .rb-hero a.rb-btn--primary{color:var(--accent-ink)}
.theme-vps .rb-hero a.rb-btn--ghost{color:var(--fg)}
.theme-vps .rb-cell__ic{color:var(--navy)}

/* hero visual: panel (vps) */
.rb-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.rb-panel__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.rb-panel__bar i{width:10px;height:10px;border-radius:50%;background:var(--ok)}
.rb-panel__bar em{margin-left:auto;font-style:normal;font-size:.75rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.rb-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.rb-meter{background:var(--surface);padding:14px 16px;display:grid;gap:8px}
.rb-meter span{font-size:.78rem;color:var(--muted)}
.rb-meter b{font:500 1.02rem var(--font-mono);font-variant-numeric:tabular-nums}
.rb-bar{height:6px;border-radius:9px;background:var(--surface2);overflow:hidden}
.rb-bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.rb-term{background:var(--term);color:#DDE2FF;font:400 .8rem/1.75 var(--font-mono);padding:16px;overflow-x:auto}
.rb-term p{white-space:nowrap;animation:rbline .5s both}
.rb-term p:nth-child(2){animation-delay:.5s}.rb-term p:nth-child(3){animation-delay:1s}.rb-term p:nth-child(4){animation-delay:1.5s}.rb-term p:nth-child(5){animation-delay:2s}.rb-term p:nth-child(6){animation-delay:2.5s}
.rb-term .p{color:#FFC233}.rb-term .g{color:#8DE0B0}.rb-term .m{color:#8E96C9}
.rb-panel__note{padding:10px 16px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}
@keyframes rbline{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* hero visual: launch card (shared) */
.rb-launch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:18px;box-shadow:0 30px 60px -36px rgba(20,26,60,.35)}
.rb-launch h3{font-size:1.3rem}
.rb-launch ol{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:l}
.rb-launch li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;counter-increment:l}
.rb-launch li::before{content:counter(l);width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 .95rem var(--font-display)}
.rb-launch li span{display:block;color:var(--muted);font-size:.92rem}
.rb-launch__free{display:flex;flex-wrap:wrap;gap:8px}
.rb-launch__free span{background:var(--surface2);border-radius:99px;padding:5px 12px;font-size:.82rem;font-weight:600}

/* hero visual: rack readout (servers) */
.rb-rack{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rb-rack__head{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font:500 .8rem var(--font-mono);color:var(--muted)}
.rb-rack dl{margin:0;display:grid}
.rb-rack dl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.rb-rack dl div:last-child{border-bottom:0}
.rb-rack dt{font:500 .78rem var(--font-mono);color:var(--muted);text-transform:uppercase}
.rb-rack dd{margin:0;font:500 .92rem var(--font-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rb-rack__leds{display:flex;gap:6px}
.rb-rack__leds i{width:8px;height:8px;background:var(--ok);border-radius:50%}
.theme-servers h1{font-weight:700;letter-spacing:-.03em}
@media (max-width:480px){.rb-rack dl div{grid-template-columns:minmax(0,1fr)}}

/* strip */
.rb-strip{border-block:1px solid var(--line);background:var(--surface);padding-block:18px}
.rb-strip .rb-wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.rb-pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--muted)}
.rb-chip{border:1px solid var(--line);border-radius:8px;padding:4px 10px;color:var(--fg);font-weight:600;font-size:.8rem;background:var(--bg)}

/* pricing */
.rb-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.rb-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--rb);padding:4px}
.rb-seg button{min-height:40px;padding:0 18px;border:0;background:transparent;color:var(--muted);border-radius:calc(var(--rb) - 3px);font:600 .95rem var(--font-body);cursor:pointer}
.rb-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.rb-tools small{color:var(--muted)}
.rb-plans{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:14px}
.rb-plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 18px;display:grid;gap:16px;align-content:start;min-width:0}
.rb-plan.is-pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rb-plan__tag{font-size:.72rem;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:3px 10px;justify-self:start}
.rb-plan__tag.is-empty{visibility:hidden}
.rb-price{display:grid;gap:2px}
.rb-price strong{font:800 1.9rem var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.rb-price span{font-size:.8rem;color:var(--muted)}
.rb-specs{list-style:none;margin:0;padding:0;font-size:.92rem}
.rb-specs li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.rb-specs li span{color:var(--muted)}
.rb-specs li b{font:500 .88rem var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.rb-plan .rb-btn{width:100%}
.rb-fine{margin-top:20px;color:var(--muted);font-size:.85rem;max-width:80ch}
@media (max-width:1100px){.rb-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.rb-plans{grid-template-columns:minmax(0,1fr)}.rb-plan__tag.is-empty{display:none}}

/* server table */
.rb-loc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.rb-loc-tabs button{min-height:42px;padding:0 18px;border-radius:var(--rb);border:1px solid var(--line);background:var(--surface);color:var(--fg);font:600 .92rem var(--font-body);cursor:pointer}
.rb-loc-tabs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rb-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.rb-table{border-collapse:collapse;width:100%;min-width:760px;font-size:.92rem}
.rb-table th,.rb-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.rb-table th{font:700 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface2);white-space:nowrap}
.rb-table td{font-variant-numeric:tabular-nums}
.rb-table td.num{font-family:var(--font-mono);font-size:.88rem}
.rb-table tr:last-child td{border-bottom:0}
.rb-table .rb-price strong{font-size:1.25rem}
.rb-table tr[hidden]{display:none}

/* answer + compare */
.rb-answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.rb-answer__box{border-left:4px solid var(--accent);padding:4px 0 4px 20px;display:grid;gap:12px}
.rb-answer__box p{font-size:1.06rem}
.rb-updated{font:400 .82rem var(--font-mono);color:var(--muted)}
.rb-compare td.y{color:var(--ok);font-weight:600}
@media (max-width:920px){.rb-answer{grid-template-columns:minmax(0,1fr)}}

/* bento */
.rb-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.rb-cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start;min-width:0;grid-column:span 2}
.rb-cell p{color:var(--muted);font-size:.95rem}
.rb-cell__ic{width:40px;height:40px;border-radius:calc(var(--r) / 2);background:var(--surface2);display:grid;place-items:center;color:var(--accent);font-size:1.2rem}
.theme-shared .rb-cell__ic,.theme-brand .rb-cell__ic{color:var(--navy)}
.rb-cell.is-big{grid-column:span 3;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rb-cell.is-big p{color:var(--accent-ink);opacity:.85}
.rb-cell.is-big .rb-cell__ic{background:var(--accent-ink);color:var(--accent)}
.rb-cell.is-wide{grid-column:span 3}
@media (max-width:900px){.rb-cell,.rb-cell.is-big,.rb-cell.is-wide{grid-column:span 6}}
@media (min-width:600px) and (max-width:900px){.rb-cell{grid-column:span 3}}

/* split / steps / locations */
.rb-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rb-split>div{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--bg);display:grid;gap:14px;align-content:start}
.rb-split ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.rb-split li{display:flex;gap:10px;color:var(--muted);font-size:.96rem}
.rb-split li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--green)}
.rb-split .is-you li::before{background:var(--muted)}
@media (max-width:760px){.rb-split{grid-template-columns:minmax(0,1fr)}}
.rb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.rb-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.rb-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--line);counter-increment:s}
.rb-steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font:500 .95rem var(--font-mono);color:var(--fg)}
.rb-steps p{color:var(--muted);font-size:.95rem}
.rb-locs{display:grid;gap:10px}
.rb-loc{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:calc(var(--r) * .75);padding:14px 16px;background:var(--surface)}
.rb-loc span{color:var(--muted);font-size:.9rem}
.rb-loc.is-near{border-color:var(--accent)}
@media (max-width:920px){.rb-two{grid-template-columns:minmax(0,1fr);gap:40px}}

/* faq */
.rb-faq{display:grid;gap:10px;max-width:880px}
.rb-faq details{border:1px solid var(--line);border-radius:calc(var(--r) * .85);background:var(--bg)}
.rb-section--alt .rb-faq details{background:var(--bg)}
.rb-faq summary{cursor:pointer;padding:18px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.rb-faq summary::-webkit-details-marker{display:none}
.rb-faq summary::after{content:"+";font:400 1.3rem var(--font-mono);color:var(--link);flex:none}
.rb-faq details[open] summary::after{content:"\2212"}
.rb-faq details p{padding:0 20px 20px;color:var(--muted);max-width:70ch}

/* contact */
.rb-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.rb-contact dl{margin:0;display:grid;gap:14px}
.rb-contact dt{font-size:.8rem;color:var(--muted)}
.rb-contact dd{margin:0;font-weight:500}
.rb-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.rb-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rb-form label{display:grid;gap:6px;font-size:.88rem;font-weight:600}
.rb-form input,.rb-form select,.rb-form textarea{font:400 1rem var(--font-body);color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:calc(var(--r) / 1.6);padding:12px 14px;min-height:48px;width:100%}
.rb-form textarea{min-height:110px;resize:vertical}
.rb-form .rb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rb-form__note{font-size:.8rem;color:var(--muted)}
.rb-form__msg{border-radius:10px;padding:12px 14px;font-size:.92rem;background:var(--surface2);border-left:4px solid var(--ok)}
.rb-form__msg.is-error{border-left-color:#E5484D}
@media (max-width:920px){.rb-contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.rb-row2{grid-template-columns:minmax(0,1fr)}}

/* home lanes */
.rb-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rb-lane{display:grid;gap:14px;align-content:start;padding:28px;text-decoration:none;color:inherit}
.rb-lane p{opacity:.85;font-size:.95rem}
.rb-lane--vps{background:#0A0F2E;color:#EEF0FA;border-radius:16px}
.rb-lane--shared{background:#fff;color:#141A3C;border:1px solid var(--line);border-radius:22px}
.rb-lane--servers{background:#12161C;color:#EDF0F4;border-radius:6px;border:1px solid #303A49}
.rb-lane__more{font-weight:700;color:var(--accent)}
.rb-lane--shared .rb-lane__more{color:#1F4FD8}
@media (max-width:900px){.rb-lanes{grid-template-columns:minmax(0,1fr)}}

/* general content pages */
.rb-prose{max-width:760px}
.rb-prose h2{margin:40px 0 14px;font-size:1.7rem}
.rb-prose h3{margin:28px 0 10px}
.rb-prose p,.rb-prose ul,.rb-prose ol{margin:0 0 16px;color:var(--muted)}
.rb-prose a{color:var(--link)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rb-term p{animation:none}}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Info pages: facts, cards, notes (pages without a plan grid) ---- */
.rb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.rb-facts>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column-reverse;gap:6px}
.rb-facts dt{color:var(--muted);font-size:.9rem}
.rb-facts dd{margin:0;font-family:var(--font-display,inherit);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--fg)}
.rb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.rb-card{display:grid;gap:10px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}
.rb-card:hover,.rb-card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.rb-card h3{margin:0;font-size:1.15rem}
.rb-card p{margin:0;color:var(--muted);font-size:.95rem}
.rb-card__tag{justify-self:start;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--surface2);color:var(--fg)}
.rb-card__more{font-weight:700;color:var(--link)}
.rb-notes{margin:0;padding-left:1.2em;display:grid;gap:10px;max-width:72ch;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.rb-card{transition:none}.rb-card:hover{transform:none}}