@font-face {
    font-family: 'Plaax6Ney-36-Regular';
    src: url('../fonts/Plaax-36-Ney-Regular-205TF.woff2') format('woff2');
}

@font-face {
    font-family: 'Plaax6Ney-46-Bold';
    src: url('../fonts/Plaax-46-Ney-Bold-205TF.woff2') format('woff2');
}

* {
    box-sizing: border-box;
}

html {
    /* Colors */
    --primary-light-9: #fdfbff;
    --primary-light-8: #f2e8fe;
    --primary-light-7: #e5d2fd;
    --primary-light-6: #d7bbfc;
    --primary-light-5: #c9a5fb;
    --primary-light-3: #a879f7;
    --primary-light-1: #824cf3;
    --primary-base: #6b33ef;
    --primary-dark-2: #552bb5;
    --secondary-light-2: #75ddd2;
    --secondary-base: #35d3c6;
    --secondary-dark-6: #1f433f;
    --primary-white: #fff;
    --orange-base: #f44f00;
    --focus-highlight: var(--secondary-base);

    /* Color computation values */
    --lighten-step: 25%;

    --bright-blue-h: 236;
    --bright-blue-s: 88%;
    --bright-blue-l: 58%;
    --bright-blue: hsl(var(--bright-blue-h) var(--bright-blue-s) var(--bright-blue-l));
    --base-color: var(--bright-blue);
    --base-color-light: hsl(var(--bright-blue-h) var(--bright-blue-s) calc(var(--bright-blue-l) + var(--lighten-step)));
    --highlight-color: #f40000;

    --font-stack-regular: "Plaax6Ney-36-Regular", system-ui, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
    --font-stack-bold: "Plaax6Ney-46-Bold", system-ui, "Helvetica Neue", Helvetica,
    Arial, sans-serif;

    /* Fluid sizing */
    --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
    --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
    --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
    --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
    --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);

    /* Transitions */
    --hover-transition-in: all 250ms ease-in-out;
    --hover-transition-out: all 200ms ease-in;
}

body {
    max-width: 40rem;
    color: var(--primary-white);
    font-family: var(--font-stack-regular);
    background-color: var(--base-color);
    margin: 2rem auto;
}

@media screen and (max-width: 520px) {
    body {
        margin: 1rem;
    }
}

h1 {
    font-size: var(--size-step-4);
    line-height: 1.05;
    font-family: var(--font-stack-bold);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.5em;
}

p {
    margin-top: 0;
}

