/* WMOL Harbor light palette. Page-scoped to leave other product surfaces intact. */
html.wmol-shrm, html.wmol-shrm body, html:has(.shrm-page), html:has(.shrm-page) body {
  background:#F5F7F9 !important; color-scheme:light; height:auto !important;
  min-height:100%; overflow:visible !important;
}
html.wmol-shrm body > main, html:has(.shrm-page) body > main {
  display:block; width:100%; max-width:none; height:auto !important; min-height:100vh;
  margin:0; padding:0; overflow:visible !important;
}
html.wmol-shrm .wmol-phone-backdrop {background:#F5F7F9 !important;}
/* Retain the shared portrait-width phone composition when rotated, while
   allowing the entire long page to remain reachable in the shorter window. */
html.wmol-shrm.wmol-phone-device.wmol-phone-landscape body > main {
  height:auto !important; min-height:100vh !important; overflow:visible !important;
}
#shrmPage {
  --hs-density:.9; --hs-label-size:1rem; --hs-bg:#F5F7F9; --hs-ink:#3D4A55; --hs-muted:rgba(61,74,85,.68);
  --hs-voice:#5C628F; --hs-voice-muted:#696E90; --hs-accent:#68A398;
  --hs-line:rgba(61,74,85,.22); --hs-wash:rgba(61,74,85,.055);
  --hs-card:rgba(61,74,85,.045); --hs-accent-soft:rgba(104,163,152,.16);
  isolation:isolate; position:relative; width:100%; min-width:0;
  background:var(--hs-bg); color:var(--hs-ink); font:1rem/1.65 Arial,Helvetica,sans-serif;
  overflow-wrap:anywhere; text-align:left; -webkit-text-fill-color:currentColor;
}
#shrmPage *, #shrmPage *::before, #shrmPage *::after {box-sizing:border-box;}
#shrmPage :where(h1,h2,h3,h4,p,ul,ol,li,span,small,strong,em,details,summary,figcaption) {color:inherit;}
#shrmPage :where(button,a) {font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;}
#shrmPage a {text-underline-offset:4px; text-decoration-color:var(--hs-accent);}
#shrmPage button {cursor:pointer;}
#shrmPage :where(a,button,summary,[tabindex]):focus-visible {outline:2px solid var(--hs-accent); outline-offset:5px;}
#shrmPage [hidden] {display:none !important;}
#shrmPage p {margin:0 0 1rem;}
#shrmPage strong {font-weight:700;}
#shrmPage img {max-width:100%; height:auto;}
#shrmPage .hs-wrap {width:min(calc(100% / var(--hs-density)),1120px); zoom:var(--hs-density); margin-inline:auto; padding-inline:clamp(16px,4.4vw,58px);}
#shrmPage .hs-top {display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:90px; padding-block:18px; border-bottom:1px solid var(--hs-line);}
#shrmPage .hs-back {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid var(--hs-accent); border-radius:6px; font-size:.875rem; line-height:1; text-decoration:none; flex-shrink:0;}
#shrmPage .hs-back svg {display:block; flex:0 0 18px; color:var(--hs-accent);}
#shrmPage .hs-back:hover {background:var(--hs-accent-soft);}
#shrmPage .hs-brand {color:var(--hs-accent); margin-left:auto; text-align:left; font-size:1.125rem; font-weight:500; letter-spacing:.08em; line-height:1.35;}
#shrmPage .hs-brand small {display:block; margin-top:4px; font-size:.75rem; font-weight:400; letter-spacing:.01em; color:var(--hs-accent);}
#shrmPage .hs-hero {position:relative; text-align:center; max-width:976px; margin:auto; padding-block:42px 34px;}
#shrmPage .hs-credential {color:var(--hs-accent); white-space:nowrap;}
#shrmPage .hs-independent {font-size:.91rem; line-height:1.65; color:var(--hs-ink); margin:12px auto 24px; text-wrap:balance;}
#shrmPage h1 {font:400 clamp(2.1rem,4.5vw,3.55rem)/1.12 Georgia,'Times New Roman',serif; letter-spacing:-.035em; color:var(--hs-accent); margin:0 auto; max-width:800px; text-wrap:balance; overflow-wrap:normal;}
#shrmPage .hs-subtitle {font:400 clamp(1.4rem,2.7vw,2rem)/1.3 Georgia,'Times New Roman',serif; letter-spacing:-.02em; color:var(--hs-voice); margin:0 auto 18px; text-wrap:balance;}
#shrmPage .hs-hero-copy {font-size:calc(1.003125rem / var(--hs-density)); line-height:1.75; color:var(--hs-voice); max-width:73.2ch; margin:0 auto 24px;}
#shrmPage .hs-platforms {display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
#shrmPage .hs-download {display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px; min-height:56px; padding:9px 17px; border:1px solid var(--hs-line); border-radius:9px; background:var(--hs-wash); text-decoration:none; font-size:.875rem;}
#shrmPage .hs-download small {font-size:.6875rem; color:var(--hs-ink);}
#shrmPage .hs-download[aria-disabled="true"] {cursor:default;}
#shrmPage .hs-download[href]:hover {background:var(--hs-accent-soft); border-color:var(--hs-accent);}
#shrmPage .hs-tour {margin:0 0 42px;}
#shrmPage .hs-slide {margin:0;}
#shrmPage .hs-stage {display:flex; align-items:center; justify-content:center; padding:18px; min-height:492px;}
#shrmPage .hs-shot {position:relative; display:grid; place-items:center; padding:0; border:1px solid var(--hs-line); border-radius:15px; background:var(--hs-bg); max-width:100%; overflow:hidden; box-shadow:0 0 0 12px var(--hs-card); cursor:zoom-in; appearance:none;}
#shrmPage .hs-shot:disabled {cursor:default; opacity:1;}
#shrmPage .hs-shot.hs-portrait {width:210px; aspect-ratio:var(--hs-shot-ratio,997 / 2048);}
#shrmPage .hs-shot.hs-landscape {width:min(100%,680px); aspect-ratio:var(--hs-shot-ratio,1917 / 1015);}
#shrmPage .hs-shot img {display:block; width:100%; height:100%; object-fit:contain; position:absolute; inset:0;}
#shrmPage .hs-placeholder {padding:20px; text-align:center; color:var(--hs-muted);}
#shrmPage .hs-placeholder > span {display:block; font:400 1.4rem/1.3 Georgia,serif; color:var(--hs-ink); margin-bottom:12px;}
#shrmPage .hs-placeholder small {display:block; font-size:.75rem;}
#shrmPage .hs-caption {text-align:center; max-width:805.2px; margin:22px auto 16px; color:var(--hs-voice);}
#shrmPage .hs-caption h2 {font:400 clamp(1.65rem,3vw,1.9rem)/1.25 Georgia,serif; letter-spacing:-.02em; color:var(--hs-voice); margin:0 0 10px;}
#shrmPage .hs-caption p {font-size:.9375rem; line-height:1.7; max-width:75.64ch; margin:0 auto;}
#shrmPage .hs-tour-controls {display:flex; justify-content:center; align-items:center; gap:15px; margin-bottom:17px;}
#shrmPage .hs-tour-controls button {width:44px; min-height:44px; border:1px solid var(--hs-line); border-radius:50%; background:transparent; color:var(--hs-accent); font-size:1.2rem;}
#shrmPage .hs-tour-controls button:hover {background:var(--hs-accent-soft);}
#shrmPage .hs-count {font-size:.75rem; min-width:42px; text-align:center; color:var(--hs-muted);}
#shrmPage .hs-thumbnails {display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; max-width:850px; margin:auto;}
#shrmPage .hs-thumbnail {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; min-width:0; min-height:44px; padding:5px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--hs-muted);}
#shrmPage .hs-thumbnail .hs-mini {width:35px; height:62px; display:grid; place-items:center; background:var(--hs-wash); border:1px solid var(--hs-line); border-radius:4px; overflow:hidden;}
#shrmPage .hs-thumbnail.hs-landscape .hs-mini {width:65px; max-width:100%; height:38px; margin-block:12px;}
#shrmPage .hs-mini img {width:100%; height:100%; object-fit:contain;}
#shrmPage .hs-mini > span {font-size:.75rem;}
#shrmPage .hs-thumbnail[aria-pressed="true"] {color:var(--hs-ink); background:var(--hs-accent-soft); border-color:var(--hs-accent);}
#shrmPage .hs-thumbnail small {font-size:.6875rem; line-height:1.4;}
#shrmPage .hs-no-js {font-size:.8125rem; text-align:center; color:var(--hs-muted);}
#shrmPage .hs-explore {padding-block:10px 8px;}
#shrmPage .hs-section-intro {text-align:center; margin:0 auto 24px; font:400 clamp(1.65rem,3vw,1.95rem)/1.25 Georgia,serif; color:var(--hs-accent); letter-spacing:-.02em;}
#shrmPage .hs-two-columns {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px;}
#shrmPage .hs-questions {min-width:0;}
#shrmPage .hs-questions details {border-bottom:1px solid var(--hs-line);}
#shrmPage .hs-questions details:first-child {border-top:1px solid var(--hs-line);}
#shrmPage summary {cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:56px; padding:15px 7%; font-size:var(--hs-label-size); color:var(--hs-voice);}
#shrmPage summary::-webkit-details-marker {display:none;}
#shrmPage summary::marker {content:'';}
#shrmPage summary::after {content:'+'; color:var(--hs-accent); font-size:1.4rem; line-height:1; flex-shrink:0;}
#shrmPage details[open] > summary::after {content:'−';}
#shrmPage .hs-answer {padding:0 7% 8px; color:var(--hs-voice);}
#shrmPage .hs-answer h3 {font:400 1.5rem/1.3 Georgia,serif; letter-spacing:-.01em; color:var(--hs-voice); margin:4px 0 16px;}
#shrmPage .hs-answer p, #shrmPage .hs-answer li {font-size:.9375rem; line-height:1.75;}
#shrmPage .hs-answer ul {margin:0 0 18px; padding-left:1.3em;}
#shrmPage .hs-answer li {padding-left:3px; margin-bottom:5px;}
#shrmPage .hs-answer strong {color:var(--hs-voice);}
#shrmPage .hs-answer .hs-proof-note {font-size:.75rem; line-height:1.6; color:var(--hs-ink);}
#shrmPage .hs-evidence {margin:0 0 16px; border:1px solid var(--hs-line); border-radius:10px; padding:12px;}
#shrmPage .hs-evidence img {display:block; width:auto; max-height:480px; margin:auto; object-fit:contain;}
#shrmPage .hs-evidence figcaption {font-size:.75rem;}
#shrmPage .hs-pricing-disclosure {margin-top:24px; border-block:1px solid var(--hs-line);}
#shrmPage .hs-pricing {max-width:680px; margin-inline:auto; padding:14px 7% 20px; color:var(--hs-voice);}
#shrmPage .hs-pricing p {font-size:.9375rem; line-height:1.75;}
#shrmPage .hs-pricing .hs-price {font:400 clamp(2.2rem,4vw,2.7rem)/1.2 Georgia,serif; color:var(--hs-accent); margin:0 0 18px;}
#shrmPage .hs-price span {font:400 .875rem/1.4 Arial,sans-serif; color:var(--hs-accent); white-space:nowrap;}
#shrmPage .hs-pricing .hs-price-promise {font-size:1.125rem; line-height:1.5; color:var(--hs-voice); margin-bottom:22px;}
#shrmPage .hs-start-copy {margin-top:22px; color:var(--hs-voice);}
#shrmPage .hs-pricing .hs-billing {font-size:.75rem; line-height:1.75; color:var(--hs-ink); margin-top:24px;}
#shrmPage .hs-closing {padding-block:38px 26px; text-align:center;}
#shrmPage .hs-quote {font:400 clamp(1.9rem,4vw,2.5rem)/1.25 Georgia,serif; letter-spacing:-.02em; color:var(--hs-accent); margin:0 0 16px; border:0; padding:0;}
#shrmPage .hs-affiliation {font-size:.6875rem; line-height:1.7; color:var(--hs-ink); max-width:94ch; margin:0 auto; text-wrap:balance;}
#shrmPage .hs-footer {padding-block:20px max(30px,env(safe-area-inset-bottom)); border-top:1px solid var(--hs-line);}
#shrmPage .hs-footer-row {display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:start; gap:16px;}
#shrmPage .hs-footer-brand {font-size:var(--hs-label-size); font-weight:400; color:var(--hs-voice); line-height:1.6; margin:0; text-align:center; justify-self:start;}
#shrmPage .hs-footer-brand span {display:block;}
#shrmPage .hs-footer-nav {grid-column:2; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; justify-self:end; gap:0 20px; min-width:0; max-width:100%; margin:0;}
/* The text underline is independent of the generous invisible touch target. */
#shrmPage .hs-footer-nav a {display:inline-flex; align-items:flex-start; min-height:44px; padding-block:0 12px; font-size:var(--hs-label-size); line-height:1.6; text-decoration-line:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:4px; white-space:nowrap;}
#shrmPage .hs-footer-nav a[aria-selected="true"] {text-decoration-color:var(--hs-accent);}
#shrmPage .hs-footer-panel {max-width:700px; margin:24px auto 0; scroll-margin-top:20px;}
#shrmPage .hs-footer-content {padding-block:0 16px;}
#shrmPage #hs-contact {color:var(--hs-voice);}
#shrmPage #hs-contact a {color:var(--hs-accent); overflow-wrap:anywhere;}
#shrmPage .hs-footer-panel h2 {font:400 clamp(1.4rem,2.7vw,1.7rem)/1.3 Georgia,serif; margin:0 0 14px;}
#shrmPage .hs-footer-panel p {font-size:.875rem; line-height:1.75;}
#shrmPage .hs-policy-text {white-space:pre-wrap; font-size:.875rem; line-height:1.75; color:var(--hs-ink);}
/* Use the stacked composition when a browser window narrows or turns portrait,
   including desktop split-screen windows that are not detected as phones. */
