/* readable.css — loaded LAST on all ten pages (2026-10-19 noon completion pass).
   1. Readability floor: reading text, captions and controls at least 20px on tablet/desktop (761px and up), at least 16px on phones.
      Selectors repeat the earlier files' exact selectors so this file wins by order. The home chain, its link labels and the
      carousel thumbnails are deliberately NOT touched here (their sizes are tied to the accepted chain geometry).
   2. Top-of-page demonstration and detail links (home and product pages).
   3. One-at-a-time screenshot viewer (preview.js builds the controls; without JS every screen stays listed).
   4. Generic EHR chart simulation on TravelCard (no third-party EHR name, logo, colours or layout). */

/* ---------- 1. Readability floor (tablet and desktop) ---------- */
@media(min-width:761px){
  /* shared */
  .spoke-page .footer,.travel-page .footer,.home-page .footer{font-size:16px}
  .spoke-page .top-nav>a{font-size:18px}
  .spoke-page .booking-preview p,.travel-page .booking-preview p,.home-page .booking-preview p{font-size:20px}
  .spoke-page .booking-preview .eyebrow,.travel-page .booking-preview .eyebrow{font-size:15px}
  .booking-preview .demo-policy,.home-page .booking-preview .demo-policy{font-size:20px;line-height:1.6;max-width:80ch}
  .tc-sectionnav a{font-size:18px}
  /* home (outside the chain and carousel) */
  .home-page .hero .eyebrow,.home-page .eyebrow{font-size:15px}
  .home-page .hero-lede{font-size:clamp(20px,1.25vw,24px)}
  .home-page .stage-hint{font-size:18px}
  .home-page .selection-copy p:last-child{font-size:clamp(20px,1.2vw,26px)}
  .home-page #selection-action{font-size:20px}
  .cm-figure figcaption{font-size:20px;max-width:80ch}
  .home-page .closer>p:not(.eyebrow){font-size:21px}
  .home-page .closer .text-link{font-size:20px}
  .all-products b{font-size:22px}
  .all-products span{font-size:20px}
  /* product pages */
  .sp-label{font-size:20px}
  .sp-solution p,.sp-intro,.sp-closing,.sp-paras p{font-size:clamp(20px,1.3vw,24px)}
  .sp-qa-item h3{font-size:23px}
  .sp-qa-item p{font-size:20px}
  .sp-back,.sp-related-links a{font-size:20px}
  .sp-status-line{font-size:20px}
  .sp-preview .eyebrow{font-size:16px}
  .sp-preview-intro{font-size:20px}
  .sp-shot figcaption,.sp-shots:has(.sp-shot:nth-child(3)) .sp-shot figcaption{font-size:20px}
  /* TravelCard */
  .travel-page .eyebrow,.tc-hero .eyebrow{font-size:14px}
  .travel-page .tc-hero .tc-lede{font-size:clamp(20px,1.4vw,24px)}
  .travel-page .tc-quick .primary-link{font-size:20px}
  .tc-demo-status{font-size:22px}
  .fi-label{font-size:16px}
  .features-index a{font-size:20px}
  .features-index em{font-size:14px}
  .section-index{font-size:16px}
  .section-index span{font-size:13px}
  .travel-page .large-copy{font-size:21px}
  .travel-page .section-note,.travel-page .pain-aside p{font-size:20px}
  .step-num{font-size:14px}
  .travel-page .flow-card>p:not(.eyebrow):not(.quiet-note){font-size:20px}
  .travel-page .flow-card .quiet-note{font-size:18px}
  .travel-page .status-chip{font-size:14px}
  .travel-page .detail-chips span{font-size:18px}
  .travel-page .flow-card .sequence{font-size:18px}
  .travel-page .sequence span{font-size:17px}
}
@media(max-width:760px){
  .spoke-page .footer,.travel-page .footer,.home-page .footer{font-size:14px}
  .sp-shot figcaption{font-size:16px}
  .travel-page .flow-card .quiet-note{font-size:16px}
  .booking-preview .demo-policy,.home-page .booking-preview .demo-policy{font-size:16px}
}

