/* Shared mobile-friendly styles for policy pages (Privacy, Terms, Cancellation) */
/* Navigation */
.policy-nav{background:transparent;border:0;position:relative;z-index:5}
.policy-nav .nav-container{max-width:1120px;margin:0 auto;padding:.65rem 1rem;display:flex;align-items:center;justify-content:center;width:100%;text-align:center}
.policy-nav + h1{margin-top:.65rem}
@media (max-width:768px){.policy-nav + h1{margin-top:.9rem;font-size:1.95rem}}
/* When title is wrapped in a box */
.policy-nav + .hero-title-box{margin-top:.65rem}
/* Increase vertical spacing for hero title on mobile so logo + toggle have clear area */
@media (max-width:768px){.policy-nav + .hero-title-box{margin-top:1.65rem}}
/* On mobile, render the page title BELOW the hero header visually */
@media (max-width:768px){
  .policy-hero, .tos-hero, .cancel-hero{overflow:visible!important;margin-bottom:3rem}
  .policy-hero .hero-title-box,
  .tos-hero .hero-title-box,
  .cancel-hero .hero-title-box{position:absolute;left:0;right:0;top:calc(100% + 1.8rem);padding:0!important;margin:0!important;z-index:2}
}

/* Pull logo closer to the left edge on mobile */
@media (max-width:768px){
  .policy-hero, .tos-hero, .cancel-hero{padding-left:.5rem!important;padding-right:.85rem!important}
  .policy-hero .site-logo, .tos-hero .site-logo, .cancel-hero .site-logo{left:2px!important}
}
.policy-nav .menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #e4e8f0;border-radius:.6rem;background:#fff;cursor:pointer}
.policy-nav .menu-toggle .bar{display:block;width:20px;height:2px;background:#232946;border-radius:2px;margin:2px 0}
.policy-nav .nav-links{list-style:none;display:inline-flex;gap:.65rem;margin:0 auto;padding:.55rem 1rem;background:transparent;border:0;border-radius:0;box-shadow:none;width:auto;justify-content:center}
.policy-nav .nav-links a{display:inline-block;color:#232946;text-decoration:none;font-weight:800;font-size:1.05rem;padding:.8rem 1.15rem;border-radius:.6rem;transition:.2s}
.policy-nav .nav-links a[aria-current="page"],
.policy-nav .nav-links a.active{background:linear-gradient(135deg,#2d6cff,#7aa2ff);color:#fff;box-shadow:0 6px 18px rgba(45,108,255,.25)}
.policy-nav .nav-links a:hover{background:#eef4ff}

/* Responsive collapse */
@media (max-width: 768px){
  .policy-nav .menu-toggle{display:inline-flex}
  /* Ensure the container is the positioned ancestor and spans full width */
  .policy-nav .nav-container{position:relative!important;justify-content:space-between}
  /* Move hamburger to the right on mobile and keep it clear of logo */
  .policy-nav .menu-toggle{position:absolute;right:12px!important;left:auto!important;top:-6px!important;z-index:7;box-shadow:0 4px 10px rgba(16,23,39,.06);background:#fff}
  /* Hide collapsed menu fully to avoid thin white line */
  .policy-nav .nav-links{position:absolute;left:0;right:0;top:calc(100% + 0px);display:block;background:transparent;border:0;box-shadow:none;max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0;border-radius:0 0 .8rem .8rem;margin:0;visibility:hidden}
  .policy-nav .nav-links.open{max-height:320px;padding:.25rem;background:#fff;visibility:visible}
  .policy-nav .nav-links li{border-top:1px solid #f2f3f8}
  .policy-nav .nav-links a{display:block;padding:1rem 1.1rem;font-size:1.05rem}
}

/* Title box under nav */
.hero-title-box{display:flex;justify-content:center}
.hero-title{display:inline-block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.hero-title h1{margin:0}
@media (max-width:768px){.hero-title{padding:.35rem .85rem}}

/* Table responsiveness */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:640px}

/* Fine-tune small-screen spacing & typography for page sections */
@media (max-width: 720px){
  .policy-section, .tos-section, .cancel-section{padding:1.1rem 1rem;margin:1.2rem 0}
  .policy-section h2, .tos-section h2, .cancel-section h2{font-size:1.15rem}
  .policy-section p, .tos-section p, .cancel-section p,
  .policy-section li, .tos-section li, .cancel-section li{font-size:.93rem}
}

/* Elevated, modern hero backgrounds with subtle gradients and decorative blobs */
.policy-hero, .tos-hero, .cancel-hero{background:linear-gradient(180deg,#ffffff 0%, #f7f9ff 65%, #f2f6ff 100%) !important;position:relative}
.policy-hero:after, .tos-hero:after, .cancel-hero:after{content:"";position:absolute;inset:auto -140px -120px auto;width:360px;height:360px;background:radial-gradient(closest-side, rgba(45,108,255,.18), rgba(45,108,255,0));filter:blur(10px);pointer-events:none}
.policy-hero h1, .tos-hero h1, .cancel-hero h1{letter-spacing:.3px;text-shadow:0 2px 0 #fff, 0 12px 24px rgba(16,23,39,.06)}

/* Decorative wave under the header to feel more premium */
.policy-hero:before, .tos-hero:before, .cancel-hero:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:linear-gradient(90deg, rgba(45,108,255,.25), rgba(122,162,255,.25) 40%, rgba(45,108,255,.25));opacity:.6}

/* Card polish */
.policy-section, .tos-section, .cancel-section{border:1px solid #edf1ff;box-shadow:0 10px 30px rgba(16,23,39,.06)}
.policy-section h2, .tos-section h2, .cancel-section h2{position:relative;padding-left:.4rem}
.policy-section h2:after, .tos-section h2:after, .cancel-section h2:after{content:"";position:absolute;left:0;bottom:-8px;width:72px;height:3px;background:linear-gradient(90deg,#2d6cff,rgba(45,108,255,0));border-radius:3px}

/* Decorative corner blobs for cards */
.policy-section:before, .tos-section:before, .cancel-section:before{content:"";position:absolute;top:-10px;right:-10px;width:100px;height:100px;background:radial-gradient(closest-side, rgba(45,108,255,.12), rgba(45,108,255,0));filter:blur(6px);border-radius:50%;pointer-events:none}
.policy-section:after, .tos-section:after, .cancel-section:after{content:"";position:absolute;bottom:-12px;left:-12px;width:120px;height:120px;background:radial-gradient(closest-side, rgba(122,162,255,.12), rgba(122,162,255,0));filter:blur(8px);border-radius:50%;pointer-events:none}

/* Accent chips & info/status boxes */
.highlight-box, .status-box, .info-box{background:linear-gradient(180deg,#f4f6fb, #eef3ff);border-left-color:#2d6cff}

/* Page background polish */
body{background:linear-gradient(180deg,#fafcff 0,#f8fbff 60%,#f7faff 100%)}

/* Fancy hover underline for nav links */
.policy-nav .nav-links a{position:relative}
.policy-nav .nav-links a:after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:linear-gradient(90deg,rgba(45,108,255,0), rgba(45,108,255,.6), rgba(45,108,255,0));transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.policy-nav .nav-links a:hover:after{transform:scaleX(1)}

/* Optional subtle gradient animation */
@keyframes hueShift{0%{filter:hue-rotate(0)}50%{filter:hue-rotate(15deg)}100%{filter:hue-rotate(0)}}
.policy-nav .nav-links a[aria-current="page"]{animation:hueShift 6s ease-in-out infinite}