@media(max-width:1024px), (orientation:portrait) {
  #shrmPage .hs-two-columns {grid-template-columns:minmax(0,1fr); gap:0;}
  #shrmPage .hs-questions + .hs-questions details:first-child {border-top:0;}
  #shrmPage .hs-thumbnails {grid-template-columns:repeat(4,minmax(0,1fr)); max-width:470px;}
  #shrmPage .hs-pricing-disclosure {margin-top:0; border-top:0;}
  #shrmPage .hs-footer-row {gap:14px;}
  #shrmPage .hs-footer-nav {column-gap:12px;}
  #shrmPage .hs-footer-panel {max-width:100%;}
}
@media(max-width:430px) {
  #shrmPage .hs-top {gap:18px; min-height:80px;}
  #shrmPage .hs-hero {padding-block:32px 28px;}
  #shrmPage .hs-platforms {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:340px; margin:auto;}
  #shrmPage .hs-download {min-width:0;}
  #shrmPage .hs-stage {min-height:468px; padding:18px 12px;}
  #shrmPage .hs-shot.hs-portrait {width:198px;}
  #shrmPage .hs-footer-nav {column-gap:9px;}
  #shrmPage .hs-footer-row {column-gap:10px;}
}

/* Phones use their actual layout viewport, without the desktop zoom/over-width
   combination. Keep browser pinch zoom available and retain portrait composition
   when the shared phone shell is rotated. Relative type sizing retains the
   approved compact text without scaling the page's coordinate system. */
