/* Style serwerów korzysta z typografii i tokenów wspólnego apple.css. */
.server-teasers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.server-teasers .server-card { padding: 36px; }
.server-teasers .server-card h3 { font-size: 30px; }
.server-teasers .server-card p:not(.category) { font-size: 14px; line-height: 1.7; max-width: 440px; }
.server-teasers .server-card strong { font-size: 32px; margin-top: 24px; }
.server-teasers .button { margin-top: 24px; }
.server-teaser-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 24px; }
.server-teaser-note .text-link { font-size: 12px; margin-left: 12px; }
.server-hero { background: #fafafa; padding-top: 72px; }
.server-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; }
.server-hero h1 { font-size: clamp(42px, 4.6vw, 68px); line-height: 1.06; letter-spacing: -.05em; }
.server-lead { max-width: 490px; margin-top: 26px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.server-hero .actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 28px; }
.server-hero-note { font-size: 12px; color: var(--muted); margin-top: 24px; }
.server-visual { margin: 0 -24px; }
.server-visual img { width: 100%; mix-blend-mode: multiply; mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 76%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
.server-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; padding-block: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.server-section, .server-config-section { padding-block: 80px; }
.server-section-heading { margin-bottom: 36px; }
.server-section-heading h2 { font-size: clamp(30px, 3.4vw, 46px); }
.server-section-heading > p { font-size: 16px; color: var(--muted); max-width: 670px; margin-top: 20px; line-height: 1.7; }
.server-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.server-mode { padding-top: 26px; border-top: 1px solid var(--line); }
.server-mode h3 { font-size: 24px; margin-bottom: 16px; }
.server-mode p, .server-mode li { font-size: 14px; color: var(--muted); line-height: 1.8; }
.server-mode ul { padding-left: 18px; margin: 20px 0 0; }
.server-mode li { margin: 8px 0; }
.server-config-section { background: var(--surface); scroll-margin-top: 44px; }
.server-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.server-page fieldset:disabled { opacity: .55; }
.server-page fieldset:disabled button { cursor: wait; }
.server-switches { display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px; max-width: 850px; }
.server-switch legend { font-size: 14px; font-weight: 500; padding: 0; margin-bottom: 12px; }
.server-segment { display: flex; gap: 4px; padding: 4px; background: #e8e8ed; border-radius: 100px; }
.server-segment label { position: relative; flex: 1; cursor: pointer; }
.server-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.server-segment span { display: flex; justify-content: center; align-items: center; padding: 12px 16px; min-height: 46px; border-radius: 100px; color: #505058; font-size: 13px; text-align: center; }
.server-segment input:checked + span { color: #1d1d1f; background: #fff; box-shadow: 0 2px 6px #0000000a; }
.server-segment input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.server-type-note { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 24px 0; }
.server-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.server-plan { display: flex; flex-direction: column; background: #fff; border: 1px solid #d4d4da; border-radius: 22px; padding: 28px; cursor: pointer; min-width: 0; }
.server-plan:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.server-plan:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
.server-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.server-plan-head strong { font-size: 26px; letter-spacing: -.04em; font-weight: 600; }
.server-plan input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex-shrink: 0; }
.server-plan-price { display: block; margin: 24px 0 5px; font-size: 32px; font-weight: 600; letter-spacing: -.04em; }
.server-plan-price.is-quote { font-size: 23px; }
.server-plan-period { display: block; font-size: 12px; color: var(--muted); }
.server-plan-gross, .server-plan-setup { display: block; font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 7px; }
.server-plan-specs { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e8e8ed; font-size: 14px; line-height: 1.6; }
.server-plan-specs small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.server-availability { font-size: 12px; color: var(--muted); margin-top: 20px; line-height: 1.8; max-width: 850px; }
.server-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; background: #fff; padding: 44px; border-radius: 26px; margin-top: 40px; }
.server-checkout-grid h3 { font-size: 24px; margin: 0 0 24px; }
.server-field { margin-bottom: 20px; }
.server-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.server-field label span { color: var(--muted); font-weight: 400; }
.server-field input, .server-field select, .server-field textarea { width: 100%; min-height: 48px; background: #fff; color: #1d1d1f; font: inherit; font-size: 16px; border: 1px solid #c5c5cc; border-radius: 12px; padding: 12px 14px; }
.server-field textarea { resize: vertical; line-height: 1.6; }
.server-field input::placeholder, .server-field textarea::placeholder { color: #73737b; }
.server-field [aria-invalid="true"] { border-color: #c90019; }
.server-hint { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 8px; }
.server-coolify { padding-block: 24px; border-block: 1px solid var(--line); margin-top: 26px; }
.server-coolify h4 { font-size: 19px; margin-bottom: 12px; }
.server-coolify p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.server-summary { margin-top: 30px; }
.server-summary-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.server-summary h3 { margin-bottom: 8px; }
#summarySpecs { color: var(--muted); font-size: 13px; line-height: 1.7; }
.server-summary dl { margin: 24px 0; }
.server-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 10px; border-bottom: 1px solid #e8e8ed; }
.server-summary dt, .server-summary dd { margin: 0; font-size: 13px; line-height: 1.7; }
.server-summary dt { color: var(--muted); }
.server-summary dd { text-align: right; font-weight: 500; }
.server-summary dd small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.server-summary-total > span { font-size: 12px; color: var(--muted); }
.server-summary-total strong { display: block; font-size: 30px; letter-spacing: -.04em; margin: 8px 0; font-weight: 600; }
.server-summary-total p { font-size: 12px; color: var(--muted); }
.server-contact-intro { font-size: 14px; color: var(--muted); line-height: 1.7; margin: -8px 0 26px; }
.server-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 12px; line-height: 1.8; color: var(--muted); margin: 24px 0; cursor: pointer; }
.server-consent input { width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--blue); }
.server-consent a, .server-message a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.server-page .server-submit { width: 100%; border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 52px; }
.server-submit:disabled { opacity: .65; cursor: default; }
.server-submit-note { font-size: 12px; color: var(--muted); line-height: 1.7; text-align: center; margin-top: 14px; }
.server-message { margin-top: 20px; padding: 16px 18px; border: 1px solid #bcd8ff; border-radius: 12px; background: #f0f7ff; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.server-message.is-error { border-color: #e8b9c0; background: #fff3f4; }
.server-message[hidden], .server-page [hidden] { display: none; }
.server-honeypot, .server-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.server-new-inquiry { margin-top: 16px; border: 0; font: inherit; cursor: pointer; }
.server-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: server-step; margin: 0; padding: 0; }
.server-process li { list-style: none; border-top: 1px solid var(--line); padding-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.8; counter-increment: server-step; }
.server-process li::before { content: counter(server-step, decimal-leading-zero); display: block; font-size: 28px; color: #6b8ea8; letter-spacing: -.04em; margin-bottom: 16px; }
.server-process strong { display: block; font-weight: 600; font-size: 17px; color: #1d1d1f; margin-bottom: 8px; }
.server-faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; padding-top: 0; border-bottom: 1px solid var(--line); }
.server-faq h2 { font-size: 40px; }
.server-faq > div > p { color: var(--muted); font-size: 14px; margin: 20px 0; }
.server-page input:focus-visible, .server-page select:focus-visible, .server-page textarea:focus-visible, .server-page button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width: 1000px) {
  .server-plan { padding: 24px; }
  .server-checkout-grid { gap: 32px; padding: 32px; }
}
@media (max-width: 800px) {
  .server-hero { padding-top: 48px; }
  .server-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .server-lead { margin-inline: auto; }
  .server-hero .actions { justify-content: center; }
  .server-visual { max-width: 480px; margin: 0 auto; }
  .server-benefits { grid-template-columns: 1fr 1fr; text-align: center; margin-top: 20px; }
  .server-switches { grid-template-columns: 1fr; gap: 24px; }
  .server-plan-grid { grid-template-columns: 1fr; gap: 16px; }
  .server-plan { padding: 28px; }
  .server-checkout-grid { grid-template-columns: 1fr; gap: 36px; }
  .server-configuration { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .server-mode-grid { gap: 28px; }
  .server-process { grid-template-columns: 1fr 1fr; }
  .server-faq { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .server-teasers, .server-mode-grid { grid-template-columns: 1fr; }
  .server-teasers .server-card { padding: 28px; }
  .server-hero h1 { font-size: clamp(38px, 9vw, 52px); }
  .server-lead { font-size: 16px; margin-top: 20px; }
  .server-hero .actions { gap: 12px 20px; }
  .server-benefits { font-size: 12px; }
  .server-section, .server-config-section { padding-block: 52px; }
  .server-section-heading > p { font-size: 14px; }
  .server-segment span { padding: 12px 10px; font-size: 12px; }
  .server-checkout-grid { padding: 28px 20px; border-radius: 22px; }
  .server-summary dl > div { gap: 12px; }
  .server-summary dt, .server-summary dd { font-size: 12px; }
  .server-process { gap: 24px 18px; }
  .server-process li { font-size: 13px; }
  .server-faq { padding-top: 0; }
}