/* Shared, version-scoped sections for /, Home V3 and Home V4. */
/* Home V4 steps section */
.home-v4__loop {display: flex; flex-direction: column; gap: var(--css-gap-32);}
.home-v4__loop-eyebrow {color: var(--css-font-secondary-1); font-size: var(--css-fs-s); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;}
.home-v4__loop .page-header {align-items: flex-start; max-width: 720px; text-align: left;}
.home-v4__loop .page-header h2 {font-size: clamp(3.2rem, 4vw, 5rem); letter-spacing: -.03em;}
.home-v4__loop-steps {display: grid; gap: var(--css-gap-16); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0;}
.home-v4__loop-steps li {align-items: flex-start; background: var(--css-background-secondary-1); border-radius: var(--css-dimensions-border-radius); display: flex; gap: var(--css-gap-16); padding: var(--css-gap-24);}
.home-v4__loop-steps li > .tap-icon {background-color: var(--css-background-accent-1); border-radius: var(--css-dimensions-border-radius-circle); flex: 0 0 auto;}
.home-v4__loop-steps h3 {font-size: var(--css-fs-l); margin-bottom: var(--css-gap-8);}
.home-v4__loop-steps p {color: var(--css-font-secondary-1); line-height: 1.4;}

@media (max-width: 767px) {
  .home-v4__loop-steps {grid-template-columns: 1fr;}
}

