/* Home page styles — extracted from index.html */
:root {
        --bar: #7DC3B4;
        --page-bg: #f8f8f8;
        --safe-bottom: env(safe-area-inset-bottom, 0px);
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bar: #256B60;
          --page-bg: #0F1418;
        }
        html,
        body {
          background: var(--page-bg);
        }
      }
      html {
        background: var(--page-bg);
        min-height: 100%;
      }
      body {
        margin: 0;
        min-height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        background: var(--page-bg);
        position: relative;
      }
      .skip-link {
        position: fixed;
        left: 14px;
        top: 10px;
        z-index: 500;
        width: 1px;
        height: 1px;
        margin: -1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-140%);
        opacity: 0;
        background: #ffffff;
        color: #0f4f45;
        border: 2px solid #0f4f45;
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 700;
      }
      .skip-link:focus,
      .skip-link:focus-visible {
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        clip-path: none;
        white-space: normal;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
        opacity: 1;
      }
      #page-shell {
        position: relative;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        background: transparent;
        overflow: visible;
        padding-bottom: max(var(--safe-bottom), 8px);
      }
      #watch-quick {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 420;
        background:
          radial-gradient(130% 85% at 50% -8%, rgba(56, 180, 161, 0.22), rgba(0, 0, 0, 0) 52%),
          radial-gradient(95% 65% at 50% 110%, rgba(23, 95, 85, 0.18), rgba(0, 0, 0, 0) 58%),
          #000;
        color: #fff;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 0 calc(14px + env(safe-area-inset-bottom, 0px));
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
      }
      .watch-quick-inner {
        position: relative;
        width: 100%;
        min-height: 100%;
        min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 12px;
      }
      .watch-quick-inner::before {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 30px;
        background:
          linear-gradient(180deg, rgba(18, 28, 30, 0.95), rgba(7, 11, 12, 0.97)),
          radial-gradient(120% 60% at 50% 0%, rgba(84, 212, 192, 0.16), rgba(84, 212, 192, 0) 60%);
        border: 1px solid rgba(161, 223, 211, 0.22);
        box-shadow: inset 0 1px 0 rgba(210, 247, 239, 0.22), 0 14px 34px rgba(0, 0, 0, 0.52);
      }
      .watch-quick-inner > * {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 420px;
      }
      .watch-quick-status {
        margin: 0;
        font-size: clamp(24px, 12vw, 33px);
        font-weight: 780;
        line-height: 1.13;
        letter-spacing: -0.02em;
        text-wrap: balance;
      }
      .watch-quick-status-sub {
        margin: 0;
        font-size: clamp(18px, 9vw, 25px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.01em;
        opacity: 0.95;
        text-wrap: balance;
      }
      .watch-quick-address {
        margin: 4px 0 0;
        font-size: clamp(14px, 6vw, 18px);
        line-height: 1.22;
        letter-spacing: 0;
        opacity: 0.88;
        text-wrap: balance;
      }
      .watch-quick-actions {
        margin-top: 14px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .watch-quick-btn {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 90vw;
        max-width: 380px;
        min-height: 68px;
        padding: 0 20px;
        border: 1px solid rgba(202, 255, 245, 0.56);
        border-radius: 24px;
        background: linear-gradient(180deg, #59e7d0 0%, #25b9a4 100%);
        color: #052f28;
        font-size: clamp(20px, 9vw, 26px);
        font-weight: 800;
        letter-spacing: -0.01em;
        text-transform: none;
        box-shadow: inset 0 1px 0 rgba(236, 255, 251, 0.8), 0 10px 20px rgba(0, 0, 0, 0.46);
      }
      .watch-quick-btn[href^="tel:"] {
        background: linear-gradient(180deg, #88f0da 0%, #36c2ab 100%);
      }
      .watch-quick-btn:active {
        transform: scale(0.985);
      }
      html.is-watch-browser #watch-quick {
        display: block;
      }
      html.is-watch-browser,
      html.is-watch-browser body {
        overflow: hidden;
        background: #000;
      }
      html.is-watch-browser .topnav,
      html.is-watch-browser .web-content {
        display: none !important;
      }
      @media (max-width: 390px) and (max-height: 620px) {
        #watch-quick {
          display: block;
        }
        html,
        body {
          overflow: hidden;
          background: #000;
        }
        .topnav,
        .web-content {
          display: none !important;
        }
      }