html.wmol-shrm.wmol-phone-device {font-size:90%;}
html.wmol-shrm.wmol-phone-device #shrmPage {--hs-density:1;}
html.wmol-shrm.wmol-phone-device #shrmPage .hs-wrap {width:100%; max-width:1120px; zoom:1;}
html.wmol-shrm.wmol-phone-device #shrmPage .hs-hero-copy {font-size:calc(1.003125rem / .9);}
@media(max-width:1024px), (orientation:portrait) {
  html.wmol-shrm {font-size:90%;}
  #shrmPage {--hs-density:1;}
  #shrmPage .hs-wrap {width:100%; zoom:1;}
  #shrmPage .hs-hero-copy {font-size:calc(1.003125rem / .9);}
}
html.wmol-shrm, html.wmol-shrm body {width:100%; max-width:100%; margin:0; overflow-x:clip !important;}
html.wmol-shrm body > main {min-width:0; max-width:100%;}
html.wmol-shrm.wmol-phone-device.wmol-phone-landscape #shrmPage .hs-two-columns {grid-template-columns:minmax(0,1fr); gap:0;}
html.wmol-shrm.wmol-phone-device.wmol-phone-landscape #shrmPage .hs-thumbnails {grid-template-columns:repeat(4,minmax(0,1fr));}

