• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205
• 206
• 207
• 208
• 209
• 210
• 211
• 212
• 213
• 214
• 215
• 216
• 217
• 218
• 219
• 220
• 221
• 222
• 223
• 224
• 225
• 226
• 227
• 228
• 229
• 230
• 231
• 232
• 233
• 234
• 235
• 236
• 237
• 238
• 239
• 240
• 241
• 242
• 243
• 244
• 245
• 246
• 247
• 248
• 249
• 250
• 251
• 252
• 253
• 254
• 255
• 256
• 257
• 258
• 259
• 260
• 261
• 262
• 263
• 264
• 265
• 266
• 267
• 268
• 269
• 270
• 271
• 272
• 273
• 274
• 275
• 276
• 277
• 278
• 279
• 280
• 281
• 282
• 283
• 284
• 285
• 286
• 287
• 288
• 289
• 290
• 291
• 292
• 293
• 294
• 295
• 296
• 297
• 298
• 299
• 300
• 301
• 302
• 303
• 304
• 305
• 306
• 307
• 308
• 309
• 310
• 311
• 312
• 313
• 314
• 315
• 316
• 317
• 318
• 319
• 320
• 321
• 322
• 323
• 324
• 325
• 326
• 327
• 328
• 329
• 330
• 331
• 332
• 333
• 334
• 335
• 336
• 337
• 338
• 339
• 340
• 341
• 342
• 343
• 344
• 345
• 346
• 347
• 348
• 349
• 350
• 351
• 352
• 353
• 354
• 355
• 356
• 357
• 358
• 359
• 360
• 361
• 362
• 363
• 364
• 365
• 366
• 367
• 368
• 369
• 370
• 371
• 372
• 373
• 374
• 375
• 376
• 377
• 378
• 379
• 380
• 381
• 382
• 383
• 384
• 385
• 386
• 387
• 388
• 389
• 390
• 391
• 392
• 393
• 394
• 395
• 396
• 397
• 398
• 399
• 400
• 401
• 402
• 403
• 404
• 405
• 406
• 407
• 408
• 409
• 410
• 411
• 412
• 413
• 414
• 415
• 416
• 417
• 418
• 419
• 420
• 421
• 422
• 423
• 424
• 425
• 426
• 427
• 428
• 429
• 430
• 431
• 432
• 433
• 434
• 435
• 436
• 437
• 438
• 439
• 440
• 441
• 442
• 443
• 444
• 445
• 446
• 447
• 448
• 449
• 450
• 451
• 452
• 453
• 454
• 455
• 456
• 457
• 458
• 459
• 460
• 461
• 462
• 463
• 464
• 465
• 466
• 467
• 468
• 469
• 470
• 471
• 472
• 473
• 474
• 475
• 476
• 477
• 478
• 479
• 480
• 481
• 482
• 483
• 484
• 485
• 486
• 487
• 488
• 489
• 490
• 491
• 492
• 493
• 494
• 495
• 496
• 497
• 498
• 499
• 500
• 501
• 502
• 503
• 504
• 505
• 506
• 507
• 508
• 509
• 510
• 511
• 512
• 513
• 514
• 515
• 516
• 517
• 518
• 519
• 520
• 521
• 522
• 523
• 524
• 525
• 526
• 527
• 528
• 529
• 530
• 531
• 532
• 533
• 534
• 535
• 536
• 537
• 538
• 539
• 540
• 541
• 542
• 543
• 544
• 545
• 546
• 547
• 548
• 549
• 550
• 551
• 552
• 553
• 554
• 555
• 556
• 557
• 558
• 559
• 560
• 561
• 562
• 563
• 564
• 565
• 566
• 567
• 568
• 569
• 570
• 571
• 572
• 573
• 574
• 575
• 576
• 577
• 578
• 579
• 580
• 581
• 582
• 583
• 584
• 585
• 586
• 587
• 588
• 589
• 590
• 591
• 592
• 593
• 594
• 595
• 596
• 597
• 598
• 599
• 600
• 601
• 602
• 603
• 604
• 605
• 606
• 607
• 608
• 609
• 610
• 611
• 612
• 613
• 614
• 615
• 616
• 617
• 618
• 619
• 620
• 621
• 622
• 623
• 624
• 625
• 626
• 627
• 628
• 629
• 630
• 631
• 632
• 633
• 634
• 635
• 636
• 637
• 638
• 639
• 640
• 641
• 642
• 643
• 644
• 645
• 646
• 647
• 648
• 649
• 650
• 651
• 652
• 653
• 654
• 655
• 656
• 657
• 658
• 659
• 660
• 661
• 662
• 663
• 664
• 665
• 666
• 667
• 668
• 669
• 670
• 671
• 672
• 673
• 674
• 675
• 676
• 677
• 678
• 679
• 680
• 681
• 682
• 683
• 684
• 685
• 686
• 687
• 688
• 689
• 690
• 691
• 692
• 693
• 694
• 695
• 696
• 697
• 698
• 699
• 700
• 701
• 702
• 703
• 704
• 705
• 706
• 707
• 708
• 709
• 710
• 711
• 712
• 713
• 714
• 715
• 716
• 717
• 718
• 719
• 720
• 721
• 722
• 723
• 724
• 725
• 726
• 727
• 728
• 729
• 730
• 731
• 732
• 733
• 734
• 735
• 736
• 737
• 738
• 739
• 740
• 741
• 742
• 743
• 744
• 745
• 746
• 747
• 748
• 749
• 750
• 751
• 752
• 753
• 754
• 755
• 756
• 757
• 758
• 759
• 760
• 761
• 762
• 763
• 764
• 765
• 766
• 767
• 768
• 769
• 770
• 771
• 772
• 773
• 774
• 775
• 776
• 777
• 778
• 779
• 780
• 781
• 782
• 783
• 784
• 785
• 786
• 787
• 788
• 789
• 790
• 791
• 792
• 793
• 794
• 795
• 796
• 797
• 798
• 799
• 800
• 801
• 802
• 803
• 804
• 805
• 806
• 807
• 808
• 809
• 810
• 811
• 812
• 813
• 814
• 815
• 816
• 817
• 818
• 819
• 820
• 821
• 822
• 823
• 824
• 825
• 826
• 827
• 828
• 829
• 830
• 831
• 832
• 833
• 834
• 835
• 836
• 837
• 838
• 839
• 840
• 841
• 842
• 843
• 844
• 845
• 846
• 847
• 848
• 849
• 850
• 851
• 852
• 853
• 854
• 855
• 856
• 857
• 858
• 859
• 860
• 861
• 862
• 863
• 864
• 865
• 866
• 867
• 868
• 869
• 870
• 871
• 872
• 873
• 874
• 875
• 876
• 877
• 878
• 879
• 880
• 881
• 882
• 883
• 884
• 885
• 886
• 887
• 888
• 889
• 890
• 891
• 892
• 893
• 894
• 895
• 896
• 897
• 898
• 899
• 900
• 901
• 902
• 903
• 904
• 905
• 906
• 907
• 908
• 909
• 910
• 911
• 912
• 913
• 914
• 915
• 916
• 917
• 918
• 919
• 920
• 921
• 922
• 923
• 924
• 925
• 926
• 927
• 928
• 929
• 930
• 931
• 932
• 933
• 934
• 935
• 936
• 937
• 938
• 939
• 940
• 941
• 942
• 943
• 944
• 945
• 946
• 947
• 948
• 949
• 950
• 951
• 952
• 953
• 954
• 955
• 956
• 957
• 958
• 959
• 960
• 961
• 962
• 963
• 964
• 965
• 966
• 967
• 968
• 969
• 970
• 971
• 972
• 973
• 974
• 975
• 976
• 977
• 978
• 979
• 980
• 981
• 982
• 983
• 984
• 985
• 986
• 987
• 988
• 989
• 990
• 991
• 992
• 993
• 994
• 995
• 996
• 997
• 998
• 999
• 1000
• 1001
• 1002
• 1003
• 1004
• 1005
• 1006
• 1007
• 1008
• 1009
• 1010
• 1011
• 1012
• 1013
• 1014
• 1015
• 1016
• 1017
• 1018
• 1019
• 1020
• 1021
• 1022

