/* css/vps/guides.css - page-scoped rules for guides.html.
   RESTORED 2026-08-08 from the authoring agent's transcript: these bytes are the
   block the author wrote, captured before the extractor consumed it. Loaded from
   page_styles - the same cascade position the inline block held. */
/* page-local: composition only — centred document rhythm + the two-column
     "when & why" split. Every value is a token; no raw hex, font or size here. */

  .hero { position: relative; overflow: clip; }
  .hero-c { text-align: center; max-width: 800px; margin-inline: auto;
    padding-block: clamp(48px, 9vw, 108px); }
  .hero-c .cluster { justify-content: center; }

  .sec-c { text-align: center; max-width: var(--prose-max); margin-inline: auto;
    margin-bottom: var(--sp-xl); }
  .hero-c .lead, .sec-c .lead { margin-inline: auto; }

  /* the feature tile icon, verbatim from landing.html's page-local block */
  .feature-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md);
    background: var(--accent-tint); border: 1px solid var(--accent-700); color: var(--accent-400); margin-bottom: var(--space-5); }
  .feature-ico .i { width: 19px; height: 19px; }

  /* bullet rhythm, verbatim from legal-toa.html's `.doc-sec ul` */
  .pts { margin: var(--space-5) 0 0; padding-left: var(--space-7);
    display: flex; flex-direction: column; gap: var(--space-3);
    font-size: var(--t-sm); color: var(--ink-300); }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--sp-2xl); align-items: center; }
  .split > * { min-width: 0; }
  .pt-list { display: flex; flex-direction: column; gap: var(--space-7); margin-top: var(--sp-xl); }
  .pt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .pt .feature-ico { margin-bottom: 0; }
  .pt p { color: var(--ink-300); font-size: var(--t-sm); margin-top: var(--space-3); }

  /* THE "CHOOSING A PLAN" TAIL - three blocks the bundle spaces with `style="..."`
     attributes this app cannot emit (`style-src 'self'`), and the measured worst
     misalignment on the public surface. The section carries no stack class, and every
     one of `h3/.h3`, `p`, `.card`, `.field` is `margin: 0`, so the currency control, the
     price card and the "Compare all VPS plans" button rendered STACKED EDGE TO EDGE with
     zero space between them and against the spec grid above - the select reading as if
     it were sitting on top of the card. `margin-top` on the shared `.price-c` block
     states the bundle's `--sp-xl` rung once (`bundle/templates/vps/guides.html:193,220`)
     and the card refines it to its own (`:205`). */
  .price-c { text-align: center; max-width: 420px; margin-inline: auto;
    margin-top: var(--sp-xl); }
  .card.price-c { margin-top: var(--space-7); }
  /* `text-align` does not reach a FLEX item, so the centred box still laid its one button
     out from the left edge (`bundle/templates/vps/guides.html:220`,
     `style="justify-content:center; ..."`). `.hero-c .cluster` above says the same thing
     for the hero's pair; this is the tail's copy of it, which had no rule. */
  .cluster.price-c { justify-content: center; }
  /* The spec line under the card's rule (`:217`). `p`, not `.small.muted`: the "/month"
     suffix beside the amount carries both of those classes on an inline span. */
  .card.price-c p.small.muted { margin-top: var(--space-5); }

  @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); } }