/* Native top-layer viewer lives outside the zoomed content wrapper. Close button,
   image, and caption occupy separate rows, including on short phone screens. */
html.wmol-shrm.hs-viewer-open, html.wmol-shrm.hs-viewer-open body {overflow:hidden !important;}
#shrmPage .hs-viewer {
  position:fixed; inset:0; box-sizing:border-box; margin:0;
  width:100%; max-width:none; height:100vh; height:100dvh; max-height:none;
  padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  border:0; background:transparent; color:#F5F7F9; overflow:hidden;
  grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:12px;
  font:1rem/1.5 Arial,Helvetica,sans-serif; text-align:center;
}
#shrmPage .hs-viewer:not([open]) {display:none;}
#shrmPage .hs-viewer[open] {display:grid;}
#shrmPage .hs-viewer::backdrop {background:rgba(25,39,49,.76);}
#shrmPage .hs-viewer-toolbar {display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0;}
#shrmPage .hs-viewer button {display:grid; place-items:center; min-width:44px; min-height:44px; padding:6px 12px; border:1px solid rgba(245,247,249,.4); border-radius:6px; background:rgba(25,39,49,.84); color:#F5F7F9; line-height:1; font-size:1rem;}
#shrmPage .hs-viewer button:hover {background:#3D4A55;}
#shrmPage .hs-viewer .hs-viewer-close {font-size:1.6rem; padding:0;}
#shrmPage .hs-viewer-viewport {min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; border-radius:8px;}
#shrmPage .hs-viewer-canvas {display:flex; align-items:center; justify-content:center; width:max-content; height:max-content; min-width:100%; min-height:100%; padding:8px;}
#shrmPage .hs-viewer-image {display:block; flex:none; width:auto; height:auto; max-width:none; max-height:none; border:0; border-radius:6px; object-fit:contain; user-select:none; -webkit-user-drag:none;}
#shrmPage .hs-viewer.is-zoomed .hs-viewer-viewport {cursor:grab;}
#shrmPage .hs-viewer.is-panning .hs-viewer-viewport {cursor:grabbing;}
#shrmPage .hs-viewer-caption {width:min(100%,850px); justify-self:center; max-height:22vh; max-height:22dvh; overflow:auto; overscroll-behavior:contain; text-align:center;}
#shrmPage .hs-viewer-caption h2 {font:400 clamp(1.1rem,2vw,1.4rem)/1.3 Georgia,serif; color:#F5F7F9; margin:0 0 6px;}
#shrmPage .hs-viewer-caption p {font-size:.9375rem; color:#F5F7F9; line-height:1.5; margin:0;}
@media(max-width:350px) {
  #shrmPage .hs-footer-row {row-gap:12px;}
  #shrmPage .hs-footer-nav {width:100%; column-gap:14px;}
}
@media(prefers-reduced-motion:reduce) {
  #shrmPage *, #shrmPage *::before, #shrmPage *::after {scroll-behavior:auto !important; transition:none !important; animation:none !important;}
}