<template>
  <div class="container">
    <!-- Masthead & bullets -->
    <section class="masthead fluid desktop">
      <div class="language-name-wrap">
        <h1 class="language-name" v-html="`${content.header.buy} ${language.name}`"></h1>
        <div
          class="hero-mobile"
          :style="`background-image: url('/nuxt-assets/img/hero/catalog/mobile/${mastheadImage}.jpg')`"
        >
          <svg
            class="yellow-curve"
            viewBox="0 0 100 15"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
          >
            <path
              d="M 0,0 L 0,9 S 45,13 65,8 L 100,0 Z"
              fill="#ecc200"
              stroke="#ecc200"
              stroke-width="1"
            />
          </svg>
          <svg
            class="white-curve"
            viewBox="0 0 100 15"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
          >
            <path
              d="M 0,15 S 7,7.8 18,7 L 100,1 L 100,15 Z"
              fill="#fff"
              stroke="#fff"
              stroke-width="1"
            />
          </svg>
        </div>
        <div class="award">
          <img src="/nuxt-assets/img/awards/pcmag.png" alt="PC mag award" />
          <div>
            <span>{{ content.header.award.line1 }}</span>
            <span>{{ content.header.award.line2 }}</span>
          </div>
        </div>
        <ul class="bullets">
          <li v-for="(bullet, i) in content.header.bullets" :key="i" v-html="bullet"></li>
        </ul>
      </div>
      <div class="hero-img">
        <img :src="`/nuxt-assets/img/hero/catalog/desktop/${mastheadImage}.png`" alt="Hero image" />
      </div>
    </section>

    <!-- Products -->
    <section class="products">
      <ProductBox
        v-for="(product, key) in products"
        :msrp="product.msrp"
        :price="product.price"
        :level="product.lvl"
        :name="product.productName && product.productName[product.lvl] || product.name"
        :cartLink="product.cart"
        :showFullPrice="product.fullPrice"
        :bonusMonths="product.bonusMonth"
        :xpay="parseInt($route.query.xpay) || product.xpay"
        :email="$route.query.email"
        :ribbonText="product.ribbonText && product.ribbonText[product.lvl]"
        :offerText="product.offerText && product.offerText[product.lvl]"
        :products="products"
        :iframeCart="$store.state.locale == 'es'? false : true"
        :metadata="product.metadata"
        :productFilter="productFilter"
        :key="key"
      />
    </section>

    <div class="guarantee-badge">
      <div class="container">
        <p>{{ products.renewal_notice }}</p>
        <Guarantee />
      </div>
    </div>

    <!-- Feature bullets / checks -->
    <section class="features">
      <div class="lockup">
        <img data-src="/nuxt-assets/img/online-lockup.png" alt="Product Screenshot" />
      </div>
      <div class="bullets">
        <h3>{{ content.lockup.heading }}</h3>
        <p v-html="content.lockup.p"></p>
        <ul>
          <li v-for="(bullet, i) in content.lockup.bullets" :key="i" v-html="bullet"></li>
        </ul>
      </div>
    </section>

    <!-- Trusted By -->
    <section class="trustedby">
      <h3>{{ content.trustedby.heading }}</h3>
      <div>
        <img alt="Trip Advisor Logo" data-src="/nuxt-assets/img/logos/tripadvisor-2.png" />
        <img alt="Fender Logo" data-src="/nuxt-assets/img/logos/fender.svg" />
        <img alt="NASA Logo" data-src="/nuxt-assets/img/logos/nasa.svg" />
        <img alt="Calvin Klein Logo" data-src="/nuxt-assets/img/logos/ck.svg" />
      </div>
    </section>

    <!-- Interactive images -->
    <section class="interactive-features fluid">
      <div class="images">
        <div class="image-desktop">
          <img
            :data-src="`/nuxt-assets/img/features/${activeItem}-desktop.jpg`"
            :src="featureImagesSeen ? `/nuxt-assets/img/features/${activeItem}-desktop.jpg`:''"
            alt="Product Screenshot"
          />
          <div class="image-mobile">
            <img
              :data-src="`/nuxt-assets/img/features/${activeItem}-mobile.jpg`"
              :src="featureImagesSeen ? `/nuxt-assets/img/features/${activeItem}-mobile.jpg`:''"
              alt="Product screenshot in mobile"
            />
          </div>
        </div>
      </div>
      <!-- end images side -->
      <div class="features">
        <h3>{{ content.interactive_features.heading }}</h3>
        <p>{{ content.interactive_features.p }}</p>
        <div class="list">
          <!-- Loop through our features item -->
          <div
            class="item"
            v-for="item in content.interactive_features.items"
            :key="item.icon"
            :data-item="item.icon"
            @mouseover="onFeatureHover"
          >
            <div class="icon">
              <img
                :data-src="`/nuxt-assets/img/features/${item.icon}.svg`"
                :alt="`${item.header} feature`"
              />
            </div>
            <div class="content">
              <div class="header">{{ item.title }}</div>
              <div class="body">{{ item.description }}</div>
            </div>
          </div>

          <div class="disclaimers">
            <p>{{ content.interactive_features.disclaimer }}</p>
            <p>{{ content.interactive_features.disclaimer2 }}</p>
          </div>
        </div>
      </div>
    </section>
    <!-- end features side -->

    <!-- Demo setion (now freetrial) -->
    <section class="demo" data-bg="/nuxt-assets/img/screenshot-tiles.jpg">
      <div class="container">
        <h3>{{ content.demo.heading }}</h3>
        <p>{{ content.demo.p }}</p>
        <a href="/lp/tryitnow">{{ content.demo.cta }}</a>
      </div>
    </section>


    <!-- Usage Stats -->
    <section class="usage-statistics fluid">
      <h5>{{ content.stats.heading }}</h5>
      <p>{{ content.stats.p }}</p>
      <div class="icons">
        <div class="corporations" v-for="(item, i) in content.stats.items" :key="i">
          <div
            class="icon"
            :data-bg="`/nuxt-assets/img/icons/${(i== 0) ? 'suitcase': (i==1) ? 'heart' : (i==2) ? 'book' : (i==3) ? 'globe' : ''}.svg`"
          ></div>
          <div class="count">{{ item.number }}</div>
          <div>{{ item.entity }}</div>
        </div>
      </div>
    </section>

    
    
    <CompanyQuotes />

    <section class="trustpilot-reviews">
      <TrustpilotProductReviews />
    </section>

    <!-- E-mail collection form -->
    <section class="email-collection-form">
      <FormFooterEmailCollection />
    </section>
  </div>
