/* Readability layer for the permanent access page. Keep the original layout and palette. */
:root {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  line-height: 1.55;
  overflow-wrap: break-word;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #254fbd;
  outline-offset: 3px;
}

.page { width: min(100% - 40px, 1080px); }
.nav { min-height: 76px; height: auto; gap: 16px; }
.brand { font-size: 1.125rem; white-space: nowrap; }
.logo { width: 38px; height: 38px; font-size: 1rem; }
.nav .r { gap: 16px; color: #536174; font-size: .875rem; }
.nav button { min-height: 42px; height: auto; padding: 8px 16px; color: #34445b; font-size: .875rem; font-weight: 650; }

.hero {
  min-height: 380px;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 30px;
  padding: 44px 0 38px;
}
.eyebrow { font-size: .8125rem; letter-spacing: .11em; color: #52627b; }
.hero h1 { margin-top: 12px; font-size: clamp(2.375rem, 4vw, 3.125rem); line-height: 1.18; }
.hero p { max-width: 34rem; margin: 18px 0 0; color: #526073; font-size: 1rem; line-height: 1.75; }
.actions { flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.primary,
.domainbtn { min-height: 48px; height: auto; padding: 10px 18px; font-size: .9375rem; line-height: 1.35; }
.meta { flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: #5e6b7d; font-size: .875rem; }

.lower { padding: 28px 0 64px; }
.heading h2 { font-size: 1.25rem; line-height: 1.35; }
.heading p { margin: 7px 0 16px; color: #596779; font-size: .875rem; line-height: 1.6; }
.grid { gap: 16px; margin-bottom: 34px; }
.card {
  min-height: 98px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 18px;
}
.ico { width: 42px; height: 42px; font-size: .9375rem; }
.copy { min-width: 0; }
.copy strong { font-size: 1rem; line-height: 1.4; }
.copy span { margin-top: 4px; color: #5c697a; font-size: .875rem; line-height: 1.45; }
.card button { min-height: 42px; height: auto; padding: 8px 13px; font-size: .875rem; line-height: 1.25; white-space: nowrap; }

.routes .head { padding: 18px 20px; font-size: 1.125rem; }
.row {
  min-height: 66px;
  height: auto;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) 90px;
  gap: 12px;
  padding: 14px 20px;
  font-size: .9375rem;
  line-height: 1.4;
}
.row span:nth-child(2) { color: #46566a; }
.row span:nth-child(3) { color: #216944; text-align: right; }

.dialog { width: min(440px, calc(100vw - 32px)); padding: 30px 26px 22px; }
.close { width: 40px; height: 40px; color: #3e4d61; font-size: 1.5rem; }
.dhead h2 { font-size: 1.5rem; }
.dhead p { max-width: 360px; color: #526174; font-size: .9375rem; line-height: 1.65; }
.ticket { margin-top: 22px; padding: 20px 14px; }
.ticket span,
.ticket em { color: #526174; font-size: .875rem; line-height: 1.45; }
.ticket strong { margin-top: 8px; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }
.ticket em { margin-top: 8px; }
.dactions { gap: 10px; margin-top: 14px; }
.dactions button { min-height: 48px; height: auto; padding: 10px 12px; font-size: .9375rem; }
.foot { margin-top: 16px; padding-top: 14px; color: #5f6b7a; font-size: .875rem; }
.dialog .guide { margin: 20px 0; font-size: 1rem; line-height: 1.75; }
.toast { max-width: calc(100vw - 32px); font-size: .9375rem; text-align: center; }

@media (max-width: 720px) {
  .page { width: min(100% - 28px, 1080px); }
  .nav { min-height: 68px; }
  .nav .r { gap: 8px; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 22px 0 28px; }
  .device { min-height: 0; }
  .device img { width: min(110%, 540px); }
  .hero h1 { font-size: clamp(2.125rem, 8vw, 2.625rem); }
  .hero p { font-size: 1rem; }
  .lower { padding-top: 20px; }
  .grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .card { min-height: 92px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row span:nth-child(2) { display: none; }
  .dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
  .dactions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .brand { font-size: 1rem; }
  .nav .r > span { display: none; }
  .nav button { padding-inline: 10px; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions button { width: 100%; }
  .card { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .card button { padding-inline: 9px; }
}

@media (max-width: 350px) {
  .card { grid-template-columns: 42px minmax(0, 1fr); }
  .card button { grid-column: 2; justify-self: start; }
  .dactions { grid-template-columns: 1fr; }
}

/* The viewing destinations are the primary task; installation is secondary. */
.brand { color: #202633; text-decoration: none; }
.hero-copy { min-width: 0; }
.hero .primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.watch-section { padding-top: 4px; }
.watch-heading h2 { font-size: 1.5rem; }
.watch-heading p { margin-bottom: 18px; font-size: .9375rem; }
.site-list { overflow: hidden; border: 1px solid #d9e1ed; border-radius: 12px; }
.site-row {
  min-height: 94px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(130px, auto) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  color: #202633;
  text-decoration: none;
  transition: background-color .18s ease;
}
.site-row + .site-row { border-top: 1px solid #e5e9f0; }
.site-row:hover { background: #f7f9fd; }
.site-row.primary-site { background: #f2f6ff; }
.site-row.primary-site:hover { background: #eaf1ff; }
.site-mark {
  display: inline-flex;
  justify-content: center;
  padding: 6px 4px;
  border-radius: 6px;
  background: #edf1f7;
  color: #45566f;
  font-size: .8125rem;
  font-weight: 750;
  white-space: nowrap;
}
.primary-site .site-mark { background: #4568d9; color: white; }
.old-site-mark { background: #f1f2f4; color: #505e70; }
.site-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.site-main strong { font-size: 1.0625rem; line-height: 1.35; }
.site-main small { color: #596779; font-size: .875rem; line-height: 1.4; }
.site-url { color: #425574; font-size: .9375rem; overflow-wrap: anywhere; }
.site-go {
  display: inline-flex;
  justify-content: center;
  min-width: 84px;
  padding: 10px 12px;
  border: 1px solid #cfd9ea;
  border-radius: 7px;
  color: #3158c1;
  font-size: .875rem;
  font-weight: 750;
  white-space: nowrap;
}
.primary-site .site-go { border-color: #4568d9; background: #4568d9; color: white; }
.save-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 9px;
  background: #f5f7fa;
  color: #46566a;
  font-size: .9375rem;
}
.save-strip strong { color: #202633; }
.save-strip button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #cdd7e7;
  border-radius: 7px;
  background: white;
  color: #3158c1;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
}
.platform-section { margin-top: 54px; }
.platform-section .grid { margin-bottom: 0; }
.card .sub-link { display: inline-block; margin-top: 5px; color: #3158c1; font-size: .8125rem; text-decoration: underline; text-underline-offset: 2px; }
.card .card-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid #cfd9ea;
  border-radius: 7px;
  background: #f8f9ff;
  color: #3158c1;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.card .card-button:hover, .save-strip button:hover { background: #eef3ff; }
.card:first-child .card-button { border-color: #4568d9; background: #4568d9; color: white; }

@media (max-width: 720px) {
  .hero { padding: 34px 0 26px; }
  .hero .device { display: none; }
  .lower { padding-top: 8px; }
  .site-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 16px 14px; }
  .site-mark { grid-column: 1; grid-row: 1 / span 2; }
  .site-main { grid-column: 2; grid-row: 1; }
  .site-url { grid-column: 2; grid-row: 2; font-size: .8125rem; }
  .site-go { grid-column: 3; grid-row: 1 / span 2; min-width: 0; padding: 9px; }
  .save-strip { align-items: flex-start; }
  .platform-section { margin-top: 40px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .save-strip { flex-direction: column; }
  .save-strip button { width: 100%; }
}

@media (max-width: 350px) {
  .card .card-button { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .site-row { transition: none; }
}