/* JP-Hosting mascot site readability pass.
   Loaded after site and shared styles so the existing visual system stays intact. */

:root {
  --jp-readable-body: 17px;
  --jp-readable-small: 14px;
  --jp-readable-label: 12px;
}

/* IPv4 connection badge: clickable copy affordance and feedback. */
[data-jph-header=mascot] .jph-connection[data-state=ready]{position:relative;cursor:pointer;user-select:none;transition:transform .16s ease,box-shadow .16s ease}
[data-jph-header=mascot] .jph-connection[data-state=ready]:hover{transform:rotate(-1deg) translateY(-2px);box-shadow:4px 5px 0 #3983eb}
[data-jph-header=mascot] .jph-connection[data-state=ready]:focus-visible{outline:3px solid #1761da;outline-offset:4px}
.jph-connection-copy-status{position:absolute;right:7px;bottom:-22px;z-index:5;padding:3px 7px;border:2px solid #19273b;border-radius:7px;background:#1761da;color:#fff;font:700 11px/1.2 Arial,'Malgun Gothic',sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .16s ease,transform .16s ease}
.jph-connection[data-copied=true] .jph-connection-copy-status{opacity:1;transform:translateY(0)}
.jph-connection-copy-hint{position:absolute;left:calc(100% + 2px);top:50%;display:block;padding:4px 5px;border:1px solid #b9d0f6;border-radius:7px;background:#fff;color:#1761da;font:800 10px/1.2 Arial,'Malgun Gothic',sans-serif;letter-spacing:-.02em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(3px,-50%);transition:opacity .16s ease,transform .16s ease}
.jph-connection[data-state=ready]:hover .jph-connection-copy-hint,.jph-connection[data-state=ready]:focus-visible .jph-connection-copy-hint{opacity:1;transform:translate(0,-50%)}
.jph-connection[data-state=unavailable] .jph-connection-copy-hint,.jph-connection[data-state=loading] .jph-connection-copy-hint{display:none}
@media(prefers-reduced-motion:reduce){[data-jph-header=mascot] .jph-connection[data-state=ready],.jph-connection-copy-status{transition:none}}
@media(min-width:701px) and (max-width:1399px){.jph-connection-copy-hint{left:auto;right:0;top:calc(100% + 7px);transform:translateY(-3px)}.jph-connection[data-state=ready]:hover .jph-connection-copy-hint,.jph-connection[data-state=ready]:focus-visible .jph-connection-copy-hint{transform:translateY(0)}}
@media(max-width:700px){.jph-connection-copy-hint{position:static;display:block;max-width:none;margin-top:1px;padding:0;border:0;border-radius:0;background:transparent;font-size:9px;opacity:1;transform:none;transition:none}.jph-connection[data-state=ready]:hover .jph-connection-copy-hint,.jph-connection[data-state=ready]:focus-visible .jph-connection-copy-hint{transform:none}}

body {
  font-size: var(--jp-readable-body);
  line-height: 1.72;
}

[data-jph-header] nav:not(.mobile-nav),
.header nav {
  font-size: 15px;
}

.nav-cta {
  font-size: 15px;
}

.jph-site-tools {
  font-size: 13px !important;
}

.jph-blog-link {
  font-size: 13px !important;
}

.jph-lang-button {
  min-width: 49px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

.jph-connection {
  min-width: 166px;
  max-width: 230px;
  font-size: 12px;
}

.jph-connection-caption {
  font-size: 11px;
}

.jph-connection strong {
  font-size: 13px;
}

.eyebrow,
.hero .eyebrow,
.plan-info .eyebrow {
  font-size: var(--jp-readable-label);
  line-height: 1.5;
}

.hero-description {
  font-size: 19px;
  line-height: 1.85;
}

.hero-bottom {
  font-size: 12px;
  line-height: 1.5;
}

.chapter-label,
.panel-caption {
  font-size: 14px;
  line-height: 1.45;
}

.button {
  font-size: 16px;
}

.pillars p,
.server-intro > div p,
.plan-info > p:not(.eyebrow),
.cloud-card > p,
.service-row p,
.traffic p,
.steps p,
.faq details p,
.mascot-story p {
  font-size: 16px;
}

.pillars b {
  font-size: 17px;
}

.text-link {
  font-size: 15px;
}

.journey-top,
.technical,
.traffic span {
  font-size: 12px;
}

.art-note,
.scroll-hint {
  font-size: 11px;
  line-height: 1.45;
}

.price small {
  font-size: 14px;
}

dl,
.cloud-card dl,
.horizontal .plan-info dl,
.cloud-layout .cloud-card dl {
  font-size: 15px;
}

.cloud-visual .section-heading > p,
.cloud-layout .cloud-card p {
  font-size: 16px;
}

.cloud-layout .cloud-card .eyebrow,
.closing .closing-copy > .eyebrow {
  font-size: 12px;
}

.cloud-layout .cloud-card .text-link {
  font-size: 15px;
}

.closing-copy .button {
  font-size: 16px;
}

.plan-dots button,
.plan-dots button span {
  font-size: 13px;
}

.note {
  font-size: 14px;
}

summary,
.faq summary {
  font-size: 17px;
  line-height: 1.55;
}

.options h3 {
  font-size: 20px;
}

.options p {
  font-size: 16px;
}

.service-no {
  font-size: 13px;
}

.service-price {
  font-size: 15px;
}

.steps span {
  font-size: 14px;
}

.jp-proof .jp-proof-kicker,
.jp-proof .jp-proof-tag {
  font-size: 13px;
}

.jp-proof .jp-proof-lead,
.jp-proof .jp-proof-copy {
  font-size: 17px;
}

.jp-proof .jp-proof-metric span,
.jp-proof .jp-proof-metric small,
.jp-proof .jp-proof-note,
.jp-proof .jp-proof-link,
.jp-proof .jp-proof-details summary,
.jp-proof .jp-proof-details p,
.jp-proof .jp-proof-bottom p,
.jp-proof-ribbon a {
  font-size: 15px;
}

.jp-proof .jp-proof-button {
  font-size: 16px;
}

.jp-proof-ribbon strong,
.jp-proof-ribbon b {
  font-size: 13px;
}

.detail .breadcrumb,
.detail-breadcrumb,
.detail-back {
  font-size: 15px;
}

.detail .detail-lead,
.detail .detail-description,
.detail .detail-flow,
.detail .detail-note,
.detail .detail-body p,
.detail .detail-body li,
.detail-bottom p,
.detail table {
  font-size: 17px;
  line-height: 1.8;
}

.detail th,
.detail td {
  padding: 14px;
}

.contact label,
.contact input,
.contact select,
.contact textarea,
.contact li,
.contact aside p,
#copy-state {
  font-size: 16px;
  line-height: 1.7;
}

.jpl-form-notice,
.jpl-form-notice button {
  font-size: 15px;
}

.jpl-page small,
.jpl-policy-end {
  font-size: 14px;
}

.jpl-policy-nav a {
  font-size: 15px;
}

.jpl-policy-copy p,
.jpl-policy-copy li {
  font-size: 17px;
  line-height: 1.9;
}

.jpl-dialog {
  font-size: 16px;
}

.jpl-dialog .jpl-policy-item summary {
  font-size: 16px !important;
}

.jpl-read-copy,
.jpl-read-copy p,
.jpl-read-copy li {
  font-size: 15px;
}

.jpl-ack,
.jpl-dialog-actions p {
  font-size: 14px;
}

.jpl-continue {
  font-size: 16px;
}

.jpl-footer {
  font-size: 15px !important;
}

.jpl-company p,
.jpl-company > a,
.jpl-footer nav a {
  font-size: 15px;
  line-height: 1.65;
}

.jpl-company small {
  font-size: 11px;
}

.jpl-footer-bottom {
  font-size: 13px;
}

/* Order/configurator: retain heading scale, raise instructional and option text. */
.order-main {
  font-size: 17px;
}

.order-main .order-hero p,
.order-section > .description {
  font-size: 17px;
  line-height: 1.75;
}

.order-hero .eyebrow,
.order-kicker {
  font-size: 13px;
}

.order-progress button {
  font-size: 18px;
}

.order-progress b {
  font-size: 16px;
}

.order-progress small {
  font-size: 14px;
}

.comic-cut,
.pick-card .tag {
  font-size: 12px;
}

.pick-card small {
  font-size: 15px;
  line-height: 1.55;
}

.choice-box > p,
.disabled-note,
.quote-notice,
.privacy-note,
.service-description {
  font-size: 15px;
  line-height: 1.7;
}

.option-list label,
.quantity-row,
.usage-options label,
.customer-grid label,
.order-section > label,
.customer-grid input,
.order-section textarea,
.step-actions button {
  font-size: 17px;
}

.option-list .unit,
.service-help {
  font-size: 14px;
}

.quote-lines div,
.summary-lines div {
  font-size: 16px;
}

.summary-plan small,
.summary-hint {
  font-size: 14px;
}

.message-preview textarea {
  font-size: 15px;
  line-height: 1.7;
}

.order-aside .stage-caption p,
.order-aside .assembly-top,
.order-aside .assembly-bottom,
.order-aside .module b {
  font-size: 13px;
}

.order-aside .stage-caption span,
.order-aside .stage-services p,
.order-aside .stage-note {
  font-size: 14px;
}

.order-aside .assembly-title,
.order-aside .module span,
.order-aside .stage-services span {
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .jph-site-tools {
    font-size: 12px !important;
  }

  .jph-blog-link {
    font-size: 12px !important;
  }

  .jph-lang-button {
    min-width: 45px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  .jph-connection {
    min-width: 146px;
    padding: 7px 9px !important;
  }
}

@media (min-width: 901px) {
  body {
    font-size: 19px;
  }

  [data-jph-header] nav:not(.mobile-nav),
  .header nav {
    font-size: 17px;
  }

  .nav-cta {
    font-size: 16px;
  }

  .jph-site-tools,
  .jph-blog-link {
    font-size: 15px !important;
  }

  .jph-lang-button {
    min-width: 54px !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .jph-connection {
    min-width: 190px;
    max-width: 260px;
    padding: 9px 14px !important;
  }

  .jph-connection-caption,
  .jph-connection-caption b {
    font-size: 13px;
  }

  .jph-connection strong {
    font-size: 15px;
  }

  .eyebrow,
  .hero .eyebrow,
  .plan-info .eyebrow,
  .cloud-layout .cloud-card .eyebrow,
  .closing .closing-copy > .eyebrow {
    font-size: 15px;
  }

  .chapter-label,
  .panel-caption {
    font-size: 16px;
  }

  .hero-description {
    font-size: 21px;
  }

  .button,
  .closing-copy .button {
    font-size: 17px;
  }

  .pillars p,
  .server-intro > div p,
  .plan-info > p:not(.eyebrow),
  .cloud-card > p,
  .cloud-layout .cloud-card p,
  .cloud-visual .section-heading > p,
  .service-row p,
  .traffic p,
  .steps p,
  .faq details p,
  .mascot-story p {
    font-size: 18px;
  }

  .pillars b {
    font-size: 20px;
  }

  .text-link,
  .cloud-layout .cloud-card .text-link {
    font-size: 17px;
  }

  .journey-top,
  .journey-top a {
    font-size: 15px;
  }

  .plan-art .technical,
  .technical {
    font-size: 14px;
  }

  .plan-art .art-note,
  .art-note {
    font-size: 13px;
    line-height: 1.55;
  }

  .scroll-hint {
    font-size: 14px;
  }

  .price small {
    font-size: 16px;
  }

  dl,
  .cloud-card dl,
  .horizontal .plan-info dl,
  .cloud-layout .cloud-card dl {
    font-size: 17px;
  }

  .plan-dots button,
  .plan-dots button span {
    font-size: 15px;
  }

  .note,
  .service-price,
  .steps span {
    font-size: 16px;
  }

  .service-no,
  .traffic a span {
    font-size: 15px;
  }

  summary,
  .faq summary {
    font-size: 18px;
  }

  .jp-proof .jp-proof-kicker,
  .jp-proof .jp-proof-tag,
  .jp-proof-ribbon strong,
  .jp-proof-ribbon b {
    font-size: 15px;
  }

  .jp-proof .jp-proof-lead,
  .jp-proof .jp-proof-copy {
    font-size: 18px;
  }

  .jp-proof .jp-proof-metric span,
  .jp-proof .jp-proof-metric small,
  .jp-proof .jp-proof-note,
  .jp-proof .jp-proof-link,
  .jp-proof .jp-proof-details summary,
  .jp-proof .jp-proof-details p,
  .jp-proof .jp-proof-bottom p,
  .jp-proof-ribbon a {
    font-size: 16px;
  }

  .detail .breadcrumb,
  .detail-breadcrumb,
  .detail-back {
    font-size: 17px;
  }

  .detail .detail-lead,
  .detail .detail-description,
  .detail .detail-flow,
  .detail .detail-note,
  .detail .detail-body p,
  .detail .detail-body li,
  .detail-bottom p,
  .detail table,
  .contact label,
  .contact input,
  .contact select,
  .contact textarea,
  .contact li,
  .contact aside p,
  #copy-state,
  .jpl-policy-copy p,
  .jpl-policy-copy li {
    font-size: 18px;
  }

  .order-main,
  .order-main .order-hero p,
  .order-section > .description,
  .option-list label,
  .quantity-row,
  .usage-options label,
  .customer-grid label,
  .order-section > label,
  .customer-grid input,
  .order-section textarea,
  .step-actions button {
    font-size: 18px;
  }

  .jpl-footer {
    color: #15345c !important;
    border-top-color: #9fb5d1 !important;
  }

  .jpl-footer nav h3 {
    font-size: 13px;
    letter-spacing: .11em;
  }

  .jpl-company p,
  .jpl-company > a,
  .jpl-footer nav a {
    color: #29486f !important;
    font-size: 17px;
    font-weight: 600;
  }

  .jpl-company small {
    color: #456486 !important;
    font-size: 13px;
  }

  .jpl-footer-bottom,
  .jpl-footer-bottom span,
  .jpl-footer-bottom a {
    color: #365778 !important;
    font-size: 15px;
    font-weight: 600;
  }
}

@media (max-width: 700px) {
  :root {
    --jp-readable-body: 16px;
    --jp-readable-small: 14px;
  }

  .nav-cta {
    font-size: 13px !important;
  }

  .hero .eyebrow {
    font-size: 11px;
  }

  .chapter-label,
  .panel-caption {
    font-size: 13px;
  }

  .hero-description {
    font-size: 17px;
  }

  .hero-bottom {
    font-size: 10px;
  }

  .hero-bottom > span:last-child {
    font-size: 10px;
  }

  .service-row p,
  .steps p,
  .faq details p,
  .options p {
    font-size: 15px;
  }

  .detail .detail-lead,
  .detail .detail-description,
  .detail .detail-flow,
  .detail .detail-note,
  .detail .detail-body p,
  .detail .detail-body li,
  .detail-bottom p,
  .detail table {
    font-size: 16px;
  }

  .jpl-footer nav a,
  .jpl-company p,
  .jpl-company > a {
    font-size: 15px;
  }

  .jpl-footer-bottom {
    font-size: 12px;
  }

  .order-main,
  .order-main .order-hero p,
  .order-section > .description,
  .option-list label,
  .quantity-row,
  .usage-options label,
  .customer-grid label,
  .order-section > label,
  .customer-grid input,
  .order-section textarea,
  .step-actions button {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .jph-site-tools {
    gap: 5px;
  }

  .jph-blog-link {
    display: none !important;
  }

  .jph-connection {
    min-width: 132px;
    max-width: 148px;
  }

  .jph-connection-caption {
    font-size: 9px;
  }

  .jph-connection strong {
    font-size: 11px;
  }
}