</template>

<script>
import ProductBox from '~/components/ProductBox.vue';
import Guarantee from '~/components/Guarantee.vue';
import CompanyQuotes from '~/components/CompanyQuotes.vue';
import TrustpilotProductReviews from '~/components/TrustpilotProductReviews.vue';
import FormFooterEmailCollection from '~/components/FormFooterEmailCollection.vue';
import CartPanel from '~/components/CartPanel.vue';
import Overlay from '~/components/Overlay.vue';

export default {
  layout: 'catalog-page',

  components: {
    ProductBox,
    Guarantee,
    CompanyQuotes,
    TrustpilotProductReviews,
    FormFooterEmailCollection,
    Overlay,
    CartPanel
  },

  asyncData({ isDev, payload, store, $axios }) {
    // TODO this is bad. fix this. put in yaml or something.
    

    let content, language;
    if (isDev) {
      content = require(`~/data/catalog-pages/${store.state.locale}.yaml`);
      language = {
        name: "Spanish",
        region: "Latin America",
        id: "esp",
        catalog: "buy-spanish"
      };
      console.log('dev....')
      let meta = {
      en: {
        title: `Buy ${language.name} - Start Learning ${language.name} Today | Rosetta Stone®`,
        description: `Learn ${language.name} on any device, anywhere, the best way to learn a language online. Buy Rosetta Stone ${language.name}.`
      },
      es: {
        title: `Comprar ${language.name} Rosetta Stone® suscripción en línea`,
        description: `Comprar la suscripción de Rosetta Stone® ${language.name}. Aprende a Hablar Inglés con nuestro software de aprendizaje de idiomas. ¡Es la manera rápida de aprender ${language.name}! Estudia en tu celular o computadora.`
      }
    };
      return { meta, language, content };
      
    } else if (!isDev && payload) {
      console.log('payload....')
      content = payload.content;
      language = payload.language;
    } else {
      console.log('---- NOTHING')
    }

    console.log('---------')
    console.log(content)

    
    
  },

  head() {
    return {
      htmlAttrs: {
        lang: this.$store.state.locale == 'en' ? 'en' : 'es-US'
      },
      title: this.meta[process.env.LOCALE].title,
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: this.meta[process.env.LOCALE].description
        }
      ],
      link: [
        { rel: 'shortcut icon', href: '/favicon.ico' },
        {
          rel: 'canonical',
          href: `https://www.rosettastone.com/${this.language.catalog}`
        }
      ],
      script: [
        {
          src: `https://www.rosettastone.com/lp/data-models/${this.$store.state.locale}/js/products/sitewide.js`
        },
        { src: '/nuxt-assets/js/vendor/jquery/jquery.min.js', body: true },
        {
          src:
            '//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js',
          body: true
        }
      ]
    };
  },

  data() {
    return {
      //content: { ...content },
      content: '',
      language: {},
      meta: {},
      products: [],
      appstoreReviews: [],
      activeItem: 'devices',
      featureImagesSeen: false,
      productFilter: []
    };
  },

  async mounted() {
    // Fetch Appstore reviews
    let xmlReviews = 'https://itunes.apple.com/us/rss/customerreviews/id=435588892/mostrecent/xml';
    let appstoreRequest = await this.$axios.get(xmlReviews, {
      responseType: 'document'
    });
    let xml = appstoreRequest.data;
    var entries = [...xml.querySelectorAll('entry')];
    for (let entry of entries) {
      let rating = entry.querySelector('rating').innerHTML,
        title = entry.querySelector('title').innerHTML,
        date = entry.querySelector('updated').innerHTML,
        author = entry.querySelector('author > name').innerHTML,
        content = entry.querySelector('content[type="text"]').innerHTML;
      if (content.length >= 390) {
        continue;
      }

      if (/4|5/g.test(rating)) {
        this.appstoreReviews.push({
          title,
          date,
          author,
          content,
          rating
        });
      }
    }

    // Lazy load images
    let imgs = document.querySelectorAll('[data-src], [data-bg]');
    let observer = new IntersectionObserver(loadImg, {
      // Start downloading when img is within 50px of Y axis
      rootMargin: '50px 0px',
      threshold: 0.01
    });

    // Start observing the images
    imgs.forEach(img => observer.observe(img));

    function loadImg(entries, observer) {
      entries.forEach(e => {
        // If in viewport
        let el = e.target;
        if (e.intersectionRatio > 0) {
          let bg = el.dataset.bg || null;
          let src = el.dataset.src || null;

          if (bg) {
            el.style.backgroundImage = `url('${bg}')`;
          }
          if (src) {
            el.src = src;
          }
          // Stop observing
          observer.unobserve(e.target);
        }
      });
    }

    this.productFilter = pagedata.productfilter || ['3', '12-u', '24-u', 'lifetime-u'];

    // Latin only supports 12m
    if (this.language.id == 'lat') {
      this.productFilter = ['12'];
    }

    this.products = window.pagedata.products
      .filter(p => p.id == this.language.id)
      .filter(p => this.productFilter.indexOf(p.lvl) != -1);

    window.setTimeout(function() {
      document.querySelector('#expirationdate').innerHTML = pagedata.expirationdate;
    }, 1000);
  },

  created() {
    this.$store.commit('UPDATE_LANGCODE', this.language.id);
  },

  methods: {
    /**
     * When cursor hovers over a feature item, update
     * the big image on the left.
     */
    onFeatureHover(e) {
      this.featureImagesSeen = true;
      this.activeItem = e.target.dataset.item;
    }
  },

  computed: {
    mastheadImage() {
      let imgs = ['ara', 'chi', 'deu', 'eng', 'esp', 'fra', 'ita'];
      let img = imgs.find(i => i == this.$store.state.langId) || null;
      if (img) {
        return img;
      }
      return 'generic';
    }
  }
};
</script>





