@font-face {
  font-family:Varela;
  src:url('/assets/varela-regular.ttf') format('truetype');
  font-display:swap;
  font-weight:400
}


:root {
  --hero:#4c4f7f;
  --feature:#4d5081;
  --claim:#625ba3;
  --footer:#363358;
  --muted:#d0cedd;
  --body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif
}


* {
  box-sizing:border-box
}

html {
  color-scheme:light;
  scroll-behavior:smooth
}

body {
  margin:0;
  font:400 16px/1.6 var(--body);
  color:#fff;
  background:var(--footer)
}

img {
  max-width:100%;
  vertical-align:middle;
  height:auto
}

a {
  color:inherit;
  text-underline-offset:4px
}

button,input {
  font:inherit
}

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

button {
  cursor:pointer
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #fff;
  outline-offset:5px
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  text-wrap:balance;
  letter-spacing:-.025em
}

ul {
  padding:0;
  list-style:none
}

.container {
  max-width:940px;
  margin-inline:auto
}

.wordmark {
  font:400 20px/1.2 Varela,sans-serif;
  letter-spacing:5px
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  opacity:0;
  pointer-events:none;
  top:12px;
  left:12px;
  transform:translateY(-200%);
  z-index:5;
  padding:12px 16px;
  background:#fff;
  color:var(--footer)
}

.skip-link:focus {
  transform:none;
  opacity:1;
  pointer-events:auto
}


/* Baseline: the source's centered hero, original purple artwork, and typography. */
.hero {
  padding:140px 0;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hero) url('/assets/hero-background.jpg') 0 23%/cover;
  text-shadow:0 1px #0000003b
}


.hero-inner {
  width:864.64px;
  max-width:100%;
  display:grid;
  grid-template-columns:1fr 1fr
}

.hero-copy {
  padding:30px
}

.hero-wordmark {
  line-height:44px;
  margin-bottom:19px
}

.hero h1 {
  font:700 80px/1.05 var(--display);
  letter-spacing:-.035em;
  margin:0 0 20px
}

.hero-features {
  margin:0
}

.hero-features li {
  display:flex;
  gap:15px;
  align-items:center;
  min-height:60px;
  font-size:18px;
  line-height:1.5
}

.hero-features img {
  width:50px;
  height:60px;
  object-fit:scale-down;
  flex:none
}

.download-cta {
  display:flex;
  align-items:center;
  padding:40px 0;
  gap:0
}

.app-store {
  display:inline-flex;
  min-height:50px;
  flex-shrink:0
}

.app-store img {
  height:50px;
  width:auto
}

.qr-trigger {
  margin:9px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  padding:7px;
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center
}

.qr-trigger img {
  width:30px;
  height:30px
}

.hero-art {
  padding-inline:10px;
  display:flex;
  align-items:flex-start;
  justify-content:center
}

.hero-phone {
  width:100%;
  height:auto
}


.free-claim {
  background:#403d65;
  text-align:center
}

.free-inner {
  padding:48px 36px
}

/* The score/store label are HTML. Only the original wreath edges are artwork. */
.rating {
  --rating-height:50px;
  display:inline-grid;
  grid-template-columns:27px minmax(0,1fr) 27px;
  align-items:center;
  gap:12px;
  width:228px;
  max-width:100%;
  min-height:var(--rating-height);
  margin-bottom:15px;
  color:#fff;
  text-decoration:none
}

.rating-copy {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px
}

.rating-store {
  font:400 11px/1.4 var(--body);
  white-space:nowrap
}

.rating-score-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap
}

.rating-value {
  font:700 26px/30px var(--body);
  font-variant-numeric:tabular-nums
}

.rating-stars {
  font:400 20px/30px var(--body);
  letter-spacing:0
}

.rating-wreath {
  display:block;
  height:var(--rating-height);
  background:url('/assets/Rating.png') left center/auto var(--rating-height) no-repeat
}

.rating-wreath-right {
  background-position:right center
}

.rating:hover .rating-store {
  text-decoration:underline;
  text-underline-offset:3px
}

.free-claim .section-title {
  margin:0 0 16px
}

.free-claim .section-subtitle {
  max-width:62ch;
  margin:0 auto;
  text-wrap:balance
}


