/* R21 — Interactive iPhone viewer. Scoped to the new dialog and inline switchers;
   the published MEMM architecture illustration and all other pages remain intact. */
.r21-modal-open {overflow:hidden;}
.r21-dialog:not([open]), .r21-dialog [hidden] {display:none!important;}
.r21-dialog {
  position:fixed;inset:0;margin:auto;
  width:min(1060px,calc(100vw - 32px));max-width:none;max-height:min(94dvh,1000px);
  padding:0;border:1px solid #3c7585;border-radius:25px;
  color:#193b5a;background:#f7fbfd;overflow:auto;
  box-shadow:0 28px 90px rgba(0,12,32,.50);
  overscroll-behavior:contain;
}
.r21-dialog::backdrop {background:rgba(0,13,29,.84);backdrop-filter:blur(9px);}
.r21-dialog__surface {min-width:0;}
.r21-dialog__header {position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:start;gap:18px;
  padding:17px clamp(17px,3vw,33px);border-bottom:1px solid #d8e7ee;
  background:rgba(250,254,255,.97);backdrop-filter:blur(12px);}
.r21-dialog__eyebrow {display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:850;color:#307d83;}
.r21-dialog__header h2 {font-size:clamp(1.18rem,2.2vw,1.62rem);line-height:1.18;letter-spacing:-.025em;margin:5px 0 0;color:#112e4c;}
.r21-dialog__close {flex:0 0 43px;height:43px;display:grid;place-items:center;border-radius:50%;border:1px solid #d0e4eb;background:#fff;color:#17364b;font-size:1.75rem;line-height:1;cursor:pointer;}
.r21-dialog__close:hover {background:#e8f5f4;}
.r21-dialog__gallery {display:grid;grid-template-columns:minmax(240px,1.07fr) minmax(260px,.93fr);gap:clamp(18px,4vw,42px);align-items:start;padding:25px clamp(17px,4vw,45px) 17px;}
.r21-dialog__device-column {min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;}
.r21-dialog__device {display:inline-grid;position:relative;place-items:center;align-self:flex-start;max-width:100%;isolation:isolate;margin-top:6px;}
.r21-dialog__device img {display:block;width:auto;height:auto;max-height:min(66dvh,705px);max-width:min(100%,370px);object-fit:contain;filter:drop-shadow(0 19px 20px rgba(18,38,61,.16));}
.r21-dialog__device--wide img {max-width:min(100%,510px);max-height:57dvh;border-radius:13px;filter:drop-shadow(0 16px 25px rgba(18,38,61,.15));}
.r21-dialog__hotspots {position:absolute;inset:0;pointer-events:none;}
.r21-dialog__hotspot {position:absolute;display:block;pointer-events:auto;cursor:pointer;background:transparent;border:2px solid transparent;border-radius:11px;padding:0;transition:background-color .18s,border-color .18s;}
.r21-dialog__hotspot:hover,.r21-dialog__hotspot:focus-visible {background:rgba(14,182,172,.13);border-color:#18a69c;box-shadow:0 0 0 2px rgba(255,255,255,.8);outline:none;}
.r21-dialog__tap-hint {margin:12px 0 0;color:#627f93;text-align:center;font-size:.75rem;line-height:1.45;max-width:42ch;}
.r21-dialog__details {align-self:center;min-width:0;}
.r21-dialog__counter {font-size:.69rem;letter-spacing:.14em;font-weight:850;color:#259c99;text-transform:uppercase;}
.r21-dialog__details h3 {font-size:clamp(1.44rem,2.4vw,2.05rem);line-height:1.15;color:#0e2d51;margin:10px 0 12px;}
.r21-dialog__details>p {font-size:.91rem;line-height:1.65;color:#49677f;margin:0 0 22px;}
.r21-dialog__pager {display:flex;gap:10px;margin:0 0 22px;}
.r21-dialog__pager button,.r21-dialog__gallery-return {border:1px solid #c5dadf;border-radius:12px;background:#fff;color:#18505b;padding:10px 14px;font-size:.83rem;font-weight:800;cursor:pointer;}
.r21-dialog__pager button {flex:1;}
.r21-dialog__pager button:hover,.r21-dialog__gallery-return:hover {border-color:#27a99d;background:#edf8f7;}
.r21-dialog__screen-list {display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.r21-dialog__screen-list button {border:1px solid #d3e3e7;border-radius:999px;background:#fff;color:#32556c;padding:7px 10px;font-size:.77rem;font-weight:730;line-height:1.3;cursor:pointer;}
.r21-dialog__screen-list button[aria-pressed="true"] {background:#dbf5f0;border-color:#49b4a9;color:#07595c;}
.r21-dialog__screen-list button:hover {border-color:#45afa5;}
.r21-dialog__zeta-link {width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:#0c334b;color:#f4ffff;border-radius:13px;border:1px solid #1d6171;padding:13px 17px;font-size:.87rem;font-weight:800;cursor:pointer;}
.r21-dialog__zeta-link:hover {background:#15566b;}
.r21-dialog__disclaimer {border-top:1px solid #e0edf2;padding:12px 25px 18px;margin:0;color:#668094;text-align:center;font-size:.74rem;line-height:1.5;}
.r21-dialog__flow {padding:20px clamp(12px,3vw,32px);}
.r21-dialog__gallery-return {display:inline-flex;margin:0 0 15px;}
.r21-dialog .hcsa-flow-section--r15 {padding:0!important;margin:0!important;background:transparent!important;}
.r21-dialog .hcsa-flow-section--r15 > .wrap {width:100%;max-width:none;margin:0;padding:0;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-intro {display:none;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-shell {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(290px,345px);align-items:start;gap:25px;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-explainer {order:1;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-demo {order:2;position:relative!important;top:0!important;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-step-list {grid-template-columns:repeat(2,minmax(0,1fr));}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-architecture {margin-top:18px;}
.r21-dialog .hcsa-flow-section--r15 .hcsa-flow-phone {width:min(100%,345px);}
.r21-dialog__hotspot:focus-visible,.r21-dialog button:focus-visible,.r21-inline-switch button:focus-visible {outline:3px solid #1ca8a2;outline-offset:3px;}
.r21-inline-switch {display:flex;justify-content:center;align-items:center;gap:8px;margin:5px auto 4px;position:relative;z-index:3;}
.r21-inline-switch button {cursor:pointer;width:12px;height:12px;padding:0;border:1px solid rgba(123,215,210,.65);border-radius:999px;background:rgba(97,161,166,.18);transition:background .15s,transform .15s;}
.r21-inline-switch button[aria-pressed="true"] {background:#69dbcf;border-color:#a1ede5;transform:scale(1.12);}
.r21-inline-switch button:hover {background:#40b8ac;}
.hcsa-page .r21-inline-switch--hero {margin:8px auto -2px;}
.hcsa-page .hcsa-hero-spotlight__phones .r21-inline-switch {margin-top:5px;}
@media(max-width:760px) {
  .r21-dialog {width:calc(100vw - 18px);max-height:96dvh;border-radius:19px;}
  .r21-dialog__header {padding:14px 15px;}
  .r21-dialog__gallery {grid-template-columns:1fr;gap:13px;padding:12px 15px 18px;align-items:start;}
  .r21-dialog__device img {max-height:min(52dvh,510px);max-width:100%;}
  .r21-dialog__device--wide img {max-height:40dvh;}
  .r21-dialog__details h3 {font-size:1.33rem;margin:6px 0 7px;}
  .r21-dialog__details>p {font-size:.82rem;margin-bottom:12px;}
  .r21-dialog__tap-hint {margin-top:5px;font-size:.69rem;}
  .r21-dialog__pager {margin-bottom:11px;}
  .r21-dialog__screen-list {margin-bottom:12px;}
  .r21-dialog__flow {padding:13px;}
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-shell {grid-template-columns:1fr!important;}
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-demo {order:1;}
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-explainer {order:2;}
}
@media(max-width:390px) {
  .r21-dialog__screen-list button {font-size:.71rem;padding:6px 8px;}
  .r21-dialog__header h2 {font-size:1.13rem;}
  .r21-dialog__close {flex-basis:39px;height:39px;}
}
@media(prefers-reduced-motion:reduce) {
  .r21-dialog__hotspot,.r21-inline-switch button {transition:none;}
  .r21-dialog::backdrop {backdrop-filter:none;}
}

/* R21 QA: compact direct-step selector keeps the real iPhone first in the modal. */
.r21-dialog__flow-picker {display:flex;gap:12px;align-items:center;justify-content:flex-end;margin:-58px 0 16px auto;max-width:min(390px,100%);font-size:.78rem;font-weight:760;color:#41677d;}
.r21-dialog__flow-picker select {flex:1;min-width:0;border:1px solid #bfd4df;border-radius:10px;padding:10px;background:#fff;color:#123b55;font:inherit;cursor:pointer;}
.r21-dialog__flow-picker select:focus-visible {outline:3px solid #1ca8a2;outline-offset:2px;}
@media(max-width:760px) {
  .r21-dialog__flow-picker {margin:0 0 14px;max-width:none;justify-content:stretch;}
  /* The long tab/explainer remains on the actual HCSA page; in the popup the
     compact accessible selector and phone controls replace the long list. */
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-explainer {display:none!important;}
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-demo {order:1;}
  .r21-dialog .hcsa-flow-section--r15 .hcsa-flow-shell {padding:12px 10px 20px;}
}


/* R21 synthetic in-phone detail state: never connected to productive services. */
.r21-dialog__detail { position:absolute;z-index:3;inset:18% 10% 15%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;padding:clamp(15px,3vw,23px);border:1px solid #bedadf;border-radius:20px;background:rgba(251,254,255,.97);box-shadow:0 16px 45px rgba(11,36,67,.23);color:#163b58;overflow:auto; }
.r21-dialog__detail[hidden] {display:none!important;}
.r21-dialog__detail-close {position:absolute;top:11px;left:11px;border:0;background:transparent;color:#27697b;font-size:1.1rem;padding:6px 9px;cursor:pointer;}
.r21-dialog__detail-tag {letter-spacing:.13em;color:#ec6a31;font-size:.69rem;font-weight:900;margin-top:12px;}
.r21-dialog__detail h4 {font-size:clamp(1.02rem,2.2vw,1.38rem);line-height:1.2;margin:0;color:#112d51;}
.r21-dialog__detail p {font-size:clamp(.78rem,1.7vw,.93rem);line-height:1.45;color:#4a667e;margin:0;}
.r21-dialog__detail-close:focus-visible {outline:3px solid #1ca8a2;border-radius:8px;}

/* R22: WCAG 2.5.8-friendly inline controls keep the small visual dots but
   provide a 32px target, and retain high-contrast keyboard focus rings. */
.r21-inline-switch{gap:2px}
.r21-inline-switch button{width:32px;min-width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;background:transparent;transform:none;position:relative}
.r21-inline-switch button::after{content:"";width:12px;height:12px;display:block;border:1px solid rgba(123,215,210,.75);border-radius:999px;background:rgba(97,161,166,.21);transition:background .15s,transform .15s}
.r21-inline-switch button[aria-pressed="true"]{background:transparent;transform:none}
.r21-inline-switch button[aria-pressed="true"]::after{background:#69dbcf;border-color:#a1ede5;transform:scale(1.12)}
.r21-inline-switch button:hover{background:transparent}
.r21-inline-switch button:hover::after{background:#40b8ac}
.r21-dialog__announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.r21-dialog__architecture{max-width:100ch;margin:0 auto;padding:0 23px 15px;text-align:center;font-size:.76rem;line-height:1.5;color:#34586e}
.r21-dialog__hotspots[aria-hidden="true"]{pointer-events:none}
.r21-dialog__device img[data-r22-broken="true"]{outline:2px solid #b65d45;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.r21-inline-switch button::after{transition:none!important}}

/* Without JavaScript, inline dots cannot switch views. Hide them and keep
   the accessible static-image anchors generated by the HCSA PHP helper. */
.no-js .r21-inline-switch{display:none!important}
.hcsa-nojs-link{display:block;margin:7px auto;font-size:.78rem;line-height:1.4;text-align:center;color:#0a7586;text-decoration:underline;text-underline-offset:3px}

/* Fallback links on the dark homepage glass card require a lighter contrast. */
.r49-home .hcsa-hero-spotlight .hcsa-nojs-link{color:#a1f8eb}