:any-link {
    color: inherit;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

:any-link:hover {
    text-decoration-color: var(--orange-base);
}

:any-link:focus-visible {
    outline: 1px solid var(--focus-highlight);
}

form {
    display: grid;
    grid-auto-rows: max-content;
    row-gap: 1em;
    justify-items: center;
}

header {
    text-align: center;
    text-wrap: balance;
    margin-bottom: var(--size-step-1);
}

main {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
}

fieldset {
    display: grid;
    grid-auto-rows: auto;
    row-gap: 0.25em;
    padding: 0;
    border: none;
}

label,
legend,
select {
    font-size: var(--size-step-0);
    font-family: var(--font-stack-bold);
    font-weight: normal;
}

legend {
    width: 100%;
    padding-inline-start: 0;
    margin-bottom: 0.25em;
}

select {
    appearance: none;
    width: 100%;
    max-width: 100%;
    display: block;
    font-size: var(--size-step-1);
    padding: 0.5em 1.4em 0.5em 0.5em;
    background-image: url('data:image/png;base64,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'),
    linear-gradient(to bottom, #fff 0%, #fff 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    border: 1px solid var(--primary-dark-2);
    border-radius: 4px;
}

select::-ms-expand {
    display: none;
}

select option {
    font-weight: normal;
}

input {
    width: 100%;
    font-family: var(--font-stack-regular);
    font-size: var(--size-step-1);
    padding: 0.5em;
    border: 1px solid var(--primary-dark-2);
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible {
    outline: 1px solid var(--focus-highlight);
}

input:user-invalid {
    outline: 1px solid var(--orange-base);
    outline-offset: 2px;
}

button, .btn {
    appearance: none;
    display: flex;
    align-items: center;
    font-size: var(--size-step-1);
    font-family: var(--font-stack-bold);
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--size-step-1);
    transition: var(--hover-transition-in);
}

a.btn {
    cursor: default;
    width: max-content;
}

button:focus-visible {
    outline: 1px solid var(--focus-highlight);
    outline-offset: 2px;
}

blockquote::before {
    content: open-quote;
}

blockquote::after {
    content: close-quote;
}

blockquote {
    quotes: "“" "”" "‘" "’";
    text-wrap: pretty;
    margin: 0;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block: 2rem;
}

figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 1em;
}

figcaption > * + * {
    margin-inline-start: 0.5em;
}

figcaption img {
    border-radius: 50%;
}

.textCenter {
    text-align: center;
}

blockquote.textCenter {
    font-size: var(--size-step-1);
    margin-block-end: 0.5em;
}

.stepCounter {
    margin-block: 1.5em;
}

.stepCounter ol {
    display: flex;
    justify-content: center;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
}

.stepCounter li .stepMarker {
    width: 30px;
    height: 10px;
    background-color: var(--primary-light-3);
}

.stepCounter li:first-child .stepMarker {
    border-radius: 2px 0 0 2px;
}

.stepCounter li:last-child .stepMarker {
    border-radius: 0 2px 2px 0;
}

.stepCounter li.active .stepMarker {
    background-color: var(--primary-white);
}

.stepCounterText {
    font-size: 0.8rem;
    text-align: center;
}

.overline {
    font-size: 1.3em;
    font-family: var(--font-stack-bold);
    text-transform: uppercase;
}

.question {
    font-size: var(--size-step-3);
}

.personalizationQuestions {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
    padding-inline-start: 0;
    margin-block: 0;
}

.personalizationQuestions li {
    list-style: none;
    color: var(--primary-base);
    background-color: var(--primary-white);
    border-radius: 8px;
    transition: all 150ms ease-in;
}

.personalizationQuestions li:hover {
    transform: scale(1.025);
    transition: all 200ms ease-in-out;
}

.personalizationQuestions li:active {
    background-color: var(--primary-light-8);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%);
    transition: all 200ms ease-in-out;
}

