#view-services .service-intro-band { padding-block: 24px; }
#view-services .service-intro-band h1 { color: #172326; font-size: 36px; margin: 8px 0 16px; }
#view-services .service-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#view-services .service-action-row > span { flex: 1 1 320px; font-size: 14px; line-height: 1.8; }
#serviceLiveCheck { scroll-margin-top: 24px; border-block: 1px solid #d9e3e3; }
.service-live-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 24px; }
.service-live-heading h2 { margin: 4px 0 8px; font-size: 30px; color: #172326; }
.service-live-heading p:last-child { margin: 0; color: #52666b; font-size: 14px; line-height: 1.7; }
.service-live-samples { flex: none; color: #116c75; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.service-live-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 24px 44px; align-items: start; }
.service-live-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-live-form label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-width: 0; color: #2d4147; font-size: 14px; font-weight: 700; }
.service-live-form label span { color: #61767b; font-weight: 400; }
.service-live-form input { grid-column: 1 / -1; box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 9px 12px; border: 1px solid #c8d6d8; border-radius: 4px; color: #172b30; background: #fff; font: inherit; }
.service-live-form input:focus-visible, .service-live-actions button:focus-visible, .service-live-samples:focus-visible { outline: 3px solid #157380; outline-offset: 3px; }
.service-live-output { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; padding: 19px 22px; border: 1px solid #d3e2e2; border-radius: 6px; background: #f5faf9; }
.service-live-result { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.service-live-result span { flex-basis: 100%; color: #536c70; font-size: 12px; }
.service-live-result strong { color: #0d555d; font-size: 25px; }
.service-live-result small { color: #566d72; font-size: 12px; }
.service-live-status { grid-column: 1 / -1; margin: 4px 0 0; color: #17636a; font-size: 13px; line-height: 1.6; }
.service-live-status[data-state="over"], .service-live-status[data-state="invalid"] { color: #ad4c2f; }
.service-live-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.service-live-actions button:disabled { cursor: not-allowed; opacity: 0.55; }
.service-live-note { margin: 20px 0 0; max-width: 1200px; color: #5a6c70; font-size: 12px; line-height: 1.8; }
#serviceExperience { scroll-margin-top: 24px; padding-top: 24px; padding-bottom: 38px; }
.service-experience-band .section-heading > p:last-child { max-width: 850px; }
.service-sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-sample { min-width: 0; display: flex; flex-direction: column; border: 1px solid #dce3e4; border-radius: 6px; padding: 16px; background: #fff; }
.service-sample-image { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: #f4f6f7; margin: -16px -16px 16px; border-bottom: 1px solid #e3e7e9; }
.service-sample-image img { width: 100%; height: 100%; object-fit: contain; }
.service-sample-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.service-sample-title h3 { margin: 0; font-size: 20px; color: #172326; }
.service-sample-title strong { color: #a9442b; font-size: 18px; white-space: nowrap; }
.service-sample > p, .service-scope-tool p { color: #55656a; font-size: 14px; line-height: 1.7; }
.service-sample dl { margin: 8px 0 16px; display: grid; gap: 8px; }
.service-sample dl div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.7; }
.service-sample dt { font-weight: 700; color: #12676e; }
.service-sample dd { margin: 0; color: #3d4b51; }
.service-sample-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.service-sample-actions a { font-size: 14px; color: #116c75; text-decoration: underline; text-underline-offset: 4px; }
.service-sample-actions span { color: #617176; font-size: 12px; }
.service-sample > .service-sample-actions { margin-top: auto; margin-bottom: 16px; }
.service-sample > button { align-self: flex-start; }
.service-price-boundary { margin: 20px 0 0; color: #59686d; font-size: 13px; line-height: 1.8; }
.service-member-note { margin-top: 24px; }
.service-scope-tool { margin-top: 32px; padding-top: 28px; border-top: 1px solid #dce3e4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px 40px; }
.service-scope-tool h3 { margin: 4px 0 10px; font-size: 24px; }
#serviceScopeForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
#serviceScopeForm label { display: grid; gap: 8px; min-width: 0; color: #30444a; font-size: 14px; font-weight: 600; }
#serviceScopeForm select, #serviceScopeForm textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #cbd7da; border-radius: 4px; padding: 12px; font: inherit; color: #263b41; background: #fff; }
#serviceScopeForm textarea { resize: vertical; min-height: 92px; font-weight: 400; }
.service-scope-wide { grid-column: 1 / -1; }
#serviceScopeForm button { justify-self: start; }
.service-scope-result { grid-column: 2; padding: 20px; background: #f3f8f8; border-left: 3px solid #157380; }
.service-scope-result[hidden] { display: none; }
.service-scope-result h4 { margin: 0 0 12px; font-size: 18px; }
.service-scope-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.9; color: #34474e; margin: 0 0 18px; }
.service-support-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #dce3e4; font-size: 14px; }
.service-support-row span { flex: 1 1 280px; line-height: 1.8; color: #59686d; }
.service-issue-guide { margin-top: 20px; padding: 18px 0; border-top: 1px solid #dce3e4; font-size: 14px; line-height: 1.8; }
.service-issue-guide summary { cursor: pointer; font-weight: 700; color: #30444a; }
.service-issue-guide p { max-width: 980px; color: #59686d; }
.service-issue-guide a { color: #116c75; text-decoration: underline; }
.service-sample a:focus-visible, #serviceExperience button:focus-visible { outline: 3px solid #157380; outline-offset: 4px; }
@media (max-width: 980px) {
  .service-live-layout { grid-template-columns: 1fr; }
  .service-live-output { max-width: 680px; }
  .service-sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-scope-tool { grid-template-columns: 1fr; }
  .service-scope-result { grid-column: 1; }
}
@media (max-width: 640px) {
  #view-services .service-intro-band { padding-block: 16px; }
  #view-services .service-intro-band h1 { margin: 4px 0 12px; }
  #view-services .service-action-row > span, #view-services .service-action-row > button:first-child { display: none; }
  #serviceExperience { padding-top: 8px; }
  #serviceExperience .section-heading h2 { font-size: 24px; }
  .service-live-heading { align-items: start; flex-direction: column; }
  .service-live-heading h2 { font-size: 24px; }
  .service-live-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-live-output { padding: 16px; }
  .service-live-result strong { font-size: 21px; }
  .service-sample-grid, #serviceScopeForm { grid-template-columns: 1fr; }
  .service-sample-title h3 { font-size: 18px; }
  .service-scope-tool h3 { font-size: 21px; }
  .service-sample-image { aspect-ratio: 16 / 10; }
  #view-services .service-intro-band h1 { font-size: 28px; }
}