<style lang='stylus'>
// Unscoped styles
body {
  font-family: effra;
  margin-top: 81px !important; // 82px!important
}
</style>


<style lang="stylus" scoped>
$pagewidth = 1100px;

// Typography
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: #262626;
  font-family: helvetica;
}

h3 {
  font-size: 40px;
}

a {
  text-decoration: none;
}

// Containers
.fluid {
  max-width: 100%;
}

section {
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}

// Masthead
section.masthead {
  display: flex;

  & > div {
    flex-grow: 1;
    display: flex;
    color: #262626;
    // justify-content center
    justify-content: flex-end;
    margin-bottom: 2em;
  }

  div.hero-img {
    width: 100%;
    height: 100%;

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

  div.hero-mobile {
    display: none;
  }

  .language-name-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: end;
  }

  .language-name {
    font-size: 56px;
    font-weight: 700;
    font-family: helvetica;
    width: 600px;
    padding: 1em 0 0 0;
  }

  ul {
    width: 600px;

    li {
      margin-bottom: 1em;
      line-height: 19px;
    }
  }

  .award {
    display: flex;
    align-items: center;
    width: 600px;
    margin: 2em 0;

    div {
      display: flex;
      flex-direction: column;
      margin-left: 1em;
      font-weight: 700;

      & > span:last-of-type {
        color: #7e7e7e;
      }
    }
  }

  @media $tablet {
    & > div.hero-img {
      display: none;
    }

    .language-name-wrap {
      width: 100%;
    }

    .language-name {
      background: $yellow;
      width: 100%;
      font-size: 28px;
      text-align: center;
      padding: 1em 0;

      i {
        display: block;
      }
    }

    div.hero-mobile {
      height: 310px;
      width: 100%;
      position: relative;
      display: block;

      svg.white-curve {
        display: none;
      }

      svg.yellow-curve {
        display: none;
      }
    }

    .award {
      width: 100%;
      padding: 0 1em;
      box-sizing: border-box;
      flex-direction: column;
      text-align: center;
      font-family: effra;

      div {
        margin-top: 15px;
      }
    }

    .bullets {
      width: 100%;
      box-sizing: border-box;
      padding: 0 0.5em 0 2em;
      margin-top: 0;

      li {
        line-height: 24px;
      }
    }
  }

  @media $phone {
    .language-name {
      padding: 1em 0 0;
    }

    div.hero-mobile {
      height: 310px;
      width: 100%;
      position: relative;
      display: block;

      svg.white-curve {
        position: absolute;
        bottom: -1px;
        display: block;
      }

      svg.yellow-curve {
        position: absolute;
        top: -2px;
        right: 0;
        display: block;
      }
    }
  }
}