.personalizationQuestions li a {
    display: block;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

li .primaryText {
    display: block;
    font-size: var(--size-step-1);
    font-family: var(--font-stack-bold);
    line-height: 1.05;
    margin-block-end: 0.25em;
}

li .secondaryText {
    display: block;
    font-size: var(--size-step-0);
    line-height: 1.1;
}

.trialSteps {
    margin: 0 auto;
}

.trialSteps li {
    position: relative;
    list-style: none;
    padding-left: 2.5em;
}

.trialSteps li::before {
    position: absolute;
    left: -24px;
    content: '';
    width: 43px;
    height: 36px;
}

.trialSteps li:first-child::before {
    top: -4px;
    background-image: url("data:image/svg+xml,%3Csvg width='43px' height='36px' viewBox='0 0 43 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Production' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='icn-1-today'%3E%3Cpath d='M13.4619941,4.69559822 C7.31913691,8.34781791 0,14.7390614 0,24.1303706 C0,32.2172593 6.92700598,36 14.2462559,36 C19.6048512,36 24.8327738,34.0434255 29.5380059,31.304289 C35.6808631,27.6521821 43,21.2608258 43,11.8695166 C43,3.7825151 36.072994,0 28.7537441,0 C23.3950358,0 18.1671131,1.95646166 13.4619941,4.69559822' id='Oval' fill='%23FFFFFF'%3E%3C/path%3E%3Cpath d='M19.7083333,9.9 L14.3333333,9.9 L14.3333333,13.5 C15.1255651,12.3441904 16.3250089,11.47301 17.4015429,10.8712773 C18.1331429,10.4708818 18.9077442,10.1311176 19.7083333,9.9 Z M30.4583333,16.8994361 C30.4583333,13.0653097 27.4629873,9.93965116 23.7627241,9.9 C25.027671,10.4066576 25.9588812,11.4629924 25.9588812,13.1187615 C25.9588812,14.8437801 25.2436858,16.4262205 23.3604974,18.0431711 C21.0894977,19.8320329 19.1572883,20.3848884 17.5993418,20.3848884 C16.3391136,20.3848884 15.1189094,19.9852889 14.3333333,19.1535972 L14.3333333,23.9058408 C14.3333333,26.0843034 16.0418365,27.9 18.149391,27.9 L22.2140791,27.9 L22.2140791,23.8701899 L23.6940486,23.8701899 C27.4257131,23.8701899 30.4583333,20.7566864 30.4583333,16.8994361 Z' id='Logoglyph' fill='%236B33EF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.trialSteps li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='43px' height='36px' viewBox='0 0 43 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Production' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='icn-2-learn'%3E%3Cpath d='M13.4619941,4.69559822 C7.31913691,8.34781791 0,14.7390614 0,24.1303706 C0,32.2172593 6.92700598,36 14.2462559,36 C19.6048512,36 24.8327738,34.0434255 29.5380059,31.304289 C35.6808631,27.6521821 43,21.2608258 43,11.8695166 C43,3.7825151 36.072994,0 28.7537441,0 C23.3950358,0 18.1671131,1.95646166 13.4619941,4.69559822' id='Oval' fill='%23FFFFFF'%3E%3C/path%3E%3Cpath d='M27.7708333,24.3 L27.5319971,24.3008382 C27.3749469,25.1990346 26.4764454,26.1577326 25.1885826,26.685392 C23.5100411,27.3731191 21.8057086,27.0681989 21.3818349,26.0043396 C20.9579901,24.9404685 21.975111,23.5205223 23.6536525,22.8327952 C24.4736757,22.4968177 25.2998544,22.39775 25.9798854,22.5083429 L25.9783636,12.6 L18.8123636,12.6 L18.8125,24.3 L18.5736638,24.3008382 C18.4166136,25.1990346 17.5181121,26.1577326 16.2302492,26.685392 C14.5517078,27.3731191 12.8473753,27.0681989 12.4235015,26.0043396 C11.9996568,24.9404685 13.0167777,23.5205223 14.6953192,22.8327952 C15.5153424,22.4968177 16.3415211,22.39775 17.0215521,22.5083429 L17.0208333,9.9 L27.7708333,9.9 L27.7708333,24.3 Z' id='Combined-Shape' fill='%236B33EF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.trialSteps li:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='43px' height='36px' viewBox='0 0 43 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Production' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='icn-3-trial-end'%3E%3Cpath d='M13.4619941,4.69559822 C7.31913691,8.34781791 0,14.7390614 0,24.1303706 C0,32.2172593 6.92700598,36 14.2462559,36 C19.6048512,36 24.8327738,34.0434255 29.5380059,31.304289 C35.6808631,27.6521821 43,21.2608258 43,11.8695166 C43,3.7825151 36.072994,0 28.7537441,0 C23.3950358,0 18.1671131,1.95646166 13.4619941,4.69559822' id='Oval' fill='%23FFFFFF'%3E%3C/path%3E%3Cpolygon id='Icon' fill='%236B33EF' points='32.25 12.6680477 30.3294866 10.8 18.3406422 22.3773559 12.6696429 16.9161328 10.75 18.7698885 18.3406422 26.1'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.trialSteps li:not(:last-child) {
    padding-block-end: 2em;
    border-left: 2px solid var(--primary-white);
}

.subheadText {
    font-size: var(--size-step-2);
    line-height: 1.2;
    font-family: var(--font-stack-bold);
    margin-block-start: -0.5em;
}

#cancellationReminder {
    text-align: center;
    margin-block: 2em;
}

#cancellationReminder h2 {
    font-size: var(--size-step-0);
    margin-block-end: 0.25em;
}

.promoName {
    justify-self: center;
    width: max-content;
    color: var(--highlight-color);
    font-size: var(--size-step-0);
    font-family: var(--font-stack-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.25em 0.5em;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 auto;
}

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

.planOption {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #fff;
    border-radius: 8px;
    transition: all 150ms ease-in;
}

.planOption:hover {
    transform: scale(1.02);
    transition: all 250ms ease-out;
}

.planOption:has(input:checked) {
    color: var(--base-color);
    background-color: #fff;
}

.planOption input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    padding: 0;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    border: 0;
    border-radius: 0;
    /* Not removed via appearance */
    margin: 0;
}

.planOption:focus-within {
    outline: 1px solid var(--secondary-base);
    outline-offset: 2px;
}