/* Home V3 preview */
.home-v3 {background: var(--css-background-primary-1); color: var(--css-font-primary-1); overflow: hidden;}
.home-v3 > main {display: flex; flex-direction: column; gap: 112px; margin: 0 auto; max-width: 1200px; padding: 72px var(--css-gap-24) 128px;}
.home-v3__eyebrow {color: var(--css-font-secondary-1); display: block; font-size: var(--css-fs-s); font-weight: 600; letter-spacing: .08em; margin-bottom: var(--css-gap-16); text-transform: uppercase;}
.home-v3__hero {align-items: center; display: grid; gap: 80px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); min-height: 620px;}
.home-v3__hero-copy {align-items: flex-start; display: flex; flex-direction: column; max-width: 680px;}
.home-v3__hero h1 {font-size: clamp(4.6rem, 6.1vw, 7.4rem); letter-spacing: -.05em; line-height: .98; margin: 0;}
.home-v3__lead {color: var(--css-font-secondary-1); font-size: clamp(1.8rem, 2vw, 2.2rem); line-height: 1.45; margin: var(--css-gap-24) 0 0; max-width: 650px;}
.home-v3__store-actions {align-items: stretch; display: flex; flex-wrap: wrap; gap: var(--css-gap-8); margin-top: var(--css-gap-32);}
.home-v3__store-button {align-items: center; background-position: 18px center; background-repeat: no-repeat; background-size: 24px; border: 1px solid transparent; border-radius: var(--css-dimensions-border-radius-circle); display: inline-flex; font-size: 1.6rem; font-weight: 600; justify-content: center; line-height: 24px; min-height: 52px; padding: 13px 22px 13px 52px;}
.home-v3__store-button--primary {background-color: var(--css-background-accent-1); color: var(--css-font-accent-1);}
.home-v3__store-button--primary:hover {background-color: var(--css-background-accent-2); color: var(--css-font-accent-1);}
.home-v3__store-button--primary.icon-apple {background-image: url(../icons/light/logo-apple.svg);}
.home-v3__store-button--primary.icon-google-play {background-image: url(../icons/light/google-play.svg);}
.home-v3__store-button--secondary {background-color: var(--css-background-secondary-1); border-color: var(--color-border-default); color: var(--css-font-primary-1);}
.home-v3__store-button--secondary:hover {background-color: var(--css-background-secondary-2); color: var(--css-font-primary-1);}
.home-v3__text-link {color: var(--css-font-primary-1); display: inline-flex; font-weight: 600; gap: var(--css-gap-8); margin-top: var(--css-gap-24); min-height: 44px; padding: 10px 0; text-decoration: underline; text-decoration-color: var(--css-background-accent-1); text-decoration-thickness: 2px; text-underline-offset: 5px;}
.home-v3__example {margin: 0; position: relative;}
.home-v3__example::before {background: var(--css-background-accent-1); border-radius: 48px; content: ''; inset: 30px -18px -18px 30px; position: absolute; transform: rotate(3deg);}
.home-v3__example-window {background: var(--css-background-primary-1); border: 8px solid var(--css-font-primary-1); border-radius: 42px; box-shadow: var(--css-box-shadow); display: flex; flex-direction: column; min-height: 540px; overflow: hidden; position: relative; transform: rotate(-2deg);}
.home-v3__example-topbar {align-items: center; border-bottom: 1px solid var(--css-background-secondary-1); display: flex; gap: var(--css-gap-8); padding: var(--css-gap-24);}
.home-v3__example-topbar img {height: 32px; width: 32px;}
.home-v3__example-content {display: flex; flex: 1; flex-direction: column; gap: var(--css-gap-16); padding: var(--css-gap-32) var(--css-gap-24);}
.home-v3__example-label {color: var(--css-font-secondary-1); font-size: var(--css-fs-s); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;}
.home-v3__example-title {font-size: clamp(2.6rem, 3vw, 3.6rem); letter-spacing: -.025em; line-height: 1.1; margin: 0;}
.home-v3__example-content p {color: var(--css-font-secondary-1); line-height: 1.5; margin: 0;}
.home-v3__example-content dl {display: grid; gap: var(--css-gap-8); margin-top: auto;}
.home-v3__example-content dl > div {background: var(--css-background-secondary-1); border-radius: var(--css-dimensions-border-radius); padding: 12px var(--css-gap-16);}
.home-v3__example-content dt {color: var(--css-font-secondary-1); font-size: var(--css-fs-s);}
.home-v3__example-content dd {font-weight: 600; margin: 2px 0 0;}
.home-v3__example-action {align-items: center; background: var(--css-background-accent-1); color: var(--css-font-accent-1); display: flex; font-weight: 600; gap: var(--css-gap-8); justify-content: center; min-height: 64px; padding: var(--css-gap-16);}
.home-v3__example-action .tap-icon {background-color: transparent;}
.home-v3__example figcaption {background: var(--css-background-primary-1); border-radius: var(--css-dimensions-border-radius-circle); color: var(--css-font-secondary-1); display: table; font-size: var(--css-fs-s); margin: var(--css-gap-24) auto 0; padding: 4px 10px; position: relative; text-align: center; z-index: 1;}
.home-v3__problem {align-items: start; border-bottom: 1px solid var(--css-background-secondary-1); border-top: 1px solid var(--css-background-secondary-1); display: grid; gap: 80px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 72px 0;}
.home-v3__problem h2, .home-v3__section-heading h2, .home-v3__privacy h2, .home-v3__download h2 {font-size: clamp(3.2rem, 4vw, 5rem); letter-spacing: -.035em; line-height: 1.08; margin: 0;}
.home-v3__problem-copy {display: grid; gap: var(--css-gap-16);}
.home-v3__problem-copy p {color: var(--css-font-secondary-1); font-size: var(--css-fs-l); line-height: 1.55; margin: 0;}
.home-v3__section-heading {max-width: 790px;}
.home-v3__steps > div.wrapper, .home-v3__capabilities > div.wrapper {display: flex; flex-direction: column; gap: var(--css-gap-32);}
.home-v3__steps ol {display: grid; gap: var(--css-gap-16); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0;}
.home-v3__steps li {background: var(--css-background-secondary-1); border-radius: 32px; display: flex; flex-direction: column; gap: var(--css-gap-32); min-height: 250px; padding: var(--css-gap-24);}
.home-v3__steps li > span {align-items: center; background: var(--css-background-accent-1); border-radius: var(--css-dimensions-border-radius-circle); color: var(--css-font-accent-1); display: flex; font-size: var(--css-fs-s); font-weight: 600; height: 40px; justify-content: center; width: 40px;}
.home-v3__steps li > div {margin-top: auto;}
.home-v3__steps h3, .home-v3__capabilities h3 {font-size: var(--css-fs-l); margin: 0 0 var(--css-gap-8);}
.home-v3__steps p, .home-v3__capabilities p {color: var(--css-font-secondary-1); line-height: 1.5; margin: 0;}
.home-v3__capability-grid {display: grid; gap: var(--css-gap-16); grid-template-columns: repeat(2, 1fr);}
.home-v3__capability-grid article {border: 1px solid var(--color-border-default); border-radius: var(--css-dimensions-border-radius); min-height: 220px; padding: var(--css-gap-24);}
.home-v3__capability-grid .tap-icon {background-color: var(--css-background-secondary-1); margin-bottom: var(--css-gap-32);}
.home-v3__privacy > div.wrapper, .home-v3__download > div.wrapper {text-align:left;align-items: center; background: var(--css-background-secondary-1); border-radius: 24px; display: grid; gap: 64px; grid-template-columns: auto 1fr; padding: 64px;}
.home-v3__privacy p {font-size: var(--css-fs-l); line-height: 1.55; margin: var(--css-gap-16) 0 0; max-width: 760px;}
.home-v3__privacy-mark {align-items: center; background: var(--css-background-primary-1); border-radius: 50%; display: flex; height: 112px; justify-content: center; width: 112px;}
.home-v3__privacy-mark img {height: 64px; width: 64px;}
.home-v3__download > div.wrapper {background: var(--css-background-accent-1);  color: var(--css-font-accent-1); }
.home-v3__download .home-v3__eyebrow, .home-v3__download p {color: var(--css-font-accent-1);}
.home-v3__download p {font-size: var(--css-fs-l); line-height: 1.45; margin: var(--css-gap-16) 0 0;}
.home-v3__download .home-v3__store-actions {margin-top: 0; max-width: 280px;}
.home-v3__store-button--dark {background-color: #0D0C22; color: #F4F4F4; width: 100%;}
.home-v3__store-button--dark:hover {background-color: #303030; color: #F4F4F4;}
.home-v3__store-button--dark.icon-apple {background-image: url(../icons/dark/logo-apple.svg);}
.home-v3__store-button--dark.icon-google-play {background-image: url(../icons/dark/google-play.svg);}
.home-v3__store-button--light {background-color: #FFFFFF; border-color: #0D0C22; color: #0D0C22; width: 100%;}
.home-v3__store-button--light:hover {background-color: #F0F0F2; color: #0D0C22;}
.home-v3__store-button--light.icon-apple {background-image: url(../icons/light/logo-apple.svg);}
.home-v3__store-button--light.icon-google-play {background-image: url(../icons/light/google-play.svg);}
.home-v3__footer {border-top: 1px solid var(--css-background-secondary-1); display: flex; gap: var(--css-gap-32); justify-content: space-between; margin: 0 auto; max-width: 1200px; padding: var(--css-gap-32) var(--css-gap-24);}
.home-v3__footer > div {display: flex; flex-direction: column; gap: var(--css-gap-8);}
.home-v3__footer-brand {align-items: center; display: flex; font-size: var(--css-fs-l); font-weight: 600; gap: var(--css-gap-8); min-height: 44px;}
.home-v3__footer-brand img {height: 28px; width: 28px;}
.home-v3__footer p {color: var(--css-font-secondary-1); margin: 0;}
.home-v3__footer nav {align-items: center; display: flex; flex-wrap: wrap; gap: var(--css-gap-8) var(--css-gap-24); justify-content: flex-end;}
.home-v3__footer nav a {align-items: center; display: inline-flex; min-height: 44px;}
.home-v3 a:focus-visible {outline: 3px solid var(--color-border-focus); outline-offset: 4px;}


.home-v3__download .wrapper {align-items: center;
    display: flex;
    gap: 16px;
    flex-direction: column; text-align: center;}

@media (max-width: 900px) {
  .home-v3 > main {gap: 80px; padding-top: var(--css-gap-32);}
  .home-v3__hero {gap: 64px; grid-template-columns: 1fr;}
  .home-v3__hero-copy {max-width: 760px;}
  .home-v3__example {margin: 0 auto; max-width: 440px; width: calc(100% - 36px);}
  .home-v3__problem {gap: var(--css-gap-32); grid-template-columns: 1fr;}
  .home-v3__privacy {grid-template-columns: 1fr;}
  .home-v3__download .home-v3__store-actions {max-width: none; width: 100%;}
  .home-v3__download .home-v3__store-button {width: auto;}
}

@media (max-width: 767px) {
  .home-v3 > main {gap: 64px; padding: var(--css-gap-32) var(--css-gap-16) 96px;}
  .home-v3__hero {display: flex; flex-direction: column; min-height: 0;}
  .home-v3__hero h1 {font-size: clamp(4.2rem, 13vw, 5.4rem);}
  .home-v3__lead {font-size: var(--css-fs-m);}
  .home-v3__store-actions {flex-direction: column; width: 100%;}
  .home-v3__store-button {width: 100%;}
  .home-v3__example {max-width: 360px;}
  .home-v3__example-window {border-width: 6px; min-height: 500px;}
  .home-v3__problem {padding: 48px 0;}
  .home-v3__problem-copy p {font-size: var(--css-fs-m);}
  .home-v3__steps > ol, .home-v3__capability-grid {grid-template-columns: 1fr;}
  .home-v3__steps li {min-height: 210px;}
  .home-v3__privacy, .home-v3__download {gap: var(--css-gap-32); padding: var(--css-gap-32) var(--css-gap-24);}
  .home-v3__privacy-mark {height: 80px; width: 80px;}
  .home-v3__privacy-mark img {height: 48px; width: 48px;}
  .home-v3__privacy p, .home-v3__download p {font-size: var(--css-fs-m);}
  .home-v3__download .home-v3__store-button {width: 100%;}
  .home-v3__footer {align-items: flex-start; flex-direction: column; padding-left: var(--css-gap-16); padding-right: var(--css-gap-16);}
  .home-v3__footer nav {justify-content: flex-start;}
}

/* Homepage V4 preview */
.home-v4 {background: var(--css-background-primary-1); color: var(--css-font-primary-1); overflow: hidden;}
.home-v4 > main {display: flex; flex-direction: column; gap: 56px; }
.home-v4 > main > section.box {background: #1D1B16;}
.home-v4 > main > section > div.wrapper {margin: 0 auto; max-width: 1200px;}

/*.home-v4__hero {background-color: var(--css-background-secondary-1);}*/
.home-v4__hero > div.wrapper {align-items: start; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; padding: 0 56px;position: relative;}
.home-v4__hero-copy {align-items: flex-start; display: flex; flex-direction: column; min-width: 0; margin-top: 128px;}
.home-v4__brand {align-items: center; display: flex; flex-direction: row;}
.home-v4__brand img {height: clamp(80px, 9vw, 100px); width: clamp(80px, 9vw, 100px);}
.home-v4__brand h1 {font-size: 56px; line-height: 64px;}
.home-v4__claim {color: #F4F4F4; font-size: clamp(2.5rem, 2.8vw, 3.5rem); font-weight: 600; line-height: 1.18; margin: var(--css-gap-24) 0 0;}
.home-v4__slide-copy {margin: var(--css-gap-16) 0; }
.home-v4__slide-copy p {margin: var(--css-gap-8) 0 0; max-width: 460px;}
.home-v4__hero .home-v3__store-actions {margin-top: var(--css-gap-16);}
.home-v4__hero .home-v3__store-button--secondary {background-color: #292824; border-color: #62615D; color: #F4F4F4;}
.home-v4__hero .home-v3__store-button--secondary:hover {background-color: #383731; color: #F4F4F4;}
.home-v4__hero .home-v3__store-button--secondary.icon-google-play {background-image: url(../icons/dark/google-play.svg);}
.home-v4__slider {height:560px;overflow:hidden;align-items: center; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; width: 100%;}
.home-v4__slides {position: relative; width: 100%; margin-top: -32px}
.home-v4__slide {align-items: center; display: flex; height: 100%; justify-content: center; margin: 0; width: 100%;}
.home-v4__slide[hidden], .home-v4__slider-controls[hidden] {display: none;}
.home-v4__slide picture { margin-top: -32px; display: flex; height: 100%; justify-content: center; max-width: 100%;}
.home-v4__slide img { height: 100%; max-width: 100%; object-fit: contain; width: auto;}
.home-v4__slider-controls {align-items: center; display: flex; gap: var(--css-gap-16); justify-content: center; margin-top: var(--css-gap-8); position: absolute; z-index: 1; bottom: 16px}
.home-v4__slider-arrow {align-items: center; background: #383731; border: 1px solid #62615D; border-radius: 50%; color: #F4F4F4; cursor: pointer; display: flex; font-size: 2.2rem; height: 44px; justify-content: center; width: 44px;}
.home-v4__slider-arrow:hover {background: #4A4943;}
.home-v4__slider-dots {align-items: center; display: flex; gap: 10px;}
.home-v4__slider-dots button {background: #77756E; border: 0; border-radius: 50%; cursor: pointer; height: 12px; padding: 0; width: 12px;}
.home-v4__slider-dots button[aria-pressed="true"] {background: var(--css-background-accent-1); height: 16px; width: 16px;}
.home-v4 a:focus-visible, .home-v4 button:focus-visible {outline: 3px solid var(--color-border-focus); outline-offset: 4px;}

@media (max-width: 900px) {
  .home-v4 > main {gap: 32px; padding-top: var(--css-gap-32);}
  .home-v4__hero {gap: 32px; grid-template-columns: 1fr; min-height: 0; padding: var(--css-gap-32);}
  .home-v4__slides {height: 550px;}
  .home-v4__brand h1 {font-size: clamp(4.6rem, 6vw, 6.8rem);}
  .home-v4__claim {font-size: clamp(2.3rem, 3vw, 3rem);}
}

@media (max-width: 767px) {
  .home-v4 > main {gap: 32px; padding: var(--css-gap-16) var(--css-gap-16) 96px;}
  .home-v4__hero {display: flex; flex-direction: column; gap: var(--css-gap-32); min-height: 0; padding: var(--css-gap-32) var(--css-gap-24);}
  .home-v4__hero-copy {width: 100%;}
  .home-v4__brand img {height: 84px; width: 84px;}
  .home-v4__brand h1 {font-size: clamp(4.6rem, 13vw, 6rem);}
  .home-v4__claim {font-size: clamp(2.4rem, 7vw, 3.2rem);}
  .home-v4__slide-copy {min-height: 116px;}
  .home-v4__hero .home-v3__store-actions {flex-direction: column; width: 100%;}
  .home-v4__hero .home-v3__store-button {width: 100%;}
  .home-v4__slides {height: 500px;}
  .home-v4__slider-controls {margin-top: 0;}
}

/* The homepage uses inner wrappers for its layout, so collapse those on narrow screens. */
@media (max-width: 900px) {
  .home-v4 > main {padding-left: var(--css-gap-24); padding-right: var(--css-gap-24);}
  .home-v4 > main > section > .wrapper {width: 100%;}
  .home-v4 .home-v4__hero {padding: 0;}
  .home-v4 .home-v4__hero > .wrapper {display: flex; flex-direction: column; gap: var(--css-gap-32); overflow: visible; padding: 0;}
  .home-v4 .home-v4__hero-copy {margin-top: 0; width: 100%;}
  .home-v4 .home-v4__hero h1 {font-size: clamp(3.8rem, 9vw, 5.6rem); line-height: 1.08; margin: 0;}
  .home-v4 .home-v4__hero .home-v3__lead {font-size: 1.7rem; max-width: 45ch;}
  .home-v4 .home-v4__hero .home-v3__store-button--secondary.icon-apple {background-image: url(../icons/dark/logo-apple.svg);}
  .home-v4 .home-v4__slider {height: auto; overflow: visible;}
  .home-v4 .home-v4__slides {height: min(70vw, 420px); margin-top: 0;}
  .home-v4 .home-v4__slide picture {height: 100%; margin-top: 0;}
  .home-v4 .home-v4__slide img {height: 100%; max-width: 100%;}
  .home-v4 .home-v4__slider-controls {margin-top: var(--css-gap-16); position: static;}
  .home-v4 .home-v3__privacy, .home-v4 .home-v3__download {padding: 0;}
  .home-v4 .home-v3__privacy > .wrapper {gap: var(--css-gap-24); grid-template-columns: 1fr; padding: var(--css-gap-32);}
  .home-v4 .home-v3__steps ol {grid-template-columns: 1fr;}
  .home-v4 .home-v3__steps li {min-height: 0;}
  .home-v4 .home-v3__download > .wrapper {align-items: stretch; display: flex; flex-direction: column; gap: var(--css-gap-24); padding: var(--css-gap-32); text-align: left;}
  .home-v4 .home-v3__download .home-v3__store-actions {max-width: none; width: 100%;}
  .home-v4 .home-v3__download .home-v3__store-button {width: 100%;}
}

@media (max-width: 767px) {
  .home-v4 > main {gap: 56px; padding: var(--css-gap-24) var(--css-gap-16) 80px;}
  .home-v4 .home-v4__hero .home-v3__store-actions {width: 100%;}
  .home-v4 .home-v4__hero .home-v3__store-button {min-width: 0; width: 100%;}
  .home-v4 .home-v3__privacy > .wrapper, .home-v4 .home-v3__download > .wrapper {padding: var(--css-gap-32) var(--css-gap-24);}
}