/* Desktop keeps its local 90% content surface; phones use normal layout sizing. */
#shrmPage, #shrmPage * {caret-color:transparent !important;}
#shrmPage :is(input,textarea,[contenteditable]:not([contenteditable="false"])),
#shrmPage [contenteditable]:not([contenteditable="false"]) * {caret-color:auto !important;}
#shrmPage :is(.hs-back,.hs-download,.hs-tour-controls button,.hs-thumbnail,.hs-footer-nav a) {
  min-height:calc(44px / var(--hs-density));
}
#shrmPage .hs-tour-controls button {width:calc(44px / var(--hs-density));}
/* Let the desktop sentence use the available width; small windows wrap normally. */
@media(min-width:901px) {
  #shrmPage .hs-subtitle {font-size:clamp(1.4rem,2.3vw,2rem); text-wrap:wrap;}
}
@supports not (zoom: .9) {
  #shrmPage {--hs-density:1;}
}
/* Desktop pricing alignment: retain phone pricing padding.
   Each upper column is (full width - 40px gap) / 2. Its 7% inset is
   therefore 3.5% of the full width minus 1.4px. */
@media(min-width:1025px) and (orientation:landscape) {
  html:not(.wmol-phone-device) #shrmPage .hs-pricing-disclosure > summary {
    padding-inline:calc(3.5% - 1.4px);
  }
}
