/* Import Inter font with specific weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Reset body and html */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}

/* Sign up */
#signup-container {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    /* Center the container horizontally */
    margin: 0 auto;
    position: relative;
    width: 1440px;
    height: 960px;
    min-height: 960px;

    /* Base/White */
    background: #FFFFFF;
    
    /* Set Inter as base font */
    font-family: 'Inter', sans-serif;
}

/* Section */
#left-section {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: 720px;
    min-width: 480px;
    height: 960px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}

/* Container */
#container {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 32px;

    width: 720px;
    height: 558px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Content */
#content {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 32px;

    width: 360px;
    min-height: 558px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Header */
#header {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;

    width: 360px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Logo Pool */
#logo-pool {
    width: 183.27px;
    height: 48px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

#logo-pool img {
    width: 184px;
    height: 48px;
}

/* Text and supporting text */
#text-and-supporting-text {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    width: 360px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Text */
#text {
    width: 360px;
    height: 38px;
    
    /* Reset default margins */
    margin: 0;
    padding: 0;

    /* Display sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    /* identical to box height, or 127% */
    text-align: center;

    /* Gray/900 */
    color: #181D27;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Supporting text */
#supporting-text {
    width: 360px;
    height: 24px;
    
    /* Reset any default margins/padding */
    margin: 0;
    padding: 0;

    /* Text md/Regular */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    text-align: center;

    /* Gray/600 */
    color: #535862;
    
    /* Force display */
    display: block;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Content */
#content-inner {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;

    width: 360px;
    height: 328px;

    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Social button groups */
#social-buttons {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 360px;
    height: 156px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Social button */
.social-button {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;

    width: 360px;
    height: 44px;

    /* Base/White */
    background: #FFFFFF;
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

#google-button {
    order: 0;
}

#facebook-button {
    order: 1;
}

#apple-button {
    order: 2;
    /* Base/Black */
    background: #000000;
    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
}

/* Social icon */
.social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.social-icon img {
    width: 24px;
    height: 24px;
}

/* Text */
.social-text {
    height: 24px;

    /* Text md/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    /* Gray/700 */
    color: #414651;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

#google-button .social-text {
    width: 155px;
}

#facebook-button .social-text {
    width: 176px;
}

#apple-button .social-text {
    width: 145px;
    /* Base/White */
    color: #FFFFFF;
}

/* Content divider */
#content-divider {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 360px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Divider */
#divider-left {
    width: 162px;
    height: 1px;

    /* Gray/200 */
    background: #E9EAEB;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

/* Text */
#or-text {
    width: 20px;
    height: 20px;

    /* Text sm/Medium */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    text-align: center;

    /* Gray/600 */
    color: #535862;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Divider */
#divider-right {
    width: 162px;
    height: 1px;

    /* Gray/200 */
    background: #E9EAEB;

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 1;
}

/* Form */
#signup-form {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 360px;
    height: 104px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* Input field */
#input-field {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;

    width: 360px;
    height: 44px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Input with label */
#input-with-label {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;

    width: 360px;
    height: 44px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Input */
#email-input-wrapper {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;

    width: 360px;
    height: 44px;

    /* Base/White */
    background: #FFFFFF;
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    /* Shadows/shadow-xs */
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Content */
#input-content {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 332px;
    height: 24px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

/* Text */
#email-input {
    width: 332px;
    height: 24px;

    /* Text md/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    /* Gray/500 */
    color: #717680;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;

    border: none;
    outline: none;
    background: transparent;
}

#email-input::placeholder {
    color: #717680;
}

/* Buttons/Button */
#get-started-button {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;

    width: 360px;
    height: 44px;

    /* Brand/600 */
    background: #0000FF;
    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    border: none;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Text padding */
#button-text-padding {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 2px;

    width: 93px;
    height: 24px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Text */
#button-text {
    width: 89px;
    height: 24px;

    /* Text md/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    /* Base/White */
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Row */
#login-row {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 360px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* Text */
#login-text {
    width: 171px;
    height: 20px;

    /* Text sm/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Gray/600 */
    color: #535862;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Buttons/Button */
#login-link {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 6px;

    width: 41px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

    text-decoration: none;
}

/* Text */
#login-link-text {
    width: 41px;
    height: 20px;

    /* Text sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Brand/700 */
    color: #0000D4;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Section */
#right-section {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 24px 24px 24px 0px;
    gap: 8px;

    width: 720px;
    min-width: 640px;
    height: 960px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 1;
}

/* Image */
#testimonial-image {
    width: 696px;
    height: 912px;

    background: url('/static/images/signup-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    position: relative;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}

/* _Quote image bottom panel */
#quote-panel {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 96px 0px 0px;

    position: absolute;
    height: 370px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Attribution card */
#attribution-card {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 32px;

    width: 696px;
    height: 274px;

    background: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Backdrop blurs/backdrop-blur-lg */
    backdrop-filter: blur(12px);

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Quote */
#testimonial-quote {
    width: 632px;
    height: 76px;

    /* Display sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    /* or 127% */

    /* Base/White */
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Name and text */
#name-and-text {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    width: 632px;
    height: 102px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Name and stars */
#name-and-stars {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    width: 632px;
    height: 38px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Name */
#author-name {
    width: 500px;
    height: 38px;

    /* Display sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    /* identical to box height, or 127% */

    /* Base/White */
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

/* Stars */
#stars-container {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;

    width: 116px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Star icon */
.star-icon {
    width: 20px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
    position: relative;
}

/* Star background */
.star-background {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 2.5%;
    bottom: -2.5%;

    /* Gray/100 */
    background: #F5F5F5;
    border-radius: 0.5px;
}

/* Star */
.star-fill {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 2.5%;
    bottom: -2.5%;

    /* Brand Green Accent/500 */
    background: #98FB96;
    border-radius: 0.5px;
}

#star-1 { order: 0; }
#star-2 { order: 1; }
#star-3 { order: 2; }
#star-4 { order: 3; }
#star-5 { order: 4; }

/* Supporting text and arrows */
#supporting-text-arrows {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    width: 632px;
    height: 56px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Text and supporting text */
#text-and-supporting {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 476px;
    height: 56px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

/* Text */
#author-title {
    width: 476px;
    height: 28px;

    /* Text lg/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    /* identical to box height, or 156% */

    /* Base/White */
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Supporting text */
#author-company {
    width: 476px;
    height: 24px;

    /* Text md/Medium */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    /* Brand Green Accent/500 */
    color: #98FB96;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Arrows */
#arrows-container {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;

    width: 144px;
    height: 56px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* _Testiomonial carousel arrow */
.carousel-arrow {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 56px;
    height: 56px;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 28px;
    background: transparent;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}

#prev-arrow {
    order: 0;
}

#next-arrow {
    order: 1;
}

/* arrow-left, arrow-right */
.carousel-arrow > div {
    width: 24px;
    height: 24px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Icon */
.arrow-icon {
    position: absolute;
    left: 20.83%;
    right: 20.83%;
    top: 20.83%;
    bottom: 20.83%;

    /* Base/White */
    border: 2px solid #FFFFFF;
}