// Products
section.products {
  flex-direction: row;
  justify-content: space-between;

  @media $tablet {
    flex-wrap: wrap;
    padding: 0 2em;

    .product-wrap {
      max-width: 330px;
      margin-bottom: 1em;
    }

    list = 1 .. 15;

    for n in list {
      .product-wrap:nth-child({n}) {
        order: list[(-(n))];
      }
    }
  }

  @media $phone {
    flex-direction: column;
    padding: 0 1em;
  }
}

div.guarantee-badge {
  width: $pagewidth;
  margin: 4em auto;

  @media $tablet {
    margin: 1em 0;
    width: 100%;

    .container {
      padding: 0 1em;
      text-align: center;
    }
  }
}

// Feature bullets
section.features {
  display: flex;

  .lockup {
    flex-basis: 100%;
    align-items: center;
    display: flex;

    img {
      display: block;
      width: 90%;
    }
  }

  .bullets {
    li {
      position: relative;
      margin-bottom: 25px;
      line-height: 27px;
      list-style: none;

      &:before {
        content: '';
        position: absolute;
        left: -29px;
        top: 7px;
        display: inline-block;
        border: 3px solid #3f93d3;
        border-top: none;
        border-right: none;
        height: 8px;
        width: 18px;
        transform: rotate(-45deg);
      }
    }
  }

  @media $tablet {
    flex-direction: column;
    padding: 0 35px;

    .lockup {
      margin: 3em 0 2em 0;
    }

    .bullets {
      h3 {
        display: none;
      }
    }
  }
}

