/* =========================
   Policy page styling
========================= */

.policy-wrap{
  max-width:900px;
}

.policy-title{
  margin:0 0 8px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  letter-spacing:-.03em;
}

.policy-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}

.policy-card h2{
  margin-top:28px;
  margin-bottom:10px;
  font-size:1.3rem;
  color:#2f1a3f;
}

.policy-card p,
.policy-card li{
  color:var(--muted);
}

.policy-card ul{
  padding-left:22px;
}

.policy-back{
  margin-top:28px;
}

/* =========================
   Website refinements
========================= */

.card-grid.two .card:last-child:nth-child(5){
  grid-column:1 / -1;
}

.support-inline{
  margin-top:16px;
  color:#fff;
}

.dark-card span{
  color:#d8e3f0;
}

.hero-panel.light p{
  margin:0;
  color:var(--muted);
}

.hero-section h1{
  max-width:12ch;
}

.brand-text strong{
  color:#2f1a3f;
}

.nav a:hover{
  color:var(--brand);
}

/* =========================
   Phone slider
========================= */

.phone-slider-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.phone-frame{
  position:relative;
  width:min(360px, 88vw);
  background:#081122;
  border-radius:40px;
  padding:14px;
  box-shadow:0 30px 80px rgba(2,6,23,.22);
}

.phone-notch{
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:120px;
  height:24px;
  border-radius:0 0 14px 14px;
  background:#020617;
  z-index:3;
}

.phone-slider{
  position:relative;
  overflow:hidden;
  border-radius:29px;
  background:#f8fbff;
  height:650px;
}

.phone-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .35s ease;
  will-change:transform;
}

.phone-slide{
  min-width:100%;
  width:100%;
  height:100%;
  flex:0 0 100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  background:#f8fbff;
}

/* Normal screenshots */
.phone-slide > img,
.phone-slide img.normal-screen{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Long screenshot scroll */
.phone-scroll{
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  background:#f8fbff;
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.phone-scroll::-webkit-scrollbar{
  display:none;
}

.long-screen-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:unset;
}

/* Slider arrows */
.phone-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(15,23,42,.65);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
}

.phone-nav.prev{
  left:10px;
}

.phone-nav.next{
  right:10px;
}

.phone-nav:hover{
  background:var(--brand);
}

/* Slider dots */
.phone-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:4;
}

.phone-dot{
  width:10px;
  height:10px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.65);
  cursor:pointer;
}

.phone-dot.active{
  background:#ffffff;
  box-shadow:0 0 0 2px rgba(165,42,232,.35);
}

/* =========================
   Accessibility / overflow
========================= */

.card a[href^="mailto:"],
.footer-links a[href^="mailto:"]{
  color:var(--brand);
}

.card a[href^="mailto:"]:hover,
.footer-links a[href^="mailto:"]:hover{
  text-decoration:underline;
}

.map-wrap iframe{
  display:block;
}

.btn:focus,
.nav a:focus,
a:focus{
  outline:2px solid rgba(165,42,232,.35);
  outline-offset:2px;
}

.brand-mark{
  letter-spacing:-.03em;
}

.section-head{
  text-wrap:balance;
}

.section-head p,
.card p,
.timeline-item p,
.project-text{
  max-width:70ch;
}

html,
body{
  overflow-x:hidden;
}

/* =========================
   Responsive
========================= */

@media (max-width: 980px){
  .phone-frame{
    width:min(340px, 92vw);
  }

  .phone-slider{
    height:600px;
  }
}