/* Money pages (home, daily, monthly, pricing, plan pages). Agent money-pages.
   Tokens only; yellow is a fill with an ink edge, text on yellow is ink. */

/* Hero (two columns from 1024px): the copy starts at the top of the row (its first line level with the card's heading), so the H1 and the Deploy button stay on the first screen even where the calculator card is the much taller column (1024–1330px). When the calculator is taller, the copy then stays in view below the sticky main bar while the page scrolls past it, instead of leaving a block of empty space. Viewports too short to hold the copy keep it static. */
@media (min-width:1024px){.mp-hero__copy{align-self:start;padding-top:2rem;padding-right:clamp(0rem,2vw,2rem)}}
@media (min-width:1024px) and (min-height:43.75rem){.mp-hero__copy{position:sticky;top:var(--mb-h,68px)}}
/* Duration cards: three per row on desktop (six scenarios = two even rows) */
@media (min-width:1024px){.mp-cards3 .dcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mp-after{margin-top:1.5rem}
.mp-subh{margin-bottom:1rem}
.mp-def h2{margin-bottom:1rem}
.mp-def p+p{margin-top:1rem}
.mp-def__lead{font-size:clamp(1.125rem,1.6vw,1.25rem);line-height:1.5;font-weight:500}
.mp-prose{max-width:46rem}
.mp-prose>*+*{margin-top:1rem}
.mp-prose h3{margin-top:2rem}

/* Plan page H1: the name on its own line, the spec smaller underneath (one H1, read as one sentence;
   the dash between them is visually hidden so the second line does not start with a stray dash) */
.mp-h1__name,.mp-h1__spec{display:block}
.mp-h1__spec{margin-top:.375rem;font-size:clamp(1.375rem,2.6vw,2.125rem);font-weight:600;letter-spacing:-.01em;line-height:1.2}

/* Rule-backed facts */
.mp-facts{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.mp-fact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1.125rem 0;border-bottom:1px solid var(--rule)}
.mp-fact__i{width:1.75rem;height:1.75rem}
.mp-fact__t{font-size:.875rem;font-weight:650;color:var(--muted)}
.mp-fact__x{margin-top:.25rem;font-weight:500;line-height:1.5;text-wrap:pretty}

/* Four steps on one time track: ruler before the server exists, tape while it is billed, a cut where it is deleted */
.mp-steps{--mp-gap:2rem;display:grid;gap:1.75rem;margin:0;padding:0;list-style:none}
.mp-step__track{position:relative;display:block;height:14px;margin-bottom:.875rem;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1.5px no-repeat,repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat}
.mp-step--billed .mp-step__track{background:repeating-linear-gradient(90deg,var(--on-tape) 0 1px,transparent 1px 8px) 0 0/100% 40% no-repeat,var(--tape);border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--tape-edge)}
.mp-step--end .mp-step__track::before{content:"";position:absolute;left:0;top:-5px;bottom:-5px;border-left:2px dashed var(--ink)}
.mp-step__n{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}
.mp-step__n .icon{width:1.75rem;height:1.75rem;color:var(--muted)}
.mp-step__mark{font:400 .75rem/1 var(--mono);color:var(--muted)}
.mp-step--billed .mp-step__n .icon{color:var(--ink)}
.mp-step__t{font-size:1.1875rem}
.mp-step__x{margin-top:.5rem;color:var(--muted);text-wrap:pretty}
@media (min-width:720px){
.mp-steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--mp-gap)}
/* the tape runs on through the column gap and stops exactly at the cut */
.mp-step--billed .mp-step__track{margin-right:calc(-1 * var(--mp-gap));border-radius:2px 0 0 2px}
}
@media (min-width:1024px){.mp-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Plan families */
.mp-fams{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.mp-fam{display:grid;align-content:start;gap:.625rem;padding:1.25rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.mp-fam__name{font-size:1.25rem}
.mp-fam__name .badge{margin-left:.375rem}
.mp-fam__tag{font-weight:600}
.mp-fam__x{font-size:.9375rem;color:var(--muted)}
.mp-fam__dl,.mp-loc__dl{display:grid;gap:0;margin:.25rem 0 0;font:400 .875rem/1.5 var(--mono)}
.mp-fam__dl div,.mp-loc__dl div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem;padding:.4375rem 0;border-top:1px dashed var(--rule)}
.mp-fam__dl dt,.mp-loc__dl dt{color:var(--muted)}
.mp-fam__dl dd,.mp-loc__dl dd{margin:0;font-weight:600}
.mp-fam__dl a{margin-right:.5rem}
@media (min-width:720px) and (max-width:1023px){.mp-fams{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){.mp-fams--row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Locations */
.mp-locs{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.mp-loc{position:relative;padding:1.5rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.mp-loc__code{position:absolute;top:1.5rem;right:1.5rem;padding:0 .4375rem;border:1.5px solid var(--tape-edge);border-radius:2px;background:var(--tape);color:var(--on-tape);font:600 .8125rem/1.6 var(--mono)}
.mp-loc__city{padding-right:3rem;font-size:clamp(1.5rem,2.5vw,1.875rem);font-weight:700;letter-spacing:-.015em}
.mp-loc__country{margin-bottom:.75rem;color:var(--muted)}
.mp-loc__dl div{grid-template-columns:6rem minmax(0,1fr)}
.mp-loc__more{margin-top:1rem}
/* A city that is not open for orders yet */
.mp-loc--soon{background:none;border-style:dashed}
.mp-loc--soon .mp-loc__code{border-color:var(--muted);background:none;color:var(--muted)}
.mp-loc__city .badge{vertical-align:.4em}
.mp-loc__note{max-width:34rem;font-size:.9375rem;color:var(--muted)}
@media (min-width:720px){.mp-locs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}

/* Imprint */
.mp-imprint{display:grid;gap:1.5rem}
.mp-imprint__col{padding-top:.875rem;border-top:1px solid var(--ink)}
.mp-imprint__h{margin-bottom:.5rem;font-size:1rem}
.mp-imprint__col p+p{margin-top:.625rem}
.mp-imprint__more{font-size:.9375rem;color:var(--muted)}
@media (min-width:1024px){.mp-imprint{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}

/* FAQ aside */
.mp-faq__aside{max-width:22rem;margin-top:1rem}

/* Cost tables */
.ct-wrap{overflow-x:auto}
.ct{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--rule);border-radius:6px;font-variant-numeric:tabular-nums}
.ct__caption{padding-bottom:.75rem;text-align:left;font-weight:600}
.ct th,.ct td{padding:.875rem 1rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.ct thead th{padding-block:.625rem;font-size:.8125rem;font-weight:600;color:var(--muted);vertical-align:bottom}
.ct tbody tr:last-child>*{border-bottom:0}
.ct tbody th{font-weight:650}
.ct__sub{display:block;margin-top:.125rem;font-size:.8125rem;font-weight:400;color:var(--muted)}
.ct__dur{font-size:1.0625rem}
.ct__money{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.ct__unit{font:400 .875rem/1.5 var(--mono)}
.ct__calc{display:block;margin-top:.125rem;font:400 .75rem/1.45 var(--mono);color:var(--muted)}
.ct__low{display:inline-block;margin-left:.25rem;padding:0 .4rem;border:1px solid var(--tape-edge);border-radius:2px;background:var(--tape);color:var(--on-tape);font-size:.6875rem;font-weight:650;line-height:1.6;vertical-align:.25em}
.ct__low--cap{border-color:var(--cap);background:none;color:var(--cap)}
.ct--meter{max-width:46rem}
.ct__go{text-align:right;vertical-align:middle;white-space:nowrap}
.ct .pt__code{font-size:.75rem}
@media (max-width:719px){
.ct,.ct tbody,.ct tr,.ct th,.ct td{display:block}
.ct{border:0;border-radius:0;background:none}
.ct thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ct tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;margin-bottom:.75rem;padding:1rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.ct th,.ct td{padding:0;border:0}
.ct tbody th,.ct__go{grid-column:1/-1}
.ct__go{text-align:left}
.ct__go .btn{width:100%;min-height:44px}
.ct td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:600;color:var(--muted)}
.ct--days tr{grid-template-columns:repeat(3,minmax(0,1fr))}
.ct--meter tr{grid-template-columns:minmax(0,1fr)}
.ct--vs tr{grid-template-columns:minmax(0,1fr)}
.ct caption{display:block;text-align:left}
.mp-work td:nth-child(2){order:1}
.mp-work td:nth-child(4){order:2;text-align:right}
.mp-work td:nth-child(3){order:3;grid-column:1/-1}
}

/* Plan hero price card */
.mp-price{display:grid;gap:0;padding:1.25rem 1.25rem 1rem;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);border-radius:6px}
.mp-price__h{margin-bottom:.5rem;font-size:1rem;font-weight:650}
.mp-price__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem 1rem;padding:.875rem 0;border-top:1px dashed var(--rule)}
.mp-price__mode{display:flex;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:600;color:var(--muted)}
.mp-price__mode .icon{width:1.25rem;height:1.25rem}
.mp-price__val{grid-column:1;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.015em;line-height:1.1}
.mp-price__val small{font-size:.9375rem;font-weight:500;color:var(--muted);letter-spacing:0}
.mp-price__row .btn{grid-column:2;grid-row:1/span 2}
.mp-price .ph-flag{margin-top:.75rem}
.mp-price__note{margin-top:.5rem;font-size:.875rem;color:var(--muted)}
.mp-price__go{margin-top:.25rem;padding-top:1rem;border-top:1px dashed var(--rule)}
.mp-price__go .btn{width:100%;justify-content:center}

/* Jobs for a plan */
.mp-jobs{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.mp-job{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.mp-job .icon{width:1.375rem;height:1.375rem;margin-top:.125rem;color:var(--cap)}
.mp-job__t{font-weight:650}
.mp-job__x{margin-top:.25rem;color:var(--muted)}
@media (min-width:720px){.mp-jobs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}

/* Sibling plans */
.mp-sibs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.mp-sib a,.mp-sib__box{display:grid;gap:.25rem;height:100%;padding:1rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px;color:var(--ink);text-decoration:none}
.mp-sib a:hover{border-color:var(--ink)}
.mp-sib__name{font-weight:650}
.mp-sib__spec{font-size:.875rem;color:var(--muted)}
.mp-sib__price{font:400 .875rem/1.5 var(--mono)}
.mp-sib--here .mp-sib__box{border-color:var(--ink);box-shadow:inset 0 3px 0 var(--tape)}

@media (max-width:719px){.mp-sibs{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-sib a,.mp-sib__box{padding:.875rem}}

/* Receipt ("what a month really costs") */
.mp-receipt{max-width:32rem;padding:1.5rem 1.5rem 1.25rem;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--ink);border-radius:2px 2px 6px 6px}
.mp-receipt__h{font-size:1.125rem}
.mp-receipt__sub{margin:.25rem 0 1rem;font-size:.875rem;color:var(--muted)}
.mp-receipt table{width:100%;border-collapse:collapse;font:400 .875rem/1.5 var(--mono)}
.mp-receipt th,.mp-receipt td{padding:.5rem 0;border-bottom:1px dashed var(--rule);text-align:left;vertical-align:top}
.mp-receipt td{padding-left:1rem;text-align:right;white-space:nowrap;font-weight:600}
.mp-receipt th{font-weight:400}
.mp-receipt th small{display:block;color:var(--muted);font-size:.75rem}
.mp-receipt tfoot th,.mp-receipt tfoot td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:700}

/* Checklist (temporary servers): a ruler notch per item, not a box, so nothing looks like a form control */
.mp-check{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.mp-check li{position:relative;padding:1rem 0 1rem 1.75rem;border-bottom:1px solid var(--rule)}
.mp-check li::before{content:"";position:absolute;left:0;top:1.3125rem;width:.875rem;height:.75rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mp-check strong{display:block}
.mp-check span{display:block;margin-top:.25rem;color:var(--muted)}
@media (min-width:720px){.mp-check{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}

/* Workloads table and inline links */
.mp-work td:first-child{font-weight:600}
.mp-pill{display:inline-block;padding:0 .375rem;border:1px solid var(--ink);border-radius:2px;font:600 .8125rem/1.5 var(--mono);white-space:nowrap}
.mp-note{max-width:46rem;margin-top:1.25rem;font-size:.9375rem;color:var(--muted)}
.mp-two{display:grid;gap:2rem}
@media (min-width:1024px){.mp-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}}
