/* Scoped to /mobile; colors and display type follow the mobile app. */
.cc-app {
  --app-lime: #a3ce20;
  --app-muted: #b5b5b0;
  --app-line: #30312b;
  background: #090a08;
  color: #f5f5ef;
  font-family: 'Inter', sans-serif;
}
.cc-app *, .cc-app *::before, .cc-app *::after { box-sizing: border-box; }
.cc-app .cc-app-wrap { max-width: 1240px; margin: auto; padding: 0 32px; }
.cc-app h1, .cc-app h2, .cc-app h3 { color: #f5f5ef; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; letter-spacing: .015em; }
.cc-app p { color: var(--app-muted); line-height: 1.75; }
.cc-app a:focus-visible { outline: 3px solid #c6a6ff; outline-offset: 6px; }
.cc-app .cc-app-eyebrow { color: var(--app-lime); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px; }
.cc-app-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--app-lime); margin-right: 7px; }
.cc-app-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 76px 0 68px; }
.cc-app h1 { font-size: clamp(3.6rem, 6.7vw, 6rem); line-height: .99; margin: 0 0 26px; }
.cc-app h1 span { color: var(--app-lime); }
.cc-app .cc-app-lead { font-size: 1.05rem; max-width: 480px; margin-bottom: 30px; }
.cc-app-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.cc-app .cc-app-download { display: inline-flex; align-items: center; gap: 14px; background: var(--app-lime); color: #101207; padding: 13px 22px; border: 1px solid var(--app-lime); border-radius: 12px; font-size: 1.2rem; font-weight: 700; line-height: 1.25; text-decoration: none; }
.cc-app-download small { display: block; font-size: .66rem; font-weight: 500; }
.cc-app-download i { font-size: 1.7rem; }
.cc-app-arrow { margin-left: 12px; }
.cc-app .cc-app-download:hover { background: #b9e443; color: #101207; }
.cc-app .cc-app-text-link { color: #f5f5ef; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.cc-app-text-link span { margin-left: 8px; }
.cc-app .cc-app-availability { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 23px 0 0; font-size: .72rem; }
.cc-app-availability i { color: var(--app-lime); }
.cc-app .cc-app-availability a { color: var(--app-muted); text-decoration: underline; text-underline-offset: 3px; }
.cc-app-hero-visual { position: relative; height: 590px; isolation: isolate; }
.cc-app-orbit { position: absolute; inset: 12% -2% 6%; border: 1px solid #a3ce2025; border-radius: 50%; background: radial-gradient(ellipse, #a3ce201a, transparent 70%); z-index: -1; }
.cc-app-phone { position: absolute; margin: 0; width: 235px; border: 6px solid #252622; border-radius: 32px; overflow: hidden; box-shadow: 0 24px 60px #0008; background: #111; }
.cc-app img { display: block; width: 100%; height: auto; }
.cc-app-phone-front { top: 38px; left: 5%; transform: rotate(-6deg); }
.cc-app-phone-back { top: 7px; right: 0; transform: rotate(9deg); width: 218px; }
.cc-app-visual-label { position: absolute; bottom: 6px; right: 20px; border: 1px solid #414634; background: #1a1d13; padding: 12px 19px; border-radius: 30px; font-size: .73rem; letter-spacing: .04em; }
.cc-app-visual-label span { color: var(--app-lime); margin-right: 8px; }
.cc-app-feature-nav { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--app-line); padding: 23px 0; gap: 15px; }
.cc-app-feature-nav a { text-align: center; color: #d4d5ce; font-size: .8rem; font-weight: 500; }
.cc-app-feature-nav a:hover, .cc-app .cc-app-text-link:hover { color: var(--app-lime); }
.cc-app-feature-nav i { color: var(--app-lime); margin-right: 12px; }
.cc-app-section { padding-top: 92px; }
.cc-app-section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 35px; }
.cc-app h2 { font-size: clamp(2.8rem, 4.5vw, 4rem); line-height: 1.05; margin-bottom: 18px; }
.cc-app-section-heading > p { max-width: 360px; font-size: .9rem; }
.cc-app-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cc-app-feature { border: 1px solid var(--app-line); border-radius: 20px; background: linear-gradient(160deg, #20251a, #141512 48%); overflow: hidden; scroll-margin-top: 100px; }
.cc-app-feature-purple { background: linear-gradient(160deg, #252030, #141512 48%); }
.cc-app-feature-gold { background: linear-gradient(160deg, #29261b, #141512 48%); }
.cc-app-feature-copy { padding: 28px 27px 20px; min-height: 259px; }
.cc-app-number { color: var(--app-lime); font-size: .64rem; letter-spacing: .16em; font-weight: 700; }
.cc-app-feature-purple .cc-app-number { color: #bc9df5; }
.cc-app-feature-gold .cc-app-number { color: #dec55b; }
.cc-app h3 { font-size: 1.85rem; line-height: 1.12; margin: 17px 0 12px; }
.cc-app-feature p { font-size: .83rem; margin: 0; }
.cc-app-feature-shot { width: 77%; margin: 0 auto 27px; border: 4px solid #343530; border-radius: 23px; overflow: hidden; }
.cc-app .cc-app-screen-note { text-align: center; font-size: .7rem; margin-top: 20px; }
.cc-app-more { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 65px; padding: 96px 0; }
.cc-app-more-copy > p { max-width: 390px; font-size: .9rem; }
.cc-app-details { padding: 0; list-style: none; margin: 30px 0 0; }
.cc-app-details li { display: flex; gap: 18px; border-top: 1px solid var(--app-line); padding: 20px 0 0; }
.cc-app-details i { color: var(--app-lime); font-size: 1rem; padding-top: 5px; width: 20px; flex-shrink: 0; }
.cc-app-details h3 { font-size: 1.45rem; margin: 0 0 6px; }
.cc-app-details p { font-size: .8rem; }
.cc-app-more-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cc-app-more-screens figure { min-width: 0; margin: 0; }
.cc-app-more-screens figure:nth-child(2) { padding-top: 55px; }
.cc-app-more-screens img { border: 4px solid #30312b; border-radius: 23px; }
.cc-app-more-screens figcaption { text-align: center; color: var(--app-muted); font-size: .68rem; margin-top: 14px; }
.cc-app-get { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; border-top: 1px solid var(--app-line); padding: 65px 0 90px; align-items: center; }
.cc-app-get > div > p:not(.cc-app-eyebrow) { max-width: 360px; font-size: .9rem; margin-bottom: 24px; }
.cc-app-ios { background: #181916; border: 1px solid var(--app-line); padding: 35px; border-radius: 20px; scroll-margin-top: 100px; }
.cc-app-ios > i { font-size: 2rem; }
.cc-app-soon { float: right; border: 1px solid #4c4d44; border-radius: 20px; padding: 5px 12px; font-size: .66rem; color: #d0d0c8; }
.cc-app-ios h3 { font-size: 2.2rem; margin-top: 26px; }
.cc-app-ios p { font-size: .88rem; }
#inside-the-app { scroll-margin-top: 85px; }
@media (max-width: 1000px) {
  .cc-app-hero { gap: 12px; }
  .cc-app-phone { width: 205px; }
  .cc-app-phone-back { width: 190px; }
  .cc-app-hero-visual { height: 530px; }
  .cc-app-feature-copy { padding: 23px 20px; min-height: 290px; }
  .cc-app-more { gap: 35px; }
}
@media (max-width: 760px) {
  .cc-app .cc-app-wrap { padding-inline: 22px; }
  .cc-app-hero { grid-template-columns: 1fr; padding: 45px 0 32px; gap: 32px; }
  .cc-app h1 { font-size: clamp(3.8rem, 12vw, 5.5rem); }
  .cc-app-hero-copy { max-width: 530px; }
  .cc-app-hero-visual { width: min(100%, 440px); margin: auto; height: 535px; }
  .cc-app-phone-front { left: 6%; }
  .cc-app-phone-back { right: 6%; }
  .cc-app-feature-nav { gap: 10px; }
  .cc-app-feature-nav a { font-size: .68rem; }
  .cc-app-feature-nav i { display: block; margin: 0 0 10px; font-size: 1rem; }
  .cc-app-section { padding-top: 55px; }
  .cc-app-section-heading { display: block; }
  .cc-app-features { grid-template-columns: 1fr; }
  .cc-app-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .cc-app-feature-copy { min-height: 0; }
  .cc-app-feature-shot { width: 88%; margin: 22px auto; border-radius: 17px; }
  .cc-app-more { grid-template-columns: 1fr; padding: 60px 0; }
  .cc-app-more-screens { max-width: 480px; margin: auto; }
  .cc-app-get { grid-template-columns: 1fr; gap: 35px; padding: 45px 0 60px; }
}
@media (max-width: 400px) {
  .cc-app .cc-app-wrap { padding-inline: 18px; }
  .cc-app-hero-visual { height: 480px; }
  .cc-app-phone-front { width: 185px; left: 2%; }
  .cc-app-phone-back { width: 170px; right: 3%; }
  .cc-app-visual-label { right: 0; }
  .cc-app-feature { grid-template-columns: 1fr; }
  .cc-app-feature-copy { padding-bottom: 0; }
  .cc-app-feature-shot { width: 68%; }
  .cc-app-ios { padding: 25px; }
}