:root {
  color: #5c5c5c;
  font-family: "Century Gothic", "Avenir Next", Avenir, Futura, Arial, sans-serif;
  font-synthesis: none;
  --blue: #075cff;
  --line: #e8e8e8;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: #fff;
  color: #5b5b5b;
  font-size: 16px;
  line-height: 1.25;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  height: 94px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.site-header__inner {
  height: 100%;
  max-width: 1384px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand { display: block; width: 60px; height: 60px; }
.site-header__brand img { display: block; width: 100%; height: 100%; border-radius: 15px; }

.site-header__nav { display: flex; align-items: center; gap: 34px; margin-left: auto; font-size: 18px; }
.site-header__nav a { text-decoration: none; }
.site-header__buy {
  color: white;
  background: var(--accent);
  padding: 9px 17px 8px;
  border-radius: 999px;
  line-height: 1;
}

.language-control { position: relative; display: inline-flex; align-items: center; }
.language-control::after { content: "▾"; position: absolute; right: 0; pointer-events: none; font-size: .75em; }
.language { border: 0; appearance: none; background: transparent; padding: 10px 15px 10px 0; cursor: pointer; }

.site-footer {
  min-height: 139px;
  border-top: 1px solid var(--line);
  padding: 47px 20px 21px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 10px;
  flex: 0 0 auto;
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.site-footer__links a { text-decoration: none; }
.site-footer p { margin: 37px 0 0; }

/* Product landing pages */
.product-main {
  flex: 1 0 auto;
  min-height: 666px;
  display: grid;
  grid-template-columns: minmax(310px, 360px) minmax(520px, 600px);
  align-items: center;
  justify-content: center;
  column-gap: 70px;
  padding: 44px 28px 40px;
}

.product-copy { align-self: center; }
.product-copy h1 { margin: 0 0 38px; font-size: 38px; line-height: 1.08; letter-spacing: -1.3px; font-weight: 700; }
.product-copy .lead { margin: 0; max-width: 330px; font-size: 17px; line-height: 1.28; }
.product-copy .benefit { margin: 42px 0 0; max-width: 365px; font-size: 15px; line-height: 1.25; }
.download-actions { width: max-content; margin-top: 52px; }
.product-copy store-links { display: block; }
.gift-link { display: block; width: max-content; margin: 16px auto 0; color: var(--accent); font-size: 15px; font-weight: 600; }

.product-visual {
  position: relative;
  width: 600px;
  max-width: 100%;
  aspect-ratio: 1914 / 1428;
}

.product-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.store-links { display: flex; gap: 14px; align-items: center; justify-content: flex-start; }
.store-badge {
  width: 120px;
  height: 40px;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: #050505;
  border: 1px solid #a6a6a6;
  border-radius: 6px;
  text-decoration: none;
  font-family: Arial, sans-serif;
}

.store-badge small { display: block; font-size: 8px; line-height: 1; }
.store-badge strong { display: block; font-size: 17px; line-height: 1; white-space: nowrap; font-weight: 500; }

.apple-mark { width: 17px; height: 22px; flex: 0 0 17px; object-fit: contain; filter: invert(1); }

.play-mark {
  width: 18px;
  height: 22px;
  flex: 0 0 18px;
  background: conic-gradient(from 148deg at 32% 50%, #00d26a 0 24%, #00a8ff 0 49%, #ffcf28 0 75%, #ff4054 0);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.store-links:not(.store-links--subtle) .store-badge--google { width: 135px; }

/* Simple content pages */
.content-main { flex: 1 0 auto; }
.content-card { width: min(820px, calc(100% - 40px)); margin: 0 auto; text-align: center; }
.content-card h1 { margin: 23px 0 0; font-size: 30px; line-height: 1.1; }

.buy-main { min-height: 860px; padding: 0 0 90px; }
.buy-main .content-card { width: min(840px, calc(100% - 40px)); }
.buy-art { width: 270px; height: 250px; margin: 50px auto 10px; object-fit: contain; }
.buy-copy { margin: 0 auto; font-size: 19px; line-height: 1.25; }
.buy-copy + .buy-copy { margin-top: 23px; }
.buy-form { width: 346px; max-width: 100%; margin: 26px auto 0; }
.buy-form label { display: block; margin-bottom: 5px; font-size: 18px; }
.buy-form input { display: block; width: 100%; height: 35px; border: 1px solid #bbb; border-radius: 0; padding: 5px 8px; }
.primary-button { display: block; width: 100%; min-height: 53px; margin-top: 9px; border: 0; color: #fff; background: var(--blue); font-size: 18px; cursor: pointer; }
.buy-note { margin: 43px 0 0; font-size: 18px; }

.restore-main { min-height: calc(100vh - 233px); padding: 0 0 40px; }
.restore-card { width: min(820px, calc(100% - 40px)); margin: 0 auto; text-align: left; font-size: 13px; }
.restore-card h1 { margin: 26px 0 48px; text-align: center; font-size: 30px; }
.restore-card p { margin: 0 0 27px; }
.restore-card ul { margin: 0 0 24px; padding-left: 25px; }
.restore-card li { margin: 0 0 13px; padding-left: 2px; }

/* Support */
.support-main { flex: 1 0 auto; padding: 49px 20px 34px; }
.support-wrap { width: min(1044px, 100%); margin: 0 auto; }
.support-title { margin: 0; text-align: center; font-size: 40px; line-height: 1.1; }
.support-subtitle { margin: 17px 0 28px; text-align: center; font-size: 29px; }
.support-options { display: grid; grid-template-columns: 1fr 1fr; gap: 43px; }
.support-option { min-height: 273px; padding: 38px 40px; border-radius: 13px; background: #e2ebff; display: grid; grid-template-columns: 62px 1fr; gap: 21px; }
.support-icon { display: block; width: 58px; height: 58px; }
.support-option h3 { margin: 2px 0 12px; font-size: 19px; line-height: 1.16; }
.support-option p { margin: 0 0 18px; font-size: 16px; line-height: 1.22; }
.support-option .text-link { color: var(--blue); font-size: 19px; font-weight: 600; text-decoration: none; }
.support-option store-links { display: block; margin-top: 26px; }

.store-links--subtle { gap: 15px; }
.store-links--subtle .store-badge { width: 168px; height: 38px; color: #5b5b5b; background: #fff; border: 0; border-radius: 8px; }
.store-links--subtle .store-badge strong { font-size: 17px; }
.store-links--subtle .apple-mark { filter: none; }

.contact-heading { margin: 30px 0 10px; text-align: center; font-size: 30px; }
.contact-intro { width: min(650px, 100%); margin: 0 auto 28px; text-align: center; font-size: 19px; line-height: 1.2; }
.contact-form label { display: block; margin: 0 12px 12px; font-size: 18px; font-weight: 700; }
.field { margin-bottom: 54px; }
.contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; border: 1px solid #777; border-radius: 3px; background: #fff; }
.contact-form input, .contact-form select { height: 47px; padding: 8px 12px; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%); background-position: calc(100% - 25px) 19px, calc(100% - 16px) 19px; background-size: 10px 10px; background-repeat: no-repeat; }
.contact-form textarea { min-height: 268px; resize: vertical; padding: 12px; }
.contact-form .primary-button { min-height: 61px; margin-top: -17px; }

/* Manage account */
.manage-main { flex: 1 0 auto; padding: 48px 20px 185px; }
.manage-wrap { width: min(790px, 100%); margin: 0 auto; }
.manage-title { margin: 0; text-align: center; font-size: 30px; line-height: 1.15; }
.manage-intro { width: min(790px, 100%); margin: 46px auto 31px; text-align: center; font-size: 17px; line-height: 1.25; }
.account-notice {
  display: grid;
  grid-template-columns: 82px 1fr;
  column-gap: 31px;
  margin-bottom: 45px;
  padding: 27px 38px 29px;
  border: 1px solid;
  border-radius: 7px;
}
.account-notice--subscription { border-color: #f9a928; background: #fffaf0; }
.account-notice--data { border-color: #ed4f57; background: #fff5f6; }
.account-notice__icon { display: block; width: 74px; height: 74px; }
.account-notice h2 { align-self: center; margin: 0; font-size: 24px; line-height: 1.15; }
.account-notice__body { grid-column: 2; font-size: 18px; line-height: 1.28; }
.account-notice__body p { margin: 12px 0 21px; }
.account-notice__body ul { margin: 24px 0 0; padding-left: 28px; }
.account-notice__body li { margin: 0 0 21px; padding-left: 1px; }
.account-notice store-links { display: block; margin-top: 27px; }
.manage-form-title { margin: 39px 5px 39px; font-size: 27px; line-height: 1.2; }
.manage-form .field { margin-bottom: 47px; }
.manage-form label { display: block; margin: 0 13px 10px; font-size: 18px; font-weight: 700; }
.manage-form input, .manage-form select {
  display: block;
  width: 100%;
  height: 47px;
  padding: 8px 12px;
  border: 1px solid #777;
  border-radius: 3px;
  background: #fff;
}
.manage-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 25px) 19px, calc(100% - 16px) 19px;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
.danger-button { display: block; width: 100%; min-height: 82px; border: 0; border-radius: 3px; color: #fff; background: #ed0000; font-size: 19px; font-weight: 700; cursor: pointer; }

/* Manage account success */
.manage-success-main { flex: 1 0 auto; min-height: calc(100vh - 233px); padding: 50px 20px 80px; text-align: center; }
.manage-success { width: min(800px, 100%); margin: 0 auto; }
.manage-success h1 { margin: 0; font-size: 30px; line-height: 1.15; }
.manage-success__icon { display: block; width: 100px; height: 100px; margin: 37px auto 51px; }
.manage-success__details { margin: 0 0 33px; font-size: 18px; font-weight: 700; }
.manage-success__details p { margin: 0 0 15px; }
.manage-success__message { margin: 0 0 26px; font-size: 18px; line-height: 1.25; }

@media (max-width: 700px) {
  body { font-size: 16px; }

  .site-header { height: 60px; }
  .site-header__inner { padding: 0 18px; }
  .site-header__brand { width: 27px; height: 27px; }
  .site-header__brand img { border-radius: 7px; }
  .site-header__nav { gap: 20px; font-family: Arial, sans-serif; font-size: 11px; }
  .site-header__buy { padding: 5px 8px; }
  .site-header--simple .site-header__inner { justify-content: flex-end; }

  .site-footer { min-height: 140px; padding: 25px 34px 19px; }
  .site-footer__links { max-width: 295px; margin: 0 auto; flex-wrap: wrap; column-gap: 18px; row-gap: 20px; }
  .site-footer p { margin-top: 29px; }

  .product-main { min-height: 724px; display: flex; flex-direction: column; padding: 34px 0 42px; }
  .product-copy { display: contents; text-align: center; }
  .product-copy h1 { order: 1; margin: 0 20px 23px; font-size: 39px; letter-spacing: -1.7px; }
  .product-copy .lead { order: 2; max-width: 330px; margin: 0 auto; padding: 0 15px; font-size: 18px; line-height: 1.22; }
  .product-visual { order: 3; width: 100%; margin: 2px 0 4px; aspect-ratio: 1914 / 1428; overflow: hidden; }
  .product-visual img { width: 126%; max-width: none; left: -13%; }
  .product-copy .benefit { order: 4; max-width: 330px; margin: 0 auto; padding: 0 11px; font-size: 15.5px; line-height: 1.18; }
  .download-actions { order: 5; margin: 30px auto 0; }
  .product-copy .gift-link { margin-top: 15px; font-size: 15px; }
  .store-links { justify-content: center; gap: 15px; }
  .store-badge { width: 120px; height: 40px; }

  .content-card h1 { font-size: 39px; line-height: 1.15; }
  .buy-main { min-height: 792px; padding-bottom: 87px; }
  .buy-main .content-card { width: min(350px, calc(100% - 40px)); }
  .buy-main .content-card h1 { margin-top: 34px; }
  .buy-art { width: 230px; height: 210px; margin: 19px auto 0; }
  .buy-copy { max-width: 345px; font-size: 18px; line-height: 1.28; }
  .buy-copy + .buy-copy { margin-top: 28px; max-width: 300px; }
  .buy-form { width: 350px; margin-top: 27px; }
  .buy-form label { margin-bottom: 9px; text-align: left; font-size: 18px; }
  .buy-form input { height: 43px; }
  .primary-button { min-height: 52px; margin-top: 9px; }
  .buy-note { margin-top: 25px; font-size: 15px; }

  .restore-main { min-height: 933px; padding-bottom: 74px; }
  .restore-card { width: min(330px, calc(100% - 52px)); font-size: 18px; line-height: 1.25; text-align: center; }
  .restore-card h1 { margin: 21px 0 67px; font-size: 39px; text-align: center; }
  .restore-card p { margin-bottom: 27px; }
  .restore-card ul { margin: 42px 0 101px; padding-left: 27px; text-align: left; }
  .restore-card li { margin-bottom: 26px; padding-left: 6px; }

  .support-main { padding: 17px 13px 138px; }
  .support-title { font-size: 39px; }
  .support-subtitle { margin: 18px 0 67px; font-size: 29px; }
  .support-options { display: block; }
  .support-option { min-height: 0; margin-bottom: 20px; padding: 39px 10px 17px; border-radius: 13px; grid-template-columns: 66px 1fr; gap: 18px; }
  .support-option:nth-child(2) { padding-top: 39px; padding-bottom: 62px; }
  .support-icon { width: 60px; height: 60px; }
  .support-option h3 { margin-top: 10px; margin-bottom: 17px; font-size: 18px; }
  .support-option p { margin-bottom: 24px; font-size: 16px; line-height: 1.25; }
  .support-option .text-link { display: block; margin-top: 36px; font-size: 18px; }
  .support-option store-links { grid-column: 1 / -1; margin-top: 6px; }
  .store-links--subtle { gap: 10px; }
  .store-links--subtle .store-badge { width: 147px; height: 42px; }
  .store-links--subtle .store-badge strong { font-size: 16px; }
  .contact-heading { margin: 47px 0 12px; font-size: 29px; }
  .contact-intro { max-width: 325px; margin-bottom: 29px; font-size: 17px; }
  .contact-form { padding: 0 8px; }
  .contact-form label { margin: 0 11px 11px; font-size: 17px; }
  .field { margin-bottom: 31px; }
  .contact-form input, .contact-form select { height: 46px; }
  .contact-form textarea { min-height: 268px; }
  .contact-form .primary-button { min-height: 57px; margin-top: 25px; }

  .manage-main { padding: 48px 22px 54px; }
  .manage-title { font-size: 29px; white-space: nowrap; }
  .manage-intro { margin: 48px auto 36px; padding: 0 14px; font-size: 18px; }
  .account-notice { grid-template-columns: 74px 1fr; column-gap: 18px; margin-bottom: 50px; padding: 26px 12px 20px; border-radius: 8px; }
  .account-notice__icon { width: 74px; height: 74px; }
  .account-notice h2 { font-size: 23px; }
  .account-notice__body { grid-column: 1 / -1; font-size: 18px; line-height: 1.24; }
  .account-notice__body p { margin: 18px 10px 27px; }
  .account-notice__body ul { margin: 25px 10px 0; padding-left: 27px; }
  .account-notice__body li { margin-bottom: 26px; padding-left: 2px; }
  .account-notice store-links { margin: 23px 2px 0; }
  .account-notice .store-links--subtle { align-items: flex-start; flex-direction: column; gap: 14px; }
  .account-notice .store-links--subtle .store-badge { width: auto; min-width: 129px; height: 39px; padding-left: 13px; padding-right: 13px; }
  .manage-form-title { margin: 43px 12px 11px; font-size: 28px; line-height: 1.22; }
  .manage-form .field { margin-bottom: 53px; }
  .manage-form label { margin: 0 13px 11px; font-size: 18px; }
  .manage-form input, .manage-form select { height: 46px; }
  .danger-button { min-height: 84px; margin-top: -10px; }

  .manage-success-main { min-height: calc(100vh - 200px); padding: 45px 30px 70px; }
  .manage-success h1 { font-size: 29px; white-space: nowrap; }
  .manage-success__icon { margin: 37px auto 40px; }
  .manage-success__details { margin-bottom: 49px; font-size: 18px; }
  .manage-success__message { margin: 0 auto 27px; max-width: 315px; font-size: 18px; }
}

@media (min-width: 701px) and (max-height: 950px) {
  .product-main { min-height: calc(100vh - 233px); }
}