.planOption input[type="radio"]:focus-visible {
    outline: 0;
}

.planOption[for="annual"] {
    position: relative;
}

/*.planOption[for="annual"]::after {*/
/*    position: absolute;*/
/*    top: -1px;*/
/*    right: 20px;*/
/*    content: 'Popular';*/
/*    color: var(--secondary-dark-6);*/
/*    font-size: 0.8em;*/
/*    padding: 0.25em 0.5em 0.35em;*/
/*    background-color: var(--secondary-base);*/
/*    border-top: 1px solid var(--secondary-light-2);*/
/*    border-radius: 0 0 4px 4px;*/
/*}*/

.planOption .primaryLabel {
    display: flex;
    justify-content: flex-start;
    font-size: var(--size-step-1);
}

.planOption .planNote {
    display: block;
    font-size: 0.8em;
}

.planOption .prices {
    display: flex;
    align-items: flex-end;
    gap: 1em;
}

.planOption .prices .price {
    /*text-decoration: line-through;*/
    /*text-decoration-color: hsl(19 100 48 / 50%);*/
    /*text-decoration-thickness: 2px;*/
}

.planOption .prices .discountPrice {
    color: #fec0c0;
    font-size: 120%;
    opacity: 0.8;
}

.planOption:has(input:checked) .discountPrice {
    color: var(--highlight-color);
    opacity: 1;
}

.planFeatures {
    color: #000;
    padding: 1em;
    background-color: #fff;
    border-radius: 10px;
}

.planFeatures h2 {
    color: var(--base-color);
    text-align: center;
    margin: 0;
}

.planFeatures ul {
    padding-inline-start: 1.8em;
    list-style-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon fill='%233745f2' points='16.6269531 1.98432595 15.1783682 0.525390625 6.13554708 9.5672441 1.85808454 5.30205783 0.41015625 6.74983118 6.13554708 12.4746094'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

.planFeatures ul li + li {
    margin-block-start: 0.75em;
}

.planSongsNote {
    font-size: 80%;
    margin: 0;
}

/*textAboveForm*/
.textAboveForm .priceRow {
    display: flex;
    justify-content: space-between;
}

.textAboveForm .priceRow + .priceRow {
    padding-top: 9px;
    border-top: 1px solid var(--base-color-light);
    margin-top: 9px;
    margin-bottom: 9px;
}

.textAboveForm .priceColumnText {
    text-align: left;
}

.textAboveForm .priceColumnTextTitle {
    font-size: 18px;
    line-height: 1.05;
}

.textAboveForm .priceColumnTextDate {
    font-size: 16px;
    color: var(--base-color-light);
}

.textAboveForm .priceColumnAmount {
    text-align: right;
}

.textAboveForm .priceColumnAmountNumber {
    font-family: var(--font-stack-bold);
    font-size: 20px;
}

.textAboveForm .priceColumnAmountPerMonth {
    font-size: 16px;
    line-height: 18px;
}

.textAboveForm .renewalIntervalAndStartDate {
    color: var(--base-color-light);
    font-size: 16px;
    line-height: 1.15;
    text-align: left;
}

.textAboveForm .renewalPriceColumnAmount {
    color: var(--base-color-light);
    font-size: 18px;
    font-weight: bold;
}

.textAboveForm .planGuarantee {
    display: grid;
    grid-template-columns: 65px 1fr;
    grid-column-gap: 1em;
    align-items: center;
    padding: 0.5em;
    background-color: transparent;
    margin-top: 1em;
}

.textAboveForm .planGuarantee img {
    filter: drop-shadow(1px 1px rgba(255, 255, 255, 0.5)) drop-shadow(1px -1px rgba(255, 255, 255, 0.5))    drop-shadow(-1px 1px rgba(255, 255, 255, 0.5)) drop-shadow(-1px -1px rgba(255, 255, 255, 0.5));
}

.textAboveForm .planGuarantee .blurb {
    color: var(--base-color-light);
    text-align: left;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
}

@media screen and (max-width: 660px) {
    .textAboveForm .priceColumnTextTitle {
        font-size: 16px;
    }
    .textAboveForm .priceColumnTextDate {
        font-size: 14px;
    }
    .textAboveForm .planGuarantee {
        align-items: start;
    }
    .textAboveForm .planGuarantee .blurb {
        font-size: 14px;
    }
    .textAboveForm .priceColumnAmountNumber {
        font-size: 16px;
    }
    .textAboveForm .priceColumnAmountPerMonth {
        font-size: 14px;
    }
}

.centeredPanel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.formSectionHeader {
    display: flex;
    align-items: center;
}

.formSectionHeader p {
    margin-bottom: 0;
    margin-left: 0.25em;
}

.inputGroup {
    width: 100%;
    display: grid;
    row-gap: 0.25em;
}

.inputGroupRowOuter {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 0.25em;
}

.inputGroupRowCollapses {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.25em;
}

@media screen and (max-width: 660px) {
    .inputGroupRowOuter, .inputGroupRowCollapses {
        grid-template-rows: 1fr 1fr;
        row-gap: 1em;
        grid-template-columns: 1fr;
    }
}

.inputGroupRow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.25em;
    align-items: end;
}