/* The source intentionally crops the lower phone screens and outer image edge. */
.feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  background:var(--feature)
}

.feature-text {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}

.feature-copy {
  min-width:0;
  padding:30px;
  max-width:940px
}

.feature-icon {
  max-height:80px;
  width:auto
}

.section-title {
  font:700 34px/1.2 var(--display);
  margin:20px 0 16px
}

.section-subtitle,.feature li {
  font:400 18px/1.6 var(--body);
  margin:0 0 16px
}

.feature ul {
  margin:0
}

.feature li {
  margin:0;
  display:flex;
  gap:20px;
  align-items:center
}

.feature li img {
  width:30px;
  height:30px;
  flex:none;
  object-fit:contain
}

.feature-images {
  overflow:clip;
  min-width:0
}

.phone-pair::before,.phone-pair::after {
  content:''
}

.phone-pair {
  display:flex;
  align-items:flex-start;
  gap:30px;
  padding-top:57px;
  margin-bottom:-20%;
  margin-left:0
}

.phone-pair img {
  width:50%;
  min-width:50%;
  height:auto;
  object-fit:cover;
  object-position:top
}

.feature-reverse .feature-images {
  grid-column:1;
  grid-row:1
}

.feature-reverse .feature-text {
  grid-column:2;
  grid-row:1
}

.feature-reverse .phone-pair {
  flex-direction:row-reverse;
  margin-left:0;
  margin-right:0
}


.product-gallery {
  height:50vh;
  background:url('/assets/portfolio.jpg') 0 0/cover
}

.article-link {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:29px 20px 38px;
  gap:18px;
  background:var(--footer);
  font-size:20px
}

.article-link p {
  margin:0
}

.article-link a {
  padding:13px 0
}

.press {
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  max-width:940px;
  margin:auto;
  padding:76px 0 95px;
  gap:60px
}

.press img {
  width:150px;
  height:auto
}


/* Slightly brighter footer text meets contrast while keeping the quiet source footer. */
.footer {
  background:var(--footer);
  color:var(--muted)
}

.footer-inner {
  padding:42px 10px;
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:20px
}

.footer .wordmark {
  color:#e4e8eb
}

.footer-download .app-store {
  margin-top:20px
}

.footer nav a {
  display:block;
  width:fit-content;
  text-decoration:none;
  line-height:22px;
  min-height:22px
}

.footer nav a:hover {
  text-decoration:underline
}

.footer nav .support-link {
  margin-top:10px
}

.copyright {
  padding:19px 10px;
  font-size:14px
}

.copyright .container {
  padding:0
}


.qr-dialog {
  border:1px solid #b7b2d0;
  border-radius:12px;
  padding:0;
  max-width:min(380px,calc(100% - 32px));
  background:var(--footer);
  color:#fff;
  box-shadow:0 20px 70px #0007
}

.qr-dialog::backdrop {
  background:#171528b3
}

.qr-dialog-inner {
  padding:24px;
  text-align:center
}

.qr-dialog h2 {
  font:700 26px/1.2 var(--display);
  clear:both;
  padding-top:12px
}

.qr-dialog p {
  margin:16px 0
}

.qr-close {
  float:right;
  background:transparent;
  color:#fff;
  border:1px solid #d0cedd;
  border-radius:4px;
  min-height:44px;
  padding:8px 16px
}

.qr-dialog img {
  box-sizing:content-box;
  background:#fff;
  padding:16px;
  display:block;
  margin:auto;
  width:192px;
  height:192px;
  image-rendering:pixelated
}

.dialog-open {
  overflow:hidden
}


/* Article: preserve every sentence;
 make the existing URL pleasant to read. */
