:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #f2ffff; background: #031224; }
* { box-sizing: border-box; }
/* The main grid fills the viewport; the app card keeps its natural height. */
body { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; min-height: 100dvh; width: min(100%, 538px); margin: 0 auto; background: #031224; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-color: #031224; background-image: url("assets/background.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.main { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0 auto; padding: 0 18px 12px; }
.header { flex: 0 0 auto; height: 90px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.layout { display: flex; flex-direction: column; flex: 1; }
    .layout > div { flex: 0 0 auto; }
    .layout > section { display: flex; flex-direction: column; flex: 1; }
    .layout > section > :not(.box) { flex-shrink: 0; }
.banner { position: relative; width: 100%; aspect-ratio: 702 / 320; border: 1px solid #d7ffffb3; border-radius: 16px; overflow: hidden; background: #142e49; box-shadow: 0 8px 38px #0007; }
.slide { display: none; height: 100%; margin: 0; }
.slide.active { display: block; }
.slide img { display: block; width: 100%; height: 100%; object-fit: contain; animation: appear .3s ease-out; }
@keyframes appear { from { opacity: .6; } to { opacity: 1; } }
.slide-control { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 48px; border: 0; background: transparent; color: #f33d50; font-size: 42px; line-height: 1; text-shadow: 0 1px 3px #0006; }
.previous { left: 8px; }
.next { right: 8px; }
.carousel-tools { display: flex; align-items: center; justify-content: center; gap: 0; height: 30px; }
.dots { display: flex; gap: 5px; }
.dot { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: none; }
.dot::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: #667c90; transition: width .15s; }
.dot[aria-current="true"]::before { width: 20px; background: #30e7d4; box-shadow: 0 0 10px #30e7d440; }
.channel-title { margin: 9px 0; text-align: center; font-size: 21px; font-weight: 800; text-shadow: 0 0 18px #27e4d080; }
.channel-description { text-align: center; margin: 0 0 12px; color: #c4e6ea; font-size: clamp(12px, 3.8vw, 16px); font-weight: 600; line-height: 1.5; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 10px; margin: 0 0 14px; }
.verification-field { position: relative; min-width: 0; }
.verification-icon { position: absolute; left: 12px; top: 50%; width: 19px; height: 19px; color: #88d5d5; transform: translateY(-50%); pointer-events: none; }
.verification-icon svg { display: block; width: 100%; height: 100%; }
.check-button { min-height: 44px; padding: 10px 17px; border: 1px solid #ffe17a; border-radius: 9px; background: #ffd32a; color: #172022; font-size: 12px; font-weight: 800; }
.verification-ready { grid-column: 1 / -1; color: #a8d5db; font-size: 11px; }
.search-input { display: block; width: 100%; min-height: 43px; padding: 11px 38px 11px 42px; border: 1px solid #2aafad; border-radius: 9px; background: #051e30ed; color: #fff; font: inherit; font-size: 14px; box-shadow: inset 0 0 8px #16dccc15; }
.search-input::placeholder { color: #a8c6d0; opacity: 1; }
.search-input:focus { outline: 2px solid #30e7d4; outline-offset: 2px; }
.search-status { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 10px 12px; color: #b7dce4; font-size: 12px; line-height: 1.4; }
.search-status[hidden] { display: none; }
.verified-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #34d5b780; border-radius: 6px; background: #083d32de; color: #72f1cb; font-weight: 700; }
.search-status[data-state="verified"], .search-status[data-state="unverified"] { align-items: center; gap: 10px; padding: 12px; margin-left: 0; margin-right: 0; border: 1px solid #34d5b780; border-radius: 9px; background: #08332deb; color: #d4fff1; overflow-wrap: anywhere; }
.verification-message { display: flex; flex-direction: column; gap: 5px; flex: 1 1 170px; min-width: 0; }
.verification-status-icon { display: grid; place-items: center; align-self: flex-start; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 4px; background: #27bb74; color: #fff; font-size: 16px; font-weight: 800; }
.search-status[data-state="unverified"] .verification-status-icon { background: #d7a547; color: #30230d; }
.open-official-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 9px 12px; border-radius: 8px; background: #23bc80; color: #fff; font-size: 12px; font-weight: 700; }
.open-official-link[hidden] { display: none; }
.search-status[data-state="verified"] .verified-badge, .search-status[data-state="unverified"] .verified-badge { padding: 0; border: 0; background: transparent; font-size: 14px; }
.search-status[data-state="unverified"] { padding: 10px; margin-left: 0; margin-right: 0; border: 1px solid #d7a54780; border-radius: 9px; background: #30230deb; color: #ffe4b2; }
.search-status[data-state="unverified"] .verified-badge { color: #ffcf72; }
.box { display: grid; flex: 1; grid-auto-rows: minmax(58px, 1fr); gap: 10px; }
    .search-status:not([hidden]) ~ .box { flex: 0 0 auto; grid-auto-rows: 58px; }
.box, .search-form { margin-left: 10px; margin-right: 10px; }
.link[hidden] { display: none; }
.link { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; min-height: 58px; }
.link-name { display: flex; align-items: stretch; min-width: 0; border: 1px solid #26dccb; border-radius: 9px; background: #05213599; box-shadow: inset 0 0 9px #19dccc28, 0 0 9px #16dccc24; }
.row1 { display: grid; place-items: center; width: 62px; flex: 0 0 62px; border-radius: 8px 0 0 8px; background: linear-gradient(135deg, #12c4c1, #179aaa); box-shadow: 3px 0 13px #2aedd03b; font-size: 12px; color: #fff; }
.row2 { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1; padding: 8px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.row3 { display: grid; place-items: center; border: 1px solid #97fff1; border-radius: 9px; background: linear-gradient(180deg, #4be3c9, #22a99e); color: #fff; font-size: 17px; text-shadow: 0 1px 2px #00534d66; box-shadow: inset 0 0 10px #b4fff05c, 0 0 12px #2bd6c048; }
.app-footer { position: sticky; bottom: 0; flex: 0 0 auto; z-index: 4; background: #021644f2; border-top: 1px solid #244a65; padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(14px); }
.app-inner { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 0 auto; padding: 9px 12px; }
.app-icon { width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #3276b3; border-radius: 10px; background: linear-gradient(145deg, #00182e, #03283b); color: #41e6d5; font-style: italic; font-weight: 900; font-size: 12px; }
.app-icon small { color: #f0ffff; font-size: 8px; }
.app-info { min-width: 0; overflow-wrap: anywhere; }
.app-info strong { display: block; font-size: 13px; }
.app-info span { display: block; margin-top: 4px; font-size: 10px; color: #c0dce3; }
.download { display: grid; place-items: center; flex-shrink: 0; min-height: 44px; padding: 9px 12px; border-radius: 11px; background: linear-gradient(135deg, #65efce, #1cc6af); color: #002b30; font-size: 11px; font-weight: 750; }
@media (hover: hover) { .link:hover .row3 { background: linear-gradient(180deg, #7bf4dc, #2dd7c1); } .link:hover .link-name { background: #0b3a4f; } .slide-control:hover { background: #08626ccc; } .download:hover { filter: brightness(1.1); } }
@media (max-width: 538px) {
      .header { height: 74px; }
      .box { grid-auto-rows: minmax(45px, 1fr); }
      .search-status:not([hidden]) ~ .box { grid-auto-rows: 45px; }
      .link { min-height: 45px; grid-template-columns: minmax(0, 1fr) 91px; gap: 10px; }
      .row2 { font-size: 13px; }
      .row3 { font-size: 14px; }
    }
    @media (max-width: 350px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .box, .search-form { margin-left: 4px; margin-right: 4px; }
  .link { grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; }
  .row1 { width: 50px; flex-basis: 50px; }
  .app-inner { gap: 8px; }
  .app-icon { width: 38px; height: 38px; }
  .download { font-size: 10px; padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 300px) {
      .app-inner { grid-template-columns: auto minmax(0, 1fr); }
      .download { grid-column: 1 / -1; width: 100%; }
    }
    /* Phone layout: fluid widths, touch controls, and safe-area padding. */
@media (max-width: 538px), (pointer: coarse) and (max-height: 600px) {
  /* Keep the same document scrolling and bottom app card as PC. */
  .main { padding-left: max(clamp(10px, 3.5vw, 18px), env(safe-area-inset-left)); padding-right: max(clamp(10px, 3.5vw, 18px), env(safe-area-inset-right)); }
  .header { height: clamp(58px, 8.8svh, 74px); }
  .carousel-tools { height: 28px; }
  .slide-control { width: 44px; min-height: 44px; }
  .previous { left: 0; }
  .next { right: 0; }
  .channel-title { font-size: clamp(18px, 5.3vw, 21px); margin: 8px 0; }
  .channel-description { font-size: clamp(11px, 3.8vw, 16px); }
  .search-input { font-size: 16px; min-height: 44px; }
  .box, .search-form { margin-left: clamp(2px, 2vw, 8px); margin-right: clamp(2px, 2vw, 8px); }
  .box { flex: 0 0 auto; grid-auto-rows: 44px; gap: 8px; }
  .search-status:not([hidden]) ~ .box { grid-auto-rows: minmax(44px, auto); }
  .link { min-height: 44px; grid-template-columns: minmax(0, 1fr) clamp(78px, 24vw, 108px); gap: clamp(6px, 2vw, 10px); }
  .row1 { width: clamp(44px, 13.5vw, 62px); flex-basis: clamp(44px, 13.5vw, 62px); }
  .row2 { font-size: clamp(12px, 3.3vw, 14px); line-height: 1.25; padding: 6px; }
  .row3 { font-size: 14px; }
  .app-inner { grid-template-columns: clamp(34px, 10vw, 44px) minmax(0, 1fr) auto; gap: clamp(7px, 2.2vw, 11px); padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .app-icon { width: 100%; height: auto; aspect-ratio: 1; }
  .app-info strong { font-size: clamp(11px, 3.3vw, 13px); line-height: 1.25; }
  .app-info span { font-size: clamp(9px, 2.6vw, 10px); line-height: 1.3; }
  .download { min-height: 44px; font-size: 11px; padding: 8px clamp(8px, 2.5vw, 12px); }
}
@media (max-width: 330px) {
  .app-inner { grid-template-columns: 34px minmax(0, 1fr); }
  .download { grid-column: 1 / -1; width: 100%; }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
  .header { height: 58px; }
  .banner { width: min(100%, 78svh); margin-inline: auto; }
}
    @media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* FINAL MOBILE FIX — 2026-10-09
   The page must cover the viewport when its content is short, and scroll
   normally when content is taller. Extra height is used BY the link cards
   instead of being left empty above or below the Download panel.
   Desktop rules (width > 538px) are untouched. */
@media (max-width: 538px) {
  html {
    min-height: 100%;
    height: auto;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
  }
  .scene {
    position: absolute;
    inset: 0;
  }
  .main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    padding-bottom: 10px;
  }
  .layout {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
  }
  .layout > div {
    flex: 0 0 auto;
  }
  .layout > section {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
  }
  .box {
    flex: 1 0 auto;
    min-height: 0;
    grid-auto-rows: minmax(44px, 1fr);
    align-content: stretch;
    margin-bottom: 0;
  }
  .search-status:not([hidden]) ~ .box {
    flex: 0 0 auto;
    grid-auto-rows: minmax(44px, auto);
    align-content: start;
  }
  .app-footer {
    position: relative;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
  }
}

/* Informational copy beneath the access channels, matching the teal theme. */
.assurance-card{
  min-width:0;
  margin:16px clamp(2px,2vw,10px) 0;
  padding:16px;
  border:1px solid #205063;
  border-radius:14px;
  background:linear-gradient(145deg,#0a2a39,#061d2b);
  color:#d9ecf2;
}
.assurance-card h2{
  margin:0 0 12px;
  color:#60e6d8;
  font-size:clamp(17px,4.6vw,20px);
  line-height:1.3;
  font-weight:750;
}
.assurance-card p{
  margin:0;
  font-size:13px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.assurance-card ul{
  display:grid;
  gap:10px;
  margin:16px 0 0;
  padding-left:17px;
  color:#87ede3;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
  overflow-wrap:anywhere;
}
.assurance-card li{padding-left:2px;}
.site-copyright{
  margin:14px clamp(2px,2vw,10px) 0;
  color:#c9e1ea;
  font-size:11px;
  line-height:1.5;
  text-align:center;
  overflow-wrap:anywhere;
}
@media(max-width:350px){
  .assurance-card{padding:14px 12px;}
  .assurance-card p{font-size:12px;}
  .assurance-card ul{font-size:11px;}
  .site-copyright{font-size:10px;}
}