/* maintenance.html — page-only styles */
.cover{grid-template-columns:repeat(4,minmax(0,1fr))}
.cover .card{min-height:250px}
.cover .card .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--mag) 18%,transparent);color:var(--mag-hi);font-family:var(--mono);font-size:14px}
.cover .card--mag .ico{background:color-mix(in srgb,var(--on-mag) 12%,transparent);color:var(--on-mag)}
@media (max-width:1100px){.cover{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cover{grid-template-columns:1fr}.cover .card{min-height:0}}

/* why maintenance matters */
.why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.why li{border-top:2px solid var(--mag);padding-top:22px}
.why h3{margin:0 0 10px;font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.025em;line-height:1.15}
.why p{margin:0;color:var(--muted)}
@media (max-width:1100px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why{grid-template-columns:1fr}}

/* billing toggle */
.billing{display:inline-flex;padding:5px;border-radius:999px;border:1px solid var(--line-ink);background:var(--cream-2);margin:0 0 clamp(28px,3.5vw,44px)}
.billing button{appearance:none;border:0;background:transparent;color:var(--muted-ink);font-weight:600;font-size:15px;padding:11px 22px;border-radius:999px;cursor:pointer;transition:background-color .3s,color .3s}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.billing button:hover{color:var(--ink)}
.billing button[aria-pressed="true"]:hover{color:var(--cream)}
.billing[hidden]{display:none}

/* plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan-grid [hidden]{display:none!important}
.plan-grid .plan{gap:0}
.plan .plan-for{margin:12px 0 0;min-height:3.1em}
.plan .price{margin:28px 0 6px;font-size:clamp(2.6rem,4.2vw,3.8rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.plan .price small{font-size:16px;font-weight:500;letter-spacing:0;color:var(--muted-ink)}
.plan .price-note{margin:0 0 28px;font-size:15px}
.sec--cream .plan .price,.sec--cream .plan .incl{color:var(--ink)}
.sec--cream .plan--hl .price,.sec--cream .plan--hl .incl{color:var(--on-mag)}
.plan .incl{margin:0 0 14px;padding-top:24px;border-top:1px solid var(--line-ink);font-weight:600}
.plan .ticks{gap:9px}
.plan .card-foot{padding-top:32px}
.plan .card-foot .btn{width:100%}
.sec--cream .plan--hl{background:var(--mag);color:var(--on-mag);border-color:var(--mag);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ink) 55%,transparent)}
.sec--cream .plan--hl p,.sec--cream .plan--hl .price small{color:var(--on-mag-soft)}
.sec--cream .plan--hl .incl{border-color:color-mix(in srgb,var(--on-mag) 22%,transparent);color:var(--on-mag)}
.sec--cream .plan--hl .ticks li::before{border-color:var(--on-mag)}
.plan-note{margin:28px 0 0;color:var(--muted-ink);max-width:46rem}
@media (min-width:1001px){.plan-grid .plan--hl{transform:translateY(-14px)}}
@media (max-width:1000px){.plan-grid{grid-template-columns:1fr;max-width:560px}.plan .plan-for{min-height:0}}

/* getting started */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:linear-gradient(90deg,var(--mag),color-mix(in srgb,var(--mag) 25%,transparent))}
.steps li{position:relative;padding-top:72px}
.steps .dot{position:absolute;top:8px;left:0;width:40px;height:40px;border-radius:50%;background:var(--ink-2);border:2px solid var(--mag);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--mag-hi)}
.steps h3{margin:0 0 8px;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.03em;line-height:1.1}
.steps p{margin:0;color:var(--muted);max-width:21rem}
.rebuild{margin-top:clamp(40px,5vw,64px);border-radius:var(--radius);border:1px solid var(--line);padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,40px);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.rebuild strong{font-weight:650;font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.02em}
.rebuild span{color:var(--muted);flex:1 1 30rem}
@media (max-width:860px){
.steps{grid-template-columns:1fr;gap:28px;padding-left:64px}
.steps::before{left:19px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--mag),color-mix(in srgb,var(--mag) 25%,transparent))}
.steps li{padding-top:0}
.steps .dot{left:-64px;top:0}
}
/* hosting add-on */
.host-big{margin:0;font-size:clamp(3.6rem,11vw,10rem);line-height:.82;font-weight:800;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:2px var(--mag)}
.host-big span{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-weight:400;-webkit-text-stroke:0;color:var(--muted);margin-bottom:18px;text-transform:uppercase}
.host-copy h2{margin:0 0 24px}
.host-copy p{margin:0 0 18px;color:var(--muted);max-width:38rem;font-size:clamp(17px,1.3vw,19px)}
.host-copy .host-price{color:var(--cream);font-weight:500}
.host-copy .ticks{margin:8px 0 28px}
.faq-more{margin-top:32px}