.article-header {
  padding:28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.article-header .wordmark {
  text-decoration:none
}

.article-body {
  max-width:760px;
  margin:40px auto 80px;
  padding:0 28px;
  font:400 18px/1.7 var(--body)
}

.article-body h1 {
  font:700 44px/1.15 var(--display);
  margin-bottom:28px
}

.article-body h2 {
  font:700 28px/1.3 var(--display);
  margin:48px 0 24px
}

.article-body h3 {
  font:700 21px/1.4 var(--display);
  margin:32px 0 12px
}

.article-body p {
  margin-bottom:24px
}

.article-intro {
  color:#eeedf7;
  font-size:20px;
  line-height:1.65
}

.article-body ul {
  list-style:disc;
  padding-left:24px
}

.article-body li {
  margin-bottom:18px
}

.article-app {
  border-top:1px solid #ffffff26;
  margin-top:48px
}

.article-app .app-store {
  margin-top:24px
}


@media(max-width:991px) {
  .container {
    max-width:728px
  }

  .hero-inner {
    width:728px;
    padding-inline:30px
  }

  .hero h1 {
    font-size:64px
  }

  .hero-art {
    padding:49px 0 0
  }

  .hero-copy {
    padding-inline:30px
  }

  .rating {
    --rating-height:40px;
    width:204px;
    grid-template-columns:23px minmax(0,1fr) 23px;
    gap:8px
  }

  .rating-copy {gap:2px}
  .rating-value {font-size:23px;line-height:26px}
  .rating-stars {font-size:18px;line-height:26px}
  .rating-score-line {gap:6px}

  .feature {
    gap:0
  }

  .section-title {
    font-size:28px
  }

  .section-subtitle,.feature li {
    font-size:17px;
    font-weight:400
  }

  .feature-icon {
    max-width:50px;
    max-height:50px
  }

  .feature-reverse .phone-pair {
    margin-right:0
  }

  .press {
    max-width:728px
  }
}


@media(max-width:767px) {
  .container {
    max-width:none
  }

  .hero {
    padding:60px 0
  }

  .hero-inner {
    padding:34px;
    width:100%
  }

  .hero-copy {
    padding:30px
  }

  .hero h1 {
    font-size:50px
  }

  .hero-features li {
    font-size:16px;
    min-height:44px
  }

  .hero-features img {
    width:30px;
    height:40px
  }

  .hero-art {
    padding:49px 0 0
  }

  .hero-phone {
    max-width:90%
  }


  .free-inner {
    padding:40px 24px
  }

  .section-title {
    font-size:26px
  }

  .section-subtitle,.feature li {
    font-size:16px
  }

  .feature li img {
    width:20px;
    height:20px
  }

  .feature-icon {
    width:40px
  }

  .phone-pair {
    margin-left:0
  }

  .article-link {
    flex-direction:column;
    gap:0;
    text-align:center;
    padding-block:29px 38px
  }

  .press {
    padding:76px 30px 95px;
    gap:60px
  }

  .footer-inner {
    grid-template-columns:1fr;
    text-align:center;
    padding:42px 30px;
    gap:32px
  }

  .footer nav a {
    margin:auto;
    min-height:32px
  }

  .footer nav .support-link {
    margin-top:10px
  }

  .copyright {
    text-align:center
  }

  .article-header .wordmark {
    font-size:16px;
    letter-spacing:3px
  }

  .article-header .app-store img {
    height:40px
  }

  .article-body {
    margin-top:24px;
    font-size:17px
  }

  .article-body h1 {
    font-size:36px
  }

  .article-body h2 {
    font-size:26px
  }

  .article-intro {
    font-size:18px
  }
}


@media(max-width:479px) {
  .hero-inner {
    padding:34px 0;
    display:flex;
    flex-direction:column
  }

  .hero-copy {
    padding-inline:27px;
    width:100%
  }

  .hero-art {
    padding-inline:0;
    width:100%
  }

  .download-cta {
    justify-content:center;
    gap:0
  }

  .qr-trigger {
    display:none
  }

  .feature {
    display:flex;
    flex-direction:column
  }

  .feature-reverse .feature-images {
    order:2
  }

  .feature-copy {
    padding:30px
  }

  .phone-pair,.feature-reverse .phone-pair {
    margin-inline:0;
    padding-top:10px;
    gap:0
  }

  .press img {
    width:100px
  }

  .article-header {
    padding:22px 20px;
    gap:16px
  }

  .article-header .wordmark {
    font-size:14px;
    letter-spacing:2px
  }

  .article-header .app-store img {
    height:38px
  }

  .article-body {
    padding-inline:24px
  }

  .article-body h1 {
    font-size:32px
  }
}


@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}



.feature li span {
  min-width:0;
  overflow-wrap:anywhere;
  margin-block:6px
}