// Trusted By
section.trustedby {
  margin: 200px auto;
  align-items: center;
  flex-direction: column;

  h3 {
    margin-bottom: 50px;
  }

  & > div {
    display: flex;
    align-items: center;
    width: 80%;
    justify-content: space-evenly;

    img:nth-of-type(1) {
      width: 200px;
    }

    img:nth-of-type(2) {
      width: 120px;
    }

    img:nth-of-type(3) {
      width: 90px;
    }

    img:nth-of-type(4) {
      width: 170px;
    }
  }

  @media $tablet {
    margin: 2em auto;

    h3 {
      font-size: 28px;
      text-align: center;
    }

    & > div {
      flex-direction: row;

      img {
        margin: 0 0 2em 0;
      }
    }
  }

  @media $phone {
    & > div {
      flex-direction: column;
    }
  }
}

// Interactive Features
section.interactive-features {
  justify-content: center;

  div.images {
    display: flex;
    align-items: center;
    justify-content: baseline;
    position: relative;

    div.image-desktop {
      width: 80%;
      max-width: 646px;
      float: right;
      position: relative;
      margin-top: -15em;

      img {
        width: 100%;
        display: block;
      }
    }

    div.image-mobile {
      width: 294px;
      height: 166px;
      position: absolute;
      right: -40px;
      bottom: -60px;
      box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.5);

      img {
        width: 100%;
        display: block;
      }
    }
  }

  // The text & interactive items
  div.features {
    max-width: 646px;

    p {
      font-size: 16px;
      line-height: 25px;
    }

    div.list {
      .item {
        display: flex;
        margin-bottom: 20px;

        & > * {
          pointer-events: none;
        }

        &:hover {
          color: #0098db;
        }
      }

      .icon {
        color: #fff;
        min-width: 65px;
        display: flex;
        justify-content: center;
      }

      .content {
        padding-left: 1em;
        font-size: 15px;
      }

      .header {
        font-weight: bold;
      }

      .body {
        line-height: 25px;
      }
    }

    .disclaimers p {
      font-size: 12px;
      width: 90%;
    }
  }

  @media $tablet {
    flex-direction: column;

    .features {
      text-align: center;

      h3 {
        text-align: center;
        font-size: 28px;
      }
    }

    .interactive-features, .images, .list {
      display: none !important;
    }
  }
}