.labelSecondary {
    color: var(--base-color-light);
    font-size: 75%;
    font-weight: normal;
    padding-inline-start: 0.5em;
}

.inputNote,
.inputError {
    font-size: 85%;
    line-height: 1.1;
    margin: 0;
}

#cardTypes .inactive {
    color: var(--base-color-light);
}

.errorContainer {
    color: var(--primary-white);
    padding: calc(var(--size-step-0) / 2);
    background-color: var(--highlight-color);
    border-radius: 4px;
    margin-top: 0.25em;
}

.errorContainer[hidden] {
    display: none;
}

.errorContainer:not([hidden]) {
    display: flex;
}

.errorContainer p {
    margin-left: 0.5em;
}

.inputWrapper {
    position: relative;
}

.inputWrapper > .cardIcn {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    width: 40px;
    height: 100%;
}

.passwordGroup {
    position: relative;
}

#togglePasswordBtn {
    position: absolute;
    right: 2px;
    bottom: 3px;
    height: 46px;
    width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.fieldIconWrapper {
    display: flex;
    place-items: center;
}

svg.icn {
    width: 18px;
    height: 18px;
}

#icnLock use {
    fill: var(--primary-white);
}

.icn-warning {
    fill: var(--primary-white);
}

#icnEyeClosed {
    display: none;
}

.g-recaptcha {
    margin-top: 15px;
}

.legalAgreements {
    max-width: 40ch;
    color: var(--base-color-light);
    font-size: var(--size-step-0);
}

.alreadyAMemberTitle,
.paymentDetailsTitle {
    font-size: var(--size-step-3);
    line-height: 1.05;
    font-family: var(--font-stack-bold);
    text-align: center;
    margin-top: 0;
    margin-bottom: 1em;
}

.alreadyAMemberBody,
.paymentDetailsBody {
    max-width: 35ch;
    color: var(--primary-white);
    font-size: var(--size-step-0);
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}

.paymentDetailsBody {
    max-width: 55ch;
    text-align: left;
}

.btnPrimary,
.btnSecondary {
    height: 50px;
    color: var(--primary-white);
    line-height: 1;
    padding: 0.5em 1em;
    background-color: var(--highlight-color);
    margin: 0 auto;
    font-size: var(--size-step-0);
}

.btnPrimary.disabled {
    background-color: lightgray;
    cursor: not-allowed;
}

.btnPrimary:hover,
.btnSecondary:hover {
    scale: 1.05;
    transition: all 250ms ease-in-out;
}

.btnSecondary {
    color: var(--primary-white);
    background-color: transparent;
    border: 1px solid var(--primary-white);
}

.container {
    display: grid;
    align-items: center;
    justify-content: center;
    padding-top: clamp(30px, 2vh, 80px);
    padding-bottom: 40px;
}

.container h1 {
    font-size: var(--size-step-4);
    line-height: 1.1;
    white-space: pre-line;
    margin-block-end: 0.25em;
}

.container .instructions {
    text-align: center;
    text-wrap: balance;
}

.container .trialSetupInstructions {
    --oval-width: 43px;
    counter-reset: index;
    list-style-type: none;
    padding-inline-start: 0;
}

.container .trialSetupInstructions li {
    display: grid;
    grid-template-columns: var(--oval-width) 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0.25rem;
    grid-template-areas: "marker mainText"
                          ". supportingText"
                            ". text";
}