/* ---------- 2. Top-of-page demonstration and detail links ---------- */
.home-jump,.sp-jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:18px auto 0}
.home-jump{justify-content:center;max-width:1180px}
.sp-jump{margin:18px 0 22px}
.home-jump-label,.sp-jump-label{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e3bf78;margin-right:4px}
.home-jump a,.sp-jump a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border:1px solid rgba(228,194,127,.7);border-radius:10px;background:rgba(15,32,49,.55);color:#f4f7fa;font-size:20px;font-weight:620;line-height:1.25;text-decoration:none}
.home-jump a:hover,.home-jump a:focus-visible,.sp-jump a:hover,.sp-jump a:focus-visible{background:rgba(60,48,28,.45);border-color:#f0d398;outline:none}
.home-jump a:focus-visible,.sp-jump a:focus-visible{box-shadow:0 0 0 3px #f0d398}
.sp-jump a.is-demo,.home-jump a.is-demo{background:#e3bf78;border-color:#e3bf78;color:#0b1520}
.sp-jump a.is-demo:hover,.sp-jump a.is-demo:focus-visible,.home-jump a.is-demo:hover,.home-jump a.is-demo:focus-visible{background:#f0d398;color:#0b1520}
.sp-jump small{font-size:17px;font-weight:550;opacity:.85}
.sp-jump-status{flex:1 1 100%;margin:4px 0 0}
@media(max-width:760px){
  .home-jump,.sp-jump{gap:8px}
  .home-jump-label,.sp-jump-label{flex:1 1 100%;text-align:center;font-size:13px}
  .sp-jump{justify-content:center}
  .home-jump a,.sp-jump a{font-size:16px;padding:9px 14px;min-height:44px}
  .sp-jump small{font-size:14px}
}

/* ---------- 3. One-at-a-time screenshot viewer ---------- */
.sp-viewer{position:relative}
.sp-viewer:focus-visible{outline:3px solid #f0d398;outline-offset:6px;border-radius:12px}
.sp-viewer.viewer-on .sp-shots{display:block}
.sp-viewer.viewer-on .sp-shot:not(.is-current){display:none}
.sp-viewer.viewer-on .sp-shots .sp-shot.is-current{display:block;max-width:none;width:100%}
.sp-viewer.viewer-on .sp-shot img{cursor:zoom-in;max-height:76vh;width:100%;object-fit:contain;background:#0b1a29}
.sp-viewer.viewer-on .sp-shot.is-phone img{max-height:80vh}
.sp-viewer.viewer-on .sp-shot figcaption{font-size:20px;line-height:1.55;padding:16px 20px 18px;max-width:none}
@media(min-width:1280px){
  .sp-viewer.viewer-on .sp-shots .sp-shot.is-current{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,30rem);align-items:start}
  .sp-viewer.viewer-on .sp-shots .sp-shot.is-current img{grid-column:1}
  .sp-viewer.viewer-on .sp-shots .sp-shot.is-current figcaption{grid-column:2;padding:26px 28px}
}
.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px}
.viewer-bar button,.viewer-dialog button{min-height:48px;padding:10px 18px;border-radius:10px;border:1px solid rgba(228,194,127,.7);background:rgba(15,32,49,.7);color:#f4f7fa;font:inherit;font-size:20px;font-weight:620;cursor:pointer}
.viewer-bar button:hover,.viewer-dialog button:hover{background:rgba(60,48,28,.45)}
.viewer-bar button:focus-visible,.viewer-dialog button:focus-visible,.viewer-thumbs button:focus-visible,.viewer-dialog a:focus-visible{outline:3px solid #f0d398;outline-offset:2px}
.viewer-bar button:disabled{opacity:.45;cursor:default}
.viewer-count{margin:0;min-width:9ch;font-size:20px;font-weight:650;color:#f0d398;text-align:center}
.viewer-zoom{margin-left:auto}
.viewer-keys{flex:1 1 100%;margin:0;font-size:17px;color:#c4d1dd}
.viewer-thumbs{display:flex;gap:12px;margin:16px 0 0;overflow-x:auto;padding:4px 2px 8px}
.viewer-thumbs button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:200px;padding:8px;border-radius:10px;border:2px solid rgba(165,187,207,.3);background:#0b1a29;color:#d3deea;font:inherit;font-size:17px;cursor:pointer}
.viewer-thumbs button[aria-current="true"]{border-color:#e3bf78;color:#f0d398}
.viewer-thumbs img{display:block;width:100%;height:110px;object-fit:contain;background:#fff;border-radius:6px}
.viewer-dialog{width:min(96vw,2600px);max-width:none;max-height:94vh;margin:auto;padding:0;border:1px solid rgba(228,194,127,.6);border-radius:14px;background:#07111f;color:#f4f7fa}
.viewer-dialog::backdrop{background:rgba(2,6,12,.86)}
.viewer-dialog-bar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#07111f;border-bottom:1px solid rgba(165,187,207,.25)}
.viewer-dialog-bar .viewer-count{margin-right:auto;text-align:left}
.viewer-dialog a{color:#f0d398;font-size:20px;font-weight:620;min-height:48px;display:inline-flex;align-items:center}
.viewer-dialog-body{padding:12px 16px 18px}
.viewer-dialog-body img{display:block;width:100%;height:auto;margin:0 auto;background:#fff}
.viewer-dialog-body.is-phone img{width:auto;max-width:100%}
.viewer-dialog-cap{margin:12px 0 0;font-size:20px;line-height:1.55;color:#d3deea;max-width:90ch}
@media(max-width:760px){
  .viewer-bar{gap:8px}
  .viewer-bar button,.viewer-dialog button{font-size:16px;padding:9px 14px;min-height:44px}
  .viewer-count{font-size:16px}
  .viewer-zoom{margin-left:0}
  .viewer-keys{display:none}
  .viewer-thumbs button{width:130px;font-size:14px}
  .viewer-thumbs img{height:72px}
  .sp-viewer.viewer-on .sp-shot figcaption{font-size:16px;padding:12px 14px}
  .viewer-dialog a,.viewer-dialog-cap{font-size:16px}
}

/* TravelCard visit heading: exactly three separate lines at every width (Codex 768px check found lines 1-2 wrapping beside the note).
   Tablet and narrow desktop: heading full width, companion note stacked below. Each line is held to one line; text and size unchanged. */
@media(min-width:761px){.travel-page .flow-heading h2{white-space:nowrap}}
@media(min-width:761px) and (max-width:1279px){
  .travel-page .flow-heading{display:block}
  .travel-page .flow-heading>div{width:100%}
  .travel-page .flow-heading .section-note{margin:16px 0 0;max-width:80ch}
}
/* Very narrow phones (<390px): 39px (10vw at 390, which fits) wrapped at 360. Scale with the width at 9vw so each line stays one line. */
@media(max-width:389px){.travel-page .flow-heading h2{font-size:max(26px,9vw)}}
/* TravelCard hero: three quick links now, so phones may wrap them (an earlier rule kept two on one line) */
@media(max-width:760px){.travel-page .tc-quick{flex-wrap:wrap}}

/* ---------- 4. TravelCard generic EHR chart simulation ---------- */
@media(min-width:761px){
  .travel-page .ehr-card .ehr-sim{grid-column:1/-1;grid-row:7;margin-top:26px}
  /* the simulation now sits below the text, so the card's text uses the full width (prose still capped at 80ch) */
  .travel-page .ehr-card>.eyebrow,.travel-page .ehr-card>h3,.travel-page .ehr-card>.sequence,.travel-page .ehr-card>.quiet-note,
  .travel-page .ehr-card>p:not(.eyebrow):not(.quiet-note){grid-column:1/-1;max-width:80ch}
}
.ehr-sim .sim-banner{font-size:18px}
.ehr-sim .sim-tag{font-size:14px}
.ehr-sim button{font-size:18px;min-height:48px}
.sim-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px}
.sim-note{font-size:18px;line-height:1.55;white-space:normal}
.sim-note b,.sim-soap b{display:block;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.sim-note b{color:#e3bf78}
.sim-note span{display:block;margin:0 0 10px}
.sim-ehr{padding:0;gap:0;overflow:hidden}
.sim-ehr-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:#26323f;color:#fff}
.sim-ehr-name{font-size:20px;font-weight:700}
.sim-ehr-flag{font-size:15px;font-weight:700;padding:3px 10px;border-radius:999px;background:#fff1d6;color:#7a4b00}
.sim-ehr-banner{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 16px;background:#fff;border-bottom:1px solid #cdd7e0;font-size:18px;color:#3d4c5a}
.sim-ehr-banner b{color:#16222d}
.sim-ehr-body{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr)}
.sim-ehr-nav{list-style:none;margin:0;padding:12px 10px;background:#f3f6f8;border-right:1px solid #d8e0e7;font-size:17px;color:#3d4c5a}
.sim-ehr-nav li{padding:8px 10px;border-radius:7px}
.sim-ehr-nav li.on{background:#d9ebe6;font-weight:700;color:#16222d}
.sim-ehr-main{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;min-width:0}
.sim-ehr-main h4{margin:0;font-size:19px;color:#16222d}
.sim-ehr .sim-field{display:flex;flex-direction:column;gap:8px;min-height:150px;font-size:18px;padding:12px 14px}
.sim-field-hint{font-weight:600}
.sim-soap{display:none;width:100%}
.sim-field.filled .sim-soap{display:grid;gap:8px}
.sim-field.filled .sim-field-hint{display:none}
.sim-soap>span{display:block;padding:8px 10px;border:1px solid #d3dce4;border-radius:7px;background:#fbfcfd;color:#16222d;font-weight:450;line-height:1.45}
.sim-soap b{color:#4d5f70;margin-bottom:2px}
.sim-sign{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px;border:1px dashed #9fb0bf;border-radius:9px}
.sim-sign label{display:flex;align-items:center;gap:8px;font-size:18px;color:#16222d;min-height:44px;cursor:pointer}
.sim-sign input{width:22px;height:22px;accent-color:#2a5a74}
.ehr-sim .sim-ehr button#sim-sign{background:#2a5a74}
.ehr-sim .sim-ehr button#sim-save{background:#fff;color:#16222d;border-color:#2a5a74}
.ehr-sim .sim-ehr button:disabled{opacity:.5;cursor:default}
.sim-chartstate{margin:0;padding:10px 14px;border-radius:8px;background:#eef2f5;color:#3d4c5a;font-size:18px;font-weight:600}
.sim-chartstate.is-signed{background:#e6f2ea;color:#1d5e36}
.ehr-sim.done .sim-chartstate{background:#1f6b3e;color:#fff}
.ehr-sim .sim-status{font-size:20px}
.ehr-sim #sim-next{margin-top:10px;background:#e3bf78;color:#0b1520;border-color:#e3bf78}
@media(max-width:1100px){.sim-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .ehr-sim .sim-banner,.sim-note,.ehr-sim button,.sim-ehr .sim-field,.sim-sign label,.sim-chartstate,.sim-ehr-banner{font-size:16px}
  .ehr-sim .sim-status{font-size:16px}
  .sim-ehr-body{grid-template-columns:1fr}
  .sim-ehr-nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-right:0;border-bottom:1px solid #d8e0e7;font-size:15px}
}

/* Contact (mailto) - the only call to action. Address lives in js/contact.js. */
a.contact-cta{display:inline-flex;align-items:center;font:inherit;font-weight:700;font-size:17px;line-height:1.2;padding:11px 18px;border-radius:8px;border:1px solid #d9b66e;background:#d9b66e;color:#07111f;text-decoration:none;white-space:normal;cursor:pointer}
a.contact-cta:hover{filter:brightness(1.12)}a.contact-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
a.contact-cta.contact-cta-lg{font-size:22px;padding:16px 28px}
.contact-address{color:#c4d0dc}.contact-address span{color:#f0d398;font-weight:650}
@media(max-width:760px){a.contact-cta{font-size:13px;padding:8px 10px;max-width:150px}a.contact-cta.contact-cta-lg{font-size:18px;max-width:none;padding:13px 20px}}
/* Night pass: TravelCard hero uses the width (large logo left, headline beside it), readable header link. */
.travel-page .top-nav>a{font-size:18px;font-weight:600;color:#d3deea}
@media(min-width:761px){
  .travel-page .tc-hero-row{max-width:min(1560px,100%);gap:clamp(36px,4vw,80px)}
  .travel-page .tc-hero-row .tc-logo-reveal:not(.in-header){width:clamp(230px,19vw,380px)}
  .travel-page .tc-hero-row h1{font-size:clamp(40px,3.9vw,76px)}
  .travel-page .tc-hero .tc-lede{max-width:900px;font-size:clamp(21px,1.5vw,28px)}
}
@media(min-width:761px) and (max-width:1100px){.travel-page .tc-hero-row .tc-logo-reveal:not(.in-header){width:200px}.travel-page .tc-hero-row h1{font-size:clamp(34px,4.6vw,44px)}}a.contact-cta,.top-nav>a.contact-cta,.spoke-page .top-nav>a.contact-cta,.travel-page .top-nav>a.contact-cta{color:#07111f!important}
@media(min-width:761px) and (max-width:1100px){
  .travel-page .tc-hero-row{gap:24px}
  .travel-page .tc-hero-row .tc-logo-reveal:not(.in-header){width:160px}
  .travel-page .tc-hero-row h1{font-size:clamp(30px,4.1vw,40px)}
}
@media(max-width:1100px){.tc-sectionnav,.travel-page .tc-sectionnav{flex-wrap:wrap;justify-content:center;gap:4px 18px;overflow:visible;padding-left:12px;padding-right:12px}}
.travel-page .covering-copy .eyebrow{font-size:14px}
@media(max-width:760px){.travel-page .covering-copy .eyebrow{font-size:12px}}
@media(min-width:761px) and (max-width:1100px){.tc-sectionnav,.travel-page .tc-sectionnav{gap:4px 12px}}
@media(max-width:760px){a.contact-cta{max-width:200px;font-size:13px}}