// Demo/Trial area
section.demo {
  flex-direction: column;
  width: 820px;
  text-align: center;
  margin: 3em auto;
  // background-image url(/nuxt-assets/img/screenshot-tiles.jpg) // set by data-bg
  background-repeat: no-repeat;
  color: #fff;
  padding: 2em 0;

  h3 {
    color: inherit;
    padding: 0 0 10px 0;
  }

  p {
    width: 350px;
    margin: 2em auto;
  }

  a {
    background: #ecc200;
    border-radius: 8px;
    padding: 25px 50px;
    font-weight: 700;
    color: #262626;
    display: inline-block;
  }

  @media $tablet {
    width: 100%;

    h3 {
      font-size: 28px;
    }

    p {
      width: 100%;
    }
  }
}

/*
section.reviews
  flex-direction column
  overflow hidden
  display none
  div.header
    background url(https://www.rosettastone.com/lp/catalog-pages/catalog-pages-assets/yellow-bridge-top.svg) top no-repeat
    background-size cover
    padding-top 200px
    text-align center
  .cards
    display flex
    background #F0C433
  .card
    min-width 300px
    height 420px
    color #464544
    padding 20px
    box-sizing border-box
    background #fff
    margin-right 15px
    & > *
      padding-bottom 6px
    .title
      font-weight 700
    .stars
      color #ecc200
      font-size 24px
  @media $tablet
    display none
*/
section.usage-statistics {
  display: flex;
  flex-direction: column;
  align-items: center;
  // background url(https://www.rosettastone.com/lp/catalog-pages/catalog-pages-assets/yellow-bridge-bottom.svg) top no-repeat
  background-size: contain;
  // padding-top 300px
  margin-bottom: 5em;

  h5 {
    font-weight: 400;
    font-size: 40px;
  }

  h5, p {
    text-align: center;
  }

  .icons {
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    width: 100%;
    margin: 3em 0;

    & > div {
      text-align: center;
    }

    .icon {
      height: 80px;
      margin-bottom: 10px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  @media $tablet {
    padding: 0;
    background: none;
    font-family: effra;

    .icons {
      flex-wrap: wrap;

      & > div {
        margin: 1em 0;
        width: 40%;
      }
    }
  }
}

section.email-collection-form {
  width: 100%;
  display: block;
  max-width: 100%;
  margin-top: 50px;
  background-color: $rosetta-yellow;
}

section.email-collection-form {
  width: 100%;
  display: block;
  max-width: 100%;
  margin-top: 50px;
}
</style>