.container .trialSetupInstructions li::before {
    grid-area: marker;
    width: var(--oval-width);
    height: 36px;
    counter-increment: index;
    content: counter(index);
    font-size: calc(var(--size-step-2) * 0.8);
    line-height: 1;
    font-weight: bold;
    text-align: center;
    padding-block-start: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='43px' height='36px' viewBox='0 0 43 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-159, -190)' fill='%23F40000'%3E%3Cg transform='translate(51, 190)'%3E%3Cg transform='translate(108, 0)'%3E%3Cpath d='M13.3837266,4.69559822 C7.27658379,8.34781791 0,14.7390614 0,24.1303706 C0,32.2172593 6.88673268,36 14.1634289,36 C19.4908695,36 24.6883972,34.0434255 29.3662734,31.304289 C35.4734162,27.6521821 42.75,21.2608258 42.75,11.8695166 C42.75,3.7825151 35.8632673,0 28.5865711,0 C23.2590181,0 18.0614904,1.95646166 13.3837266,4.69559822' %3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.container .trialSetupInstructions li + li {
    margin-block-start: 1em;
}

.container .instructionMainText {
    grid-area: mainText;
    font-size: var(--size-step-2);
    line-height: 1.05;
    font-weight: bold;
    margin-block-end: 0;
}

.container .instructionSupportingText {
    grid-area: supportingText;
    font-size: var(--size-step-0);
    margin-block: 0;
}

.content {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
}

.container .downloadLinks {
    grid-area: text;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 2em;
    align-items: start;
    justify-content: center;
    margin-bottom: 50px;
}

.downloadLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    transition: var(--hover-transition-out);
}

.downloadLink:hover {
    transform: scale(1.02);
    transition: var(--hover-transition-in);
}

.icnLg {
    width: 48px;
    height: 48px;
    fill: var(--primary-white);
}

.downloadLink span {
    color: var(--primary-white);
    font-weight: bold;
    font-size: 20px;
    line-height: 1.1;
    text-align: center;
}

#downloadWindows {
    order: 1;
}

#downloadIOS {
    order: -1;
}

#downloadAndroid {
    order: -1;
}

footer h2 {
    text-align: center;
}

footer .supportLinks {
    display: flex;
    justify-content: space-evenly;
}

@media screen and (min-width: 700px) {
    .container h1 {
        font-size: 68px;
    }

    .container .downloadLinks {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
        margin-top: 50px;
    }

    #downloadWindows {
        order: -1;
    }

    #downloadIOS,
    #downloadAndroid {
        order: initial;
    }
}

@media screen and (max-width: 700px) {
    .container .trialSetupInstructions li {
        grid-template-columns: 1fr;
        grid-template-areas: "marker"
                            "mainText"
                            "supportingText"
                            "text";
        justify-items: center;
    }

    .container .trialSetupInstructions li::before {
        padding-block-start: 6px;
    }

    .container .instructionMainText,
    .container .instructionSupportingText {
        text-align: center;
        text-wrap: balance;
    }

    .container .downloadLinks {
        margin-block-start: 1rem;
    }
}

/* Tabbed panel */
.tabbed {
    width: 100%;
}

[role="tablist"] {
    padding: 0;
    margin: 0;
}

[role="tablist"] li,
[role="tablist"] a {
    display: inline-block;
}

[role="tablist"] a {
    font-weight: bold;
    text-decoration: none;
    padding: 0.5rem 1em;
}

[role="tablist"] [aria-selected] {
    position: relative;
    top: 2px;
    background: var(--base-color);
    border: 2px solid;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

[role="tabpanel"] {
    padding: 1.5rem;
    border: 2px solid;
    border-radius: 0 8px 8px 8px;
}

[role="tabpanel"]:not(:first-of-type) {
    border-radius: 8px;
}

.select_payment_method {
    flex-direction: column;
    margin-bottom: 6px;
    padding-bottom: 16px;
}

.select_payment_method h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.createAccount_signIn {
    display: flex;
    align-content: center;
    justify-content: center;
    font-weight: normal;
}

.createAccount_signIn > .btnSecondary {
    font-size: 12px;
    height: auto;
}