@keyframes carat{0%,45%{opacity:1}55%,to{opacity:0}}body{overflow-x:hidden}main{position:relative;display:block;overflow:hidden}.common-PageTitle,.common-UppercaseTitle{color:#6772e5}.columns{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.columns>*+*{margin-top:40px}@media (min-width:670px){.columns{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}.columns>*{-ms-flex-preferred-size:50%;flex-basis:50%}.columns>*+*{margin-left:80px;margin-top:0}}.intro-copy{max-width:840px;margin:0 auto}@media (min-width:670px){.intro-copy{text-align:center}}html[lang=ja] .feature-list{font-size:11pt}@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:blue}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-feature-settings:"calt";font-variant-ligatures:contextual}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.Editor{position:relative;-ms-flex-positive:1;flex-grow:1}.Editor-errorMark{display:none}.cm-s-elements-demo.CodeMirror .CodeMirror-gutters,.cm-s-elements-demo.CodeMirror .CodeMirror-scroll{box-sizing:content-box}.cm-s-elements-demo.CodeMirror .Editor-errorMark{display:inline-block;height:17px;position:relative;top:3px}.CodeMirror-code>:first-child .CodeMirror-line,.CodeMirror-code>:last-child .CodeMirror-line{border-color:#5a5f96;border-style:solid}.cm-s-elements-demo.CodeMirror{background:#424770;color:#9cdbff;line-height:24px;padding:10px;font-family:Source Code Pro,monospace;font-size:14px;height:450px;z-index:0;border-top-left-radius:4px;border-top-right-radius:4px}.cm-s-elements-demo .CodeMirror-cursor{color:#91caee;border-left:1px solid #91caee}.cm-s-elements-demo div.CodeMirror-selected{background:#4e5583}.cm-s-elements-demo .CodeMirror-line::selection,.cm-s-elements-demo .CodeMirror-line>span::selection,.cm-s-elements-demo .CodeMirror-line>span>span::selection{background:rgba(48,48,48,.99)}.cm-s-elements-demo .CodeMirror-line::-moz-selection,.cm-s-elements-demo .CodeMirror-line>span::-moz-selection,.cm-s-elements-demo .CodeMirror-line>span>span::-moz-selection{background:rgba(48,48,48,.99)}.cm-s-elements-demo .CodeMirror-linenumber{padding-right:10px;padding-left:30px;color:#8898aa}.cm-s-elements-demo .CodeMirror-gutters{background:#424770;border-right:0}.cm-s-elements-demo span.cm-comment{color:#8898aa}.cm-s-elements-demo span.cm-attribute,.cm-s-elements-demo span.cm-property{color:#f7f7f9}.cm-s-elements-demo span.cm-keyword{color:#f6a4eb}.cm-s-elements-demo span.cm-string{color:#fcd669}.cm-s-elements-demo span.cm-def{color:#f7f7f9;font-weight:700}.cm-s-elements-demo .CodeMirror-activeline-background{background:#202020}.Reset{position:absolute;top:15px;right:25px;z-index:1;cursor:pointer;background:#5e6591;border:none;color:#fff;font-size:14px;padding:6px 14px 6px 12px;border-radius:25px;font-weight:500}.Reset:active{opacity:.65;outline:none}.reset:focus{outline:none}.Reset-icon{margin-right:8px;height:14px;top:2px;position:relative}.ErrorDisplay{background:#424770;font-family:Source Code Pro,monospace;font-size:12px;display:none;position:absolute;top:0;background:#fe6948;color:#fff;width:100%;z-index:1;-ms-flex-align:center;align-items:center}.ErrorDisplay.ErrorDisplay--error{display:-ms-flexbox;display:flex;padding:0}.ErrorDisplay-text{width:100%;padding:10px 20px;line-height:1.2;margin:0}.CardElementDemo{position:relative;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:justify;justify-content:space-between;padding:20px 0}.CardElementDemo-form{width:100%;max-width:450px;margin:0 auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}.CardElementDemo-row{display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 10px}.CardElementDemo-row+.CardElementDemo-row{margin-top:20px}.CardElementDemo-field{position:relative;-ms-flex:1;flex:1;height:40px;border-radius:4px;border:1.5px dashed #cfd7df}.CardElementDemo-field+.CardElementDemo-field{margin-left:20px}.CardElementDemo-container{height:100%;padding:12px}.App-editorArea{height:450px;position:relative}.App-cardArea{position:relative;height:200px}.App *{box-sizing:border-box}.globalNav.transition .colorize{transition-duration:1s;transition-timing-function:cubic-bezier(.645,.045,.355,1)}body.hero1 .globalNav .colorize{color:#fff}body.hero1 .globalNav .colorize.active,body.hero1 .globalNav .colorize:hover{color:#c4f0ff}body.hero1 main header .stripes.example2,body.hero1 main header .stripes.example3,body.hero1 main header .stripes.example4{opacity:0}body.hero2 .globalNav .colorize{color:#32325d}body.hero2 .globalNav .colorize.active,body.hero2 .globalNav .colorize:hover{color:#6b7c93}body.hero2 main header .stripes.example1,body.hero2 main header .stripes.example3,body.hero2 main header .stripes.example4{opacity:0}body.hero3 .globalNav .colorize{color:#fff}body.hero3 .globalNav .colorize.active,body.hero3 .globalNav .colorize:hover{color:#cfd7df}body.hero3 main header .stripes.example1,body.hero3 main header .stripes.example2,body.hero3 main header .stripes.example4{opacity:0}body.hero4 .globalNav .colorize{color:#32325d}body.hero4 .globalNav .colorize.active,body.hero4 .globalNav .colorize:hover{color:#6b7c93}body.hero4 main header .stripes.example1,body.hero4 main header .stripes.example2,body.hero4 main header .stripes.example3{opacity:0}main header{position:relative;z-index:1}main header .stripes{position:absolute;width:100%;height:calc(100% - 50px);top:0;left:0;transform:skewY(-12deg);transition:opacity 1s cubic-bezier(.645,.045,.355,1) .15s;z-index:-1}@media (min-width:1040px){main header .stripes{z-index:auto}}main header .stripes:before{content:"";position:absolute;width:100%;height:5000px;bottom:0;left:0}main header .stripes .stripe{position:absolute;height:190px}main header .stripes .s1{top:-230px;left:0;width:35%}main header .stripes .s2{bottom:-190px;left:calc(50% + 400px);right:0;background:linear-gradient(90deg,#f2f6fa,#ebeff5)}main header .stripes.example1:before{background:linear-gradient(90deg,#6fa8ef,#5f73df)}main header .stripes.example1 .s1{background:linear-gradient(90deg,#6a8dea,rgba(106,141,234,0))}main header .stripes.example3:before{background:linear-gradient(90deg,#5d7596,#4b5a7e)}main header .stripes.example3 .s1{background:linear-gradient(90deg,#536588,rgba(83,101,136,0))}main header .stripes.example2:before,main header .stripes.example4:before{background:linear-gradient(90deg,#f6f9fc,#e6ebf1)}main header .stripes.example2 .s1,main header .stripes.example4 .s1{background:linear-gradient(90deg,#eaf0f5,rgba(234,240,245,0))}main header .container-lg{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;max-width:1140px;margin-top:72px}@media (min-width:1040px){main header .container-lg{display:block}}main header .common-Card{-ms-flex-order:2;order:2;position:relative;z-index:1}@media (min-width:880px){main header .common-Card{padding:80px 50px}}@media (min-width:1040px){main header .common-Card{max-width:580px;min-height:550px}}main header .common-Card h1{margin-top:10px}main header .common-Card p{margin-top:25px}main header .common-Card .elements-Button--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}main header .common-Card .elements-Button--icon svg{margin-left:8px}main header .example-form{-ms-flex-order:1;order:1;position:relative;width:660px;height:370px;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000);transform-origin:50% 0;margin:20px 0 0}@media (min-width:1040px){main header .example-form{position:absolute;top:50px;left:calc(50% + 90px);margin:0}}main header .example-form *{position:absolute;will-change:transform,opacity;white-space:nowrap}main header .example-form [data-example]{opacity:0}main header .example-form .static-elements-container{position:absolute;width:100%;height:100%;top:0;left:0}main header .example-form .static-elements-container>*{opacity:0;transform:scale(.75);transition-property:transform,opacity;transition-duration:1s;transition-timing-function:cubic-bezier(.645,.045,.355,1)}main header .example-form .static-elements-container>:nth-child(1){transition-delay:0s}main header .example-form .static-elements-container>:nth-child(2){transition-delay:.05s}main header .example-form .static-elements-container>:nth-child(3){transition-delay:.1s}main header .example-form .static-elements-container>:nth-child(4){transition-delay:.15s}main header .example-form .static-elements-container>:nth-child(5){transition-delay:.2s}main header .example-form .static-elements-container>:nth-child(6){transition-delay:.25s}main header .example-form .static-elements-container>:nth-child(7){transition-delay:.3s}main header .example-form .field-label{transition:transform 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .field-label span{transition:opacity 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .field-value{transition:transform 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .field-value span{transition:opacity 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .card-icon{width:44px;height:29px;transition:transform 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .card-icon img{position:absolute;width:100%;height:100%;top:0;left:0;transition:opacity 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .carat{width:2px;height:30px;animation:carat 1.1s ease-out infinite;transition-property:transform,opacity,background-color}main header .example-form .carat,main header .example-form .pay-button{transition-duration:1s;transition-timing-function:cubic-bezier(.645,.045,.355,1)}main header .example-form .pay-button{width:614px;height:60px;transition-property:transform,opacity,width,height,background-color,border-radius,box-shadow}main header .example-form .pay-button span{width:100%;height:100%;top:0;left:0;text-align:center;line-height:60px;transition:opacity 1s cubic-bezier(.645,.045,.355,1)}main header .example-form .static-elements-container.container1 .field-background{width:614px;background-color:rgba(138,188,255,.5);border-radius:6px;box-shadow:0 9px 14px rgba(50,50,93,.06),0 3px 8px rgba(0,0,0,.08),inset 0 2px 0 rgba(151,200,255,.25)}main header .example-form .static-elements-container.container1 .field-background.background1{height:183px;left:23px;top:-13px}main header .example-form .static-elements-container.container1 .field-background.background2{height:60px;left:23px;top:200px}main header .example-form .static-elements-container.container1 .field-separator{width:593px;height:2px;background-color:rgba(156,219,255,.18)}main header .example-form .static-elements-container.container1 .field-separator.separator1{left:44px;top:48px}main header .example-form .static-elements-container.container1 .field-separator.separator2{left:44px;top:109px}main header .example-form .field-label span[data-example="1"]{font-size:22px;font-weight:500;color:#c4f0ff}main header .example-form .field-value span[data-example="1"]{font-size:22px;font-weight:500;color:#fff}main header .example-form .field-value.value7 span[data-example="1"],main header .example-form .field-value.value8 span[data-example="1"],main header .example-form .field-value.value9 span[data-example="1"]{color:#87bbfd}main header .example-form .pay-button span[data-example="1"]{font-size:22px;font-weight:600;color:#fff}main header .example-form .static-elements-container.container2 .field-background{height:2px;background-color:rgba(107,124,147,.15)}main header .example-form .static-elements-container.container2 .field-background.background1{width:614px;left:23px;top:-46px}main header .example-form .static-elements-container.container2 .field-background.background2{width:293px;left:23px;top:62px}main header .example-form .static-elements-container.container2 .field-background.background3{width:131px;left:346px;top:62px}main header .example-form .static-elements-container.container2 .field-background.background4{width:132px;left:506px;top:62px}main header .example-form .static-elements-container.container2 .field-background.background5{width:614px;left:23px;top:160px}main header .example-form .static-elements-container.container2 .field-background.background6{width:293px;left:23px;top:258px;background-color:#24b47e}main header .example-form .static-elements-container.container2 .field-background.background7{width:293px;left:346px;top:258px}main header .example-form .field-label span[data-example="2"]{font-family:Source Code Pro;font-size:21px;font-weight:500;color:#aab7c4}main header .example-form .field-label.label6 span[data-example="2"]{color:#24b47e}main header .example-form .field-value span[data-example="2"]{font-family:Source Code Pro;font-size:24px;font-weight:500;color:#32325d}main header .example-form .field-value.value7 span[data-example="2"],main header .example-form .field-value.value8 span[data-example="2"]{color:#cfd7df}main header .example-form .pay-button span[data-example="2"]{font-family:Source Code Pro;font-size:23px;font-weight:600;color:#fff;text-transform:uppercase}main header .example-form .static-elements-container.container3 .field-background{height:60px;background-color:rgba(180,205,247,.4);border-radius:30px}main header .example-form .static-elements-container.container3 .field-background.background1{width:614px;left:23px;top:-30px}main header .example-form .static-elements-container.container3 .field-background.background2{width:303px;left:23px;top:39px}main header .example-form .static-elements-container.container3 .field-background.background3{width:303px;left:334px;top:39px}main header .example-form .static-elements-container.container3 .field-background.background4{width:614px;left:23px;top:130px}main header .example-form .static-elements-container.container3 .field-background.background5{width:199px;left:23px;top:199px}main header .example-form .static-elements-container.container3 .field-background.background6{width:198px;left:231px;top:199px}main header .example-form .static-elements-container.container3 .field-background.background7{width:199px;left:438px;top:199px}main header .example-form .field-value span[data-example="3"]{font-family:Whitney SSm A,Whitney SSm B,Helvetica,Arial;font-size:22px;font-weight:500;color:#fff}main header .example-form .field-value.value7 span[data-example="3"],main header .example-form .field-value.value8 span[data-example="3"],main header .example-form .field-value.value9 span[data-example="3"]{color:rgba(209,226,255,.4)}main header .example-form .pay-button span[data-example="3"]{font-family:Whitney SSm A,Whitney SSm B,Helvetica,Arial;font-size:22px;font-weight:600;color:#4f5b7a;text-transform:uppercase}main header .example-form .static-elements-container.container4 .field-background{width:614px;background-color:#fff;box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);border-radius:6px}main header .example-form .static-elements-container.container4 .field-background.background1{height:60px;left:23px;top:8px}main header .example-form .static-elements-container.container4 .field-background.background2{height:120px;left:23px;top:235px}main header .example-form .static-elements-container.container4 .field-group-background{width:630px;height:175px;left:15px;top:188px;background-color:rgba(18,91,152,.05);border-radius:14px}main header .example-form .static-elements-container.container4 .field-group-label{left:249px;top:199px;font-family:Interface,Open Sans,Segoe UI,sans-serif;font-weight:500;color:#8898aa;font-size:20px;text-align:center}main header .example-form .static-elements-container.container4 .selected-amount-highlight{width:117px;height:50px;left:150px;top:13px;background-color:#d782d9;border-radius:3px}main header .example-form .static-elements-container.container4 .apple-pay-button{width:614px;height:60px;left:23px;top:98px;background-color:#000;border-radius:6px;box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:22px;font-weight:600;color:#fff;text-align:center;line-height:60px}main header .example-form .static-elements-container.container4 .apple-pay-button:after{content:"";display:inline-block;width:69px;height:29px;margin-bottom:-8px;margin-left:10px;background-image:url(/img/v3/elements/overview/apple-pay.svg)}main header .example-form .field-value span[data-example="4"]{font-family:Interface,Open Sans,Segoe UI,sans-serif;font-size:22px;font-weight:500;color:#32325d}main header .example-form .field-value.value2 span[data-example="4"]{color:#fff}main header .example-form .field-value.value7 span[data-example="4"],main header .example-form .field-value.value8 span[data-example="4"],main header .example-form .field-value.value9 span[data-example="4"]{color:#cfd7df}main header .example-form .pay-button span[data-example="4"]{font-family:Interface,Open Sans,Segoe UI,sans-serif;font-size:22px;font-weight:500;color:#fff;line-height:55px}body.hero1 main header .example-form [data-example*="1"]{opacity:1}body.hero1 main header .example-form .static-elements-container.container1>*{opacity:1;transform:none}body.hero1 main header .example-form .field-label.label2{transform:translate(46px,5px)}body.hero1 main header .example-form .field-label.label3{transform:translate(46px,66px)}body.hero1 main header .example-form .field-label.label4{transform:translate(46px,126px)}body.hero1 main header .example-form .field-value.value3{transform:translate(155px,5px)}body.hero1 main header .example-form .field-value.value4{transform:translate(155px,66px)}body.hero1 main header .example-form .field-value.value5{transform:translate(155px,126px)}body.hero1 main header .example-form .field-value.value6{transform:translate(112px,216px)}body.hero1 main header .example-form .field-value.value7{transform:translate(317px,216px)}body.hero1 main header .example-form .field-value.value8{transform:translate(463px,216px)}body.hero1 main header .example-form .field-value.value9{transform:translate(566px,216px)}body.hero1 main header .example-form .card-icon{transform:translate(46px,216px)}body.hero1 main header .example-form .carat{background-color:#fff;transform:translate(316px,215px)}body.hero1 main header .example-form .pay-button{transform:translate(23px,290px);background-color:#f6a4eb;border-radius:6px;box-shadow:0 9px 14px rgba(50,50,93,.06),0 3px 8px rgba(0,0,0,.08),inset 0 2px 0 #ffb9f6}body.hero2 main header .example-form [data-example*="2"]{opacity:1}body.hero2 main header .example-form .static-elements-container.container2>*{opacity:1;transform:none}body.hero2 main header .example-form .field-label.label1{transform:translate(23px,-122px)}body.hero2 main header .example-form .field-label.label2{transform:translate(23px,-14px)}body.hero2 main header .example-form .field-label.label3{transform:translate(345px,-14px)}body.hero2 main header .example-form .field-label.label4{transform:translate(506px,-14px)}body.hero2 main header .example-form .field-label.label5{transform:translate(23px,84px)}body.hero2 main header .example-form .field-label.label6{transform:translate(23px,182px)}body.hero2 main header .example-form .field-value.value3{transform:translate(23px,-86px)}body.hero2 main header .example-form .field-value.value4{transform:translate(23px,22px)}body.hero2 main header .example-form .field-value.value5{transform:translate(345px,22px)}body.hero2 main header .example-form .field-value.value6{transform:translate(82px,120px)}body.hero2 main header .example-form .field-value.value7{transform:translate(23px,218px)}body.hero2 main header .example-form .field-value.value8{transform:translate(345px,218px)}body.hero2 main header .example-form .field-value.value9{transform:translate(506px,22px)}body.hero2 main header .example-form .card-icon{transform:translate(23px,122px)}body.hero2 main header .example-form .carat{background-color:#32325d;transform:translate(23px,218px)}body.hero2 main header .example-form .pay-button{transform:translate(23px,290px);background-color:#24b47e;border-radius:6px;box-shadow:none}body.hero3 main header .example-form [data-example*="3"]{opacity:1}body.hero3 main header .example-form .static-elements-container.container3>*{opacity:1;transform:none}body.hero3 main header .example-form .field-value.value3{transform:translate(55px,-13px)}body.hero3 main header .example-form .field-value.value4{transform:translate(55px,56px)}body.hero3 main header .example-form .field-value.value5{transform:translate(366px,56px)}body.hero3 main header .example-form .field-value.value6{transform:translate(116px,147px)}body.hero3 main header .example-form .field-value.value7{transform:translate(55px,216px)}body.hero3 main header .example-form .field-value.value8{transform:translate(262px,216px)}body.hero3 main header .example-form .field-value.value9{transform:translate(471px,216px)}body.hero3 main header .example-form .card-icon{transform:translate(54px,146px)}body.hero3 main header .example-form .carat{background-color:#fff;transform:translate(55px,214px)}body.hero3 main header .example-form .pay-button{transform:translate(23px,290px);background-color:#fdd85f;border-radius:30px;box-shadow:none}body.hero4 main header .example-form [data-example*="4"]{opacity:1}body.hero4 main header .example-form .static-elements-container.container4>*{opacity:1;transform:none}body.hero4 main header .example-form .field-value.value1{transform:translate(74px,25px)}body.hero4 main header .example-form .field-value.value2{transform:translate(194px,25px)}body.hero4 main header .example-form .field-value.value3{transform:translate(309px,25px)}body.hero4 main header .example-form .field-value.value4{transform:translate(431px,25px)}body.hero4 main header .example-form .field-value.value5{transform:translate(547px,25px)}body.hero4 main header .example-form .field-value.value6{transform:translate(107px,252px)}body.hero4 main header .example-form .field-value.value7{transform:translate(302px,252px)}body.hero4 main header .example-form .field-value.value8{transform:translate(447px,252px)}body.hero4 main header .example-form .field-value.value9{transform:translate(551px,252px)}body.hero4 main header .example-form .card-icon{transform:translate(43px,251px)}body.hero4 main header .example-form .carat{background-color:#32325d;transform:translate(301px,250px)}body.hero4 main header .example-form .pay-button{width:604px;height:55px;transform:translate(28px,295px);background-color:#d782d9;border-radius:3px;box-shadow:none}.experience-demo .element.payment-request button{position:relative;min-height:32px;padding:0;border-radius:4px;border:none;outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;font:500 16px/21px -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.experience-demo .element.payment-request button::-moz-focus-inner{border:0}.experience-demo .element.payment-request button.dark{background:#32325d}.experience-demo .element.payment-request button.light{background:#fff}.experience-demo .element.payment-request button .inner{width:100%;outline:none;-webkit-tap-highlight-color:transparent}.experience-demo .element.payment-request button .content{width:100%;box-sizing:border-box;padding:0 10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.experience-demo .element.payment-request button.compact .content{padding:0 2px}.experience-demo .element.payment-request button .border{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;border-radius:4px;will-change:opacity}.experience-demo .element.payment-request button.light.border .border{box-shadow:inset 0 0 0 .66px rgba(125,98,179,.22)}.experience-demo .element.payment-request button.light.border.whole-pixel-border .border{box-shadow:inset 0 0 0 1px rgba(125,98,179,.15)}.experience-demo .element.payment-request button.dark:focus .border{opacity:.75;box-shadow:inset 0 0 0 2.5px #986fff!important}.experience-demo .element.payment-request button.light.border:focus .border{opacity:.6;box-shadow:inset 0 0 0 .66px rgba(125,98,179,.6),inset 0 0 0 2.5px #ac74ff!important}.experience-demo .element.payment-request button.light:focus .border{opacity:.6;box-shadow:inset 0 0 0 2.5px #ac74ff!important}.experience-demo .element.payment-request button .shines{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;overflow:hidden;will-change:opacity}.experience-demo .element.payment-request button .shine{position:absolute;z-index:1;left:0;top:0;height:100%;width:250%;transform:translateX(-100%);will-change:transform,opacity;transition:opacity .8s}.experience-demo .element.payment-request button.dark .shine{background:linear-gradient(110deg,rgba(121,78,151,0) 10%,rgba(121,78,151,.91) 45%,#794e97 50%,rgba(121,78,151,.91) 55%,rgba(121,78,151,0) 90%)}.experience-demo .element.payment-request button.light .shine{background:linear-gradient(110deg,rgba(225,218,245,0) 10%,rgba(225,218,245,.91) 45%,#e1daf5 50%,rgba(225,218,245,.91) 55%,rgba(225,218,245,0) 90%)}.experience-demo .element.payment-request button .shine.scroll{opacity:.6}.experience-demo .element.payment-request button .shine.hover,.experience-demo .element.payment-request button:hover .shine.scroll{opacity:0}.experience-demo .element.payment-request button:hover .shine.hover{transition-duration:.3s;opacity:.8}.experience-demo .element.payment-request button .overlay{position:absolute;left:0;top:0;width:100%;height:100%;z-index:30;opacity:0;border-radius:4px;transition:opacity .3s;will-change:opacity}.experience-demo .element.payment-request button.dark .overlay{background:rgba(0,0,40,.3)}.experience-demo .element.payment-request button.light .overlay{background:rgba(151,136,197,.2)}.experience-demo .element.payment-request button.active .overlay,.experience-demo .element.payment-request button:active .overlay{opacity:1}.experience-demo .element.payment-request button .label{position:relative;z-index:10;transition-property:font-size,color,opacity;transition-duration:.25s;will-change:opacity}.experience-demo .element.payment-request button.dark .label{color:#fff}.experience-demo .element.payment-request button.light .label{color:#39325c}.experience-demo .element.payment-request button.baseline-offset .label{margin-top:-2px}.experience-demo .element.payment-request button.compact .label{overflow:hidden;text-overflow:ellipsis}.experience-demo .element.payment-request button.large .label{margin-top:-2px}.experience-demo .element.payment-request button .icon{-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:10;margin:0 -1px -1px 7px;will-change:opacity}.experience-demo .element.payment-request button.compact .icon{display:none}.experience-demo .element.payment-request button.rtl .icon{-ms-flex-order:-1;order:-1;margin-right:7px;margin-left:-1px;transform:scaleX(-1)}.experience-demo .element.payment-request button.disabled,.experience-demo .element.payment-request button.loading{cursor:default}.experience-demo .element.payment-request button.disabled .overlay,.experience-demo .element.payment-request button.disabled .shine,.experience-demo .element.payment-request button.loading .overlay,.experience-demo .element.payment-request button.loading .shine{opacity:0!important}.experience-demo .element.payment-request button.disabled .icon,.experience-demo .element.payment-request button.disabled .label,.experience-demo .element.payment-request button.loading .label{opacity:.3}.experience-demo .element.payment-request button.dark.disabled .label,.experience-demo .element.payment-request button.dark.loading .label{color:#e4b7ee}.experience-demo .element.payment-request button.light.disabled .label,.experience-demo .element.payment-request button.light.loading .label{color:#5749a1}.experience-demo{min-width:0;transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;height:50px}@media (min-width:670px){.experience-demo{height:60px}}.experience-demo.hidden{opacity:0;transform:scale(.9)}.experience-demo .element{position:relative;width:100%;height:100%;margin:0 auto;opacity:0;pointer-events:none}.experience-demo .element.visible{opacity:1;pointer-events:all}.experience-demo .element.card{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:#fff;box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);border-radius:6px;padding:10px 20px;font-size:18px;font-weight:500}@media (min-width:670px){.experience-demo .element.card{font-size:22px}}.experience-demo .element.card.autofilled{background-color:#fefde5;box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08),inset 0 0 0 3px #fff}.experience-demo .element.card .card-icon{-ms-flex-negative:0;flex-shrink:0;position:relative;width:36px;height:24px;margin-bottom:1px;margin-right:12px;perspective:1000px}@media (min-width:670px){.experience-demo .element.card .card-icon{width:48px;height:32px;margin-right:15px}}.experience-demo .element.card .card-icon .card{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.165,.84,.44,1)}.experience-demo .element.card .card-icon .side{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.experience-demo .element.card .card-icon .side.front{transform:rotateY(0deg)}.experience-demo .element.card .card-icon .side.front img{transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1);opacity:0;transform:scale(.5)}.experience-demo .element.card .card-icon .side.back{transform:rotateY(180deg)}.experience-demo .element.card .card-icon img{position:absolute;width:100%;height:auto}.experience-demo .element.card .card-icon[brand=amex] img.amex,.experience-demo .element.card .card-icon[brand=diners] img.diners,.experience-demo .element.card .card-icon[brand=discover] img.discover,.experience-demo .element.card .card-icon[brand=generic] img.generic,.experience-demo .element.card .card-icon[brand=jcb] img.jcb,.experience-demo .element.card .card-icon[brand=mastercard] img.mastercard,.experience-demo .element.card .card-icon[brand=visa] img.visa{opacity:1;transform:none}.experience-demo .element.card .card-icon[state=error] img.card-brand{opacity:0;transform:none}.experience-demo .element.card .card-icon[state=error]:not([brand=amex]) img.error,.experience-demo .element.card .card-icon[state=error][brand=amex] img.error-amex{opacity:1;transform:none}.experience-demo .element.card .card-icon[state=cvc]:not([brand=amex]) .card{transform:rotateY(180deg)}.experience-demo .element.card .card-icon[state=cvc][brand=amex] img.card-brand{opacity:0;transform:scale(.5)}.experience-demo .element.card .card-icon[state=cvc][brand=amex] img.cvc-amex{opacity:1;transform:none}.experience-demo .element.card .input-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;padding:0 10px;margin:0 -10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}.experience-demo .element.card .input{position:relative;height:22px;white-space:nowrap;transition:transform .5s cubic-bezier(.165,.84,.44,1);font-family:Camphor,Helvetica,sans-serif}@media (min-width:670px){.experience-demo .element.card .input{height:27px}}.experience-demo .element.card .input+.input{padding-left:10px}@media (min-width:670px){.experience-demo .element.card .input+.input{padding-left:30px}}.experience-demo .element.card .input .input,.experience-demo .element.card .input .placeholder{height:22px}@media (min-width:670px){.experience-demo .element.card .input .input,.experience-demo .element.card .input .placeholder{height:27px}}.experience-demo .element.card .input .placeholder{position:relative;color:#cfd7df;transform:translateY(-100%);opacity:0}.experience-demo .element.card .input .value{position:relative;color:#32325d;z-index:1}.experience-demo .element.card .input .value:after{content:"";position:relative;display:inline-block;width:1px;height:22px;margin-right:-1px;vertical-align:top;background-color:#32325d;animation:carat 1.1s ease-out infinite;visibility:hidden}@media (min-width:670px){.experience-demo .element.card .input .value:after{width:2px;height:27px;margin-right:-2px}}.experience-demo .element.card .input.focused .value:after{visibility:visible}.experience-demo .element.card .input.invalid .last-group,.experience-demo .element.card .input.invalid .value{color:#e25950!important}.experience-demo .element.card .input.invalid .value:after{background-color:#e25950}.experience-demo .element.card .input.invalid .placeholder{color:#ffcca5}.experience-demo .element.card .input.empty .placeholder{opacity:1}.experience-demo .element.card .input.typing .value:after{animation:none}.experience-demo .element.card .input.card-number{margin-right:auto}.experience-demo .element.card .input.card-number.collapsed .value{opacity:0}.experience-demo .element.card .input.card-number.collapsed .last-group{opacity:1}.experience-demo .element.card .input.card-number .value{min-width:190px;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}@media (min-width:670px){.experience-demo .element.card .input.card-number .value{min-width:235px}}.experience-demo .element.card .input.card-number .last-group{position:absolute;top:0;right:0;opacity:0;color:#32325d;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}.experience-demo .element.card .input.card-expiry .value{min-width:70px}@media (min-width:670px){.experience-demo .element.card .input.card-expiry .value{min-width:85px}}.experience-demo .element.card .input.card-cvc .value{min-width:45px}@media (min-width:670px){.experience-demo .element.card .input.card-cvc .value{min-width:55px}}.experience-demo .element.card .input.card-postal-code .value{min-width:60px}@media (min-width:670px){.experience-demo .element.card .input.card-postal-code .value{min-width:75px}}.experience-demo .element.card .autofill{position:absolute;left:10px;right:10px;top:100%;margin-top:-4px;background-color:#fff;padding:4px;border-radius:6px;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);z-index:1;transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1);transform-origin:0 0;opacity:0;transform:scale(.95)}@media (min-width:670px){.experience-demo .element.card .autofill{left:70px;right:70px}}.experience-demo .element.card .autofill.visible{opacity:1;transform:none}.experience-demo .element.card .autofill[selected-option="0"] .option:nth-child(1),.experience-demo .element.card .autofill[selected-option="1"] .option:nth-child(2){background-color:#e6ebf1}.experience-demo .element.card .autofill .option{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;padding:7px 7px 7px 15px;border-radius:3px;color:#32325d;font-size:16px}@media (min-width:670px){.experience-demo .element.card .autofill .option{font-size:20px}}.experience-demo .element.card .autofill .option .card{width:100%;-ms-flex-positive:1;flex-grow:1}.experience-demo .element.card .autofill .option .expiry{-ms-flex-negative:0;flex-shrink:0;margin-right:20px;color:#8898aa}.experience-demo .element.card .autofill .option .mask{margin:0 5px}.experience-demo .element.card .autofill .option .bullet{display:inline-block;width:5px;height:5px;margin-bottom:3px;border-radius:50%;background-color:currentColor}@media (min-width:670px){.experience-demo .element.card .autofill .option .bullet{width:6px;height:6px}}.experience-demo .element.card .autofill .option .bullet+.bullet{margin-left:4px}.experience-demo .element.card .autofill .option img{height:26px}@media (min-width:670px){.experience-demo .element.card .autofill .option img{height:32px}}.experience-demo .element.apple-pay{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;font-size:19px;font-weight:600;background-color:#000;box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);border-radius:6px;transform:translateY(-100%)}@media (min-width:670px){.experience-demo .element.apple-pay{font-size:23px}}.experience-demo .element.apple-pay span{margin-right:7px}@media (min-width:670px){.experience-demo .element.apple-pay span{margin-right:8px}}.experience-demo .element.apple-pay img{margin-bottom:-2px}.experience-demo .element.payment-request{transform:translateY(-200%);pointer-events:none}.experience-demo .element.payment-request button{width:100%;height:100%;box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);border-radius:6px}html[lang=ja] .experience-demo .element.card .input{line-height:1.3em}section.experience{position:relative;padding:0 0 400px;margin-top:120px}section.experience:before{content:"";position:absolute;width:100%;height:100%;top:-180px;left:0;background-color:#f6f9fc;transform:skewY(-12deg)}section.experience[data-selected-index] .feature-block{pointer-events:none!important;opacity:.5;transform:scale(.9)}section.experience[data-selected-index] .feature-block .icon .base{fill:#e6ebf1}section.experience[data-selected-index] .feature-block .icon .play{fill:#6b7c93}section.experience[data-selected-index="0"] .feature-block[data-feature-index="0"],section.experience[data-selected-index="1"] .feature-block[data-feature-index="1"],section.experience[data-selected-index="2"] .feature-block[data-feature-index="2"],section.experience[data-selected-index="3"] .feature-block[data-feature-index="3"],section.experience[data-selected-index="4"] .feature-block[data-feature-index="4"],section.experience[data-selected-index="5"] .feature-block[data-feature-index="5"]{opacity:1;transform:none}section.experience[data-selected-index="0"] .feature-block[data-feature-index="0"] .icon .base,section.experience[data-selected-index="1"] .feature-block[data-feature-index="1"] .icon .base,section.experience[data-selected-index="2"] .feature-block[data-feature-index="2"] .icon .base,section.experience[data-selected-index="3"] .feature-block[data-feature-index="3"] .icon .base,section.experience[data-selected-index="4"] .feature-block[data-feature-index="4"] .icon .base,section.experience[data-selected-index="5"] .feature-block[data-feature-index="5"] .icon .base{fill:#6772e5}section.experience[data-selected-index="0"] .feature-block[data-feature-index="0"] .icon .play,section.experience[data-selected-index="1"] .feature-block[data-feature-index="1"] .icon .play,section.experience[data-selected-index="2"] .feature-block[data-feature-index="2"] .icon .play,section.experience[data-selected-index="3"] .feature-block[data-feature-index="3"] .icon .play,section.experience[data-selected-index="4"] .feature-block[data-feature-index="4"] .icon .play,section.experience[data-selected-index="5"] .feature-block[data-feature-index="5"] .icon .play{fill:#f6f9fc}section.experience[data-selected-index="0"] .feature-block[data-feature-index="0"] h3,section.experience[data-selected-index="1"] .feature-block[data-feature-index="1"] h3,section.experience[data-selected-index="2"] .feature-block[data-feature-index="2"] h3,section.experience[data-selected-index="3"] .feature-block[data-feature-index="3"] h3,section.experience[data-selected-index="4"] .feature-block[data-feature-index="4"] h3,section.experience[data-selected-index="5"] .feature-block[data-feature-index="5"] h3{color:#6772e5}section.experience[data-selected-index="0"] .feature-block[data-feature-index="0"] p,section.experience[data-selected-index="1"] .feature-block[data-feature-index="1"] p,section.experience[data-selected-index="2"] .feature-block[data-feature-index="2"] p,section.experience[data-selected-index="3"] .feature-block[data-feature-index="3"] p,section.experience[data-selected-index="4"] .feature-block[data-feature-index="4"] p,section.experience[data-selected-index="5"] .feature-block[data-feature-index="5"] p{color:#7795f8}section.experience .intro-copy{position:relative;max-width:910px}section.experience .intro-copy .common-IntroText{margin:15px auto 0}section.experience .demo-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;max-width:1100px}section.experience .demo-container>ul{width:100%}@media (min-width:670px){section.experience .demo-container{margin-top:70px}}section.experience .feature-block{cursor:pointer;transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:cubic-bezier(.165,.84,.44,1);-webkit-tap-highlight-color:transparent}@media (min-width:670px){section.experience .feature-block:hover .icon .base{fill:#6772e5}section.experience .feature-block:hover .icon .play{fill:#f6f9fc}section.experience .feature-block:hover h3{color:#6772e5}section.experience .feature-block:hover p{color:#7795f8}}section.experience .feature-block:active h3{color:#43458b}section.experience .feature-block:active p{color:#555abf}section.experience .feature-block:active .icon .base{fill:#555abf}section.experience .feature-block .icon svg{position:absolute;right:-16px;bottom:9px}@media (min-width:670px){section.experience .feature-block .icon svg{right:-10px}}section.experience .feature-block .icon svg .base,section.experience .feature-block .icon svg .play{transition:fill .5s cubic-bezier(.165,.84,.44,1)}section.experience .feature-block h3{color:#32325d}section.experience .feature-block h3,section.experience .feature-block p{transition:color .1s ease-in-out}section.experience .feature-block.responsiveness{display:none;pointer-events:none}section.experience .feature-block.responsiveness .icon{display:none}@media (min-width:670px){section.experience .feature-block.responsiveness{display:block;pointer-events:all}section.experience .feature-block.responsiveness .icon{display:block}}section.experience ul:nth-child(1){-ms-flex-order:2;order:2;margin-bottom:20px}@media (min-width:670px){section.experience ul:nth-child(1){-ms-flex-order:1;order:1;margin-bottom:0}}section.experience ul:nth-child(3){-ms-flex-order:3;order:3}section.experience .demo{-ms-flex-order:1;order:1;width:calc(100% + 30px);max-width:680px;transition:max-width .5s ease-in-out}@media (min-width:670px){section.experience .demo{-ms-flex-order:2;order:2;width:100%;margin:15px auto;overflow:hidden}section.experience .demo.is-playing{overflow:visible}}section.experience .demo .row{display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 10px}section.experience .demo .row:first-child{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 50px)}section.experience .demo .row:last-child{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 50px),transparent 100%)}section.experience .demo .row+.row{margin-top:15px}@media (min-width:670px){section.experience .demo .row+.row{margin-top:30px}}section.experience .demo .field{position:relative;-ms-flex:1;flex:1;height:50px}@media (min-width:670px){section.experience .demo .field{height:60px}}section.experience .demo .field+.field{margin-left:20px}@media (min-width:670px){section.experience .demo .field+.field{margin-left:30px}}section.experience .demo .field.background{border:2px dashed #e1e7ed;border-radius:6px}section.experience .sticky-mobile-demo{position:fixed;top:0;left:0;width:100%;background:linear-gradient(180deg,#f6f9fc calc(100% - 30px),rgba(246,249,252,0) 100%);padding:20px 15px 40px;z-index:100;opacity:0;pointer-events:none}@media (min-width:670px){section.experience .sticky-mobile-demo{display:none}}section.experience .sticky-mobile-demo.visible{opacity:1}@media (min-width:670px){section.customize.elements-configurator-loaded .editor-wrapper .editor{height:650px}section.customize.elements-configurator-loaded .editor-wrapper .editor .initial{display:none}}@media (min-width:670px) and (min-width:880px){section.customize.elements-configurator-loaded .description p.try{display:block}}section.customize{position:relative;margin-top:-110px;padding-bottom:60px;border-bottom:2px solid #f6f9fc}@media (min-width:670px){section.customize{border-bottom-style:none}}section.customize .container-lg{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:1140px}section.customize .container-lg>*+*{margin-top:40px}@media (min-width:880px){section.customize .container-lg{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;padding-right:70px}section.customize .container-lg>*{-ms-flex-preferred-size:50%;flex-basis:50%}section.customize .container-lg>*+*{margin-left:80px;margin-top:0}}section.customize pre.initial{background:#424770;line-height:24px;padding:10px;font-family:Source Code Pro,monospace;font-size:14px;border-radius:4px}section.customize pre.initial code{color:#fff}section.customize pre.initial code .token.keyword{color:#f6a4eb}section.customize pre.initial code .token.operator,section.customize pre.initial code .token.punctuation{color:#9cdbff}section.customize pre.initial code .token.string{color:#fcd669}section.customize .editor-wrapper{margin-top:-160px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}@media (min-width:670px){section.customize .editor-wrapper{height:650px}}section.customize .editor-wrapper .editor{-ms-flex-preferred-size:580px;flex-basis:580px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0;transition:height .5s}@media (min-width:670px){section.customize .editor-wrapper .editor{height:450px}}section.customize .editor-wrapper .editor .initial{padding:15px;font-size:12px;line-height:1.75;overflow:hidden}@media (min-width:670px){section.customize .editor-wrapper .editor .initial{padding:20px;font-size:14px}}section.customize .editor-wrapper .editor .elements-configurator-container{display:none}@media (min-width:670px){section.customize .editor-wrapper .editor .elements-configurator-container{display:block}}section.customize .description{text-align:left}@media (min-width:670px){section.customize .description{text-align:center;margin-bottom:50px}section.customize .description h2{margin-right:-30px}}@media (min-width:880px){section.customize .description{text-align:left}}section.customize .description p{margin-top:15px}section.customize .description p.try{display:none;position:relative;margin-top:40px}section.customize .description p.try:before{content:"";position:absolute;width:60px;height:2px;background-color:#e6ebf1;left:-80px;top:12px}section.customize .description p.try:after{content:"";position:absolute;width:8px;height:8px;background-color:#e6ebf1;border-radius:50%;left:-25px;top:9px}section.customize.no-configurator .editor{display:none}section.security{padding:60px 0}@media (min-width:670px){section.security{padding:60px 0 120px}}section.security .columns>*+*{margin-top:40px}@media (min-width:670px){section.security .columns>*+*{margin-top:0}}section.security h3,section.security p{margin-top:15px}section.code{position:relative;padding:60px 0 200px}@media (min-width:670px){section.code{padding:120px 0 0}}section.code:before{content:"";position:absolute;width:100%;height:3000px;top:0;left:0;background-color:#f6f9fc}section.code>*{position:relative}section.code .intro-copy p{margin-top:15px}section.code .columns{max-width:1080px}@media (min-width:670px){section.code .columns{margin-top:70px}}section.code .columns>*{padding-top:30px}section.code .block{display:-ms-flexbox;display:flex;will-change:transform}section.code .block .label{width:100px;margin-top:-3px;margin-right:20px;text-align:right;font-family:Source Code Pro;font-size:14px;text-transform:uppercase}section.code .block pre{width:calc(100% - 120px);padding:0 2px;white-space:pre-wrap}section.code .block code{white-space:pre-wrap;font-family:Flow-Circular;font-size:13px;line-height:10px}section.code .block code.large{display:none}@media (min-width:670px){section.code .block code.large{display:inline}}section.code .block+.block{margin-top:1em}section.code .non-elements{overflow:hidden}@media (min-width:670px){section.code .non-elements{max-height:650px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 200px),transparent calc(100% - 100px))}}section.code .non-elements .label{color:#aab7c4}section.code .elements .label{color:#3ecf8e}section.code .non-elements pre,section.code .non-elements pre code .token.atrule,section.code .non-elements pre code .token.keyword{color:#8898aa}section.code .non-elements pre code .token.attr-name,section.code .non-elements pre code .token.selector,section.code .non-elements pre code .token.tag,section.code .non-elements pre code .token.tag *{color:#aab7c4}section.code .non-elements pre code .token.comment{color:#cfd7df}section.code .non-elements pre code .token.function,section.code .non-elements pre code .token.url{color:#424770}section.code .non-elements pre code .token.boolean,section.code .non-elements pre code .token.builtin,section.code .non-elements pre code .token.class-name,section.code .non-elements pre code .token.constant,section.code .non-elements pre code .token.namespace{color:var (--slate3)}section.code .non-elements pre code .token.number{color:#424770}section.code .non-elements pre code .token.curl,section.code .non-elements pre code .token.option,section.code .non-elements pre code .token.parameter,section.code .non-elements pre code .token.symbol,section.code .non-elements pre code .token.variable{color:2}section.code .non-elements pre code .token.attr-value,section.code .non-elements pre code .token.macro,section.code .non-elements pre code .token.string,section.code .non-elements pre code .token.stripe,section.code .non-elements pre code .token.value{color:#525f7f}section.code .non-elements pre code .token.macro .keyword{color:#aab7c4}section.code .elements pre{color:#3ecf8e}section.code .elements pre code .token.atrule,section.code .elements pre code .token.attr-name,section.code .elements pre code .token.keyword,section.code .elements pre code .token.selector,section.code .elements pre code .token.tag,section.code .elements pre code .token.tag *{color:#74e4a2}section.code .elements pre code .token.comment{color:#aff1b6}section.code .elements pre code .token.function,section.code .elements pre code .token.url{color:#159570}section.code .elements pre code .token.boolean,section.code .elements pre code .token.builtin,section.code .elements pre code .token.class-name,section.code .elements pre code .token.constant,section.code .elements pre code .token.namespace{color:var (--green4)}section.code .elements pre code .token.number{color:#159570}section.code .elements pre code .token.curl,section.code .elements pre code .token.option,section.code .elements pre code .token.parameter,section.code .elements pre code .token.symbol,section.code .elements pre code .token.variable{color:3}section.code .elements pre code .token.attr-value,section.code .elements pre code .token.macro,section.code .elements pre code .token.string,section.code .elements pre code .token.stripe,section.code .elements pre code .token.value{color:#3ecf8e}section.code .elements pre code .token.macro .keyword{color:#aff1b6}section.features{position:relative;padding:0 0 70px}@media (min-width:670px){section.features{padding:60px 0 100px}}section.features .stripes{position:absolute;width:100%;height:5000px;left:0;top:-120px;background-color:#32325d;transform:skewY(-12deg)}section.features .stripes:before{content:"";position:absolute;top:0;right:0;width:21%;height:190px;background:linear-gradient(90deg,#37386a,#404182)}section.features .feature-list,section.features .intro-copy{position:relative}section.features .intro-copy h3{color:#fff}section.features .intro-copy p{color:#9cdbff;margin-top:15px}section.features .feature-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;color:#fff;margin-top:30px}@media (min-width:670px){section.features .feature-list{margin-top:60px}}section.features .feature-list li{position:relative;width:100%;padding:10px 35px;transition:color .15s ease-in-out}@media (min-width:670px){section.features .feature-list li{width:50%}section.features .feature-list li:hover{color:#fcf4b2}section.features .feature-list li:hover .popover{opacity:1;transition-timing-function:cubic-bezier(.165,.84,.44,1);transform:translateY(calc(-100% - 5px))}}@media (min-width:880px){section.features .feature-list li{width:33.33333%}}section.features .feature-list li:before{content:"";position:absolute;width:23px;height:23px;top:12px;left:0;background-image:url(/img/v3/elements/overview/feature-checkmark.svg)}section.features .feature-list li:active{color:#fcf4b2}section.features .feature-list li:active .popover{opacity:1;transition-timing-function:cubic-bezier(.165,.84,.44,1);transform:translateY(calc(-100% - 5px))}section.features .feature-list .popover{position:absolute;left:-10px;right:-10px;top:0;background-color:#fcf4b2;border-radius:4px;box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);transition-property:transform,opacity;transition-duration:.15s;transition-timing-function:ease-in-out;pointer-events:none;opacity:0;transform:translateY(-100%) scale(.75);transform:translateY(calc(-100% + 10px)) scale(.75);transform-origin:20px calc(100% + 12px);color:#32325d;padding:15px 20px;font-size:13px;font-weight:500;line-height:1.5em}section.features .feature-list .popover:before{content:"";position:absolute;bottom:-6px;left:15px;width:12px;height:12px;transform:rotate(45deg);border-radius:0 0 4px 0;background-color:inherit;box-shadow:3px 3px 5px rgba(82,95,127,.04)}