npm - mp-design-system - Versions diffs - 1.2.25 → 1.2.26 - Mend - Supply Chain Defender

mp-design-system 1.2.25 → 1.2.26

Sign up to get free protection for your applications and to get access to all the features.

Files changed (9) hide show

package/dist/build/js/app.js.map +1 -1
package/dist/build/scss/library.css +1 -1
package/dist/build/scss/library.css.map +1 -1
package/dist/build/scss/main.css +1 -1
package/dist/build/scss/main.css.map +1 -1
package/package.json +1 -1
package/src/_includes/components/meta-box/meta-box.scss +0 -24
package/src/assets/scss/objects/grid.scss +10 -0
package/src/brand/typography.md +1 -1

package/dist/build/scss/main.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AEcA,6NCaA,8GAIA,4GAIA,8FAIA,8GAIA,sHC8DA,mMAWA,qCACE,uDAKF,2nDAWA,6NASA,+NASA,uNCrIA,88EAkCA,mCACE,gDErDF,uECCA,uCAMA,iHASA,4BAIA,+CASA,sDAOA,gEAWA,gBAYA,8LAIA,sCAaA,wBAIA,uBAIA,uCAQA,8BAOA,+BAOA,+JAcA,qBAIA,oCAOA,uCACE,qFCpIF,0EAKA,iCAKE,soBCVF,uBAeE,mDAMA,wJAOE,6HAKF,oRAKE,gFAQF,2EAMA,yCAIA,qKAQA,gIAWA,gGAKA,oCAQE,sGAKA,uJAOF,6DAKE,kHAKF,gDAKA,8DAIA,gFAMA,sEAOA,wBACE,oGAGE,+EAKF,iGAKF,iHAUF,qDClGA,oJAQE,0DAMA,+CAIA,2CAIA,2CAKE,wBA1DF,oIAKE,+DAIA,+CAMA,gJAKE,0EAIA,0DAuCJ,qDAGE,wBAlEF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,yGAoDF,wBA5EF,yIAKE,oEAIA,oDAMA,qJAKE,+EAIA,+DA0DF,0BAlFF,0IAKE,qEAIA,qDAMA,sJAKE,gFAIA,gEAgEF,kDAxFF,sIAKE,iEAIA,iDAMA,kJAKE,4EAIA,4DAoEF,wBA5FF,iJAKE,iEAIA,iDAMA,6JAKE,4EAIA,4DA0EF,kDAlGF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,iEA8EF,wBAtGF,sJAKE,sEAIA,sDAMA,kKAKE,iFAIA,iEAoFF,oDA5GF,4IAKE,uEAIA,uDAMA,wJAKE,kFAIA,kEAwFF,wBAhHF,uJAKE,uEAIA,uDAMA,mKAKE,kFAIA,kEA8FF,kDAtHF,2JAKE,wFAIA,qFAMA,iLAKE,6GAIA,0GAkGF,wBA1HF,4JAKE,wFAIA,qFAMA,kLAKE,6GAIA,0GAwGF,oDAhIF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,iEA4GF,wBApIF,4IAKE,sEAIA,sDAMA,wJAKE,iFAIA,iEAkHF,6BADF,kWASI,qIAQA,4DAMJ,wBACE,oFAKA,6aAeA,kfAiBA,kcAgBA,0JAOA,oGAIA,sGASA,4CAIA,yCAIA,6BAIA,+GAKA,iHAMF,wBACE,mSAWA,oSCvSA,6DAGI,mEAKJ,8KAOI,mZAYA,8TAMJ,sGAKI,6DAKJ,2FC5CJ,uOASE,8BAIA,4BAIA,+DAIE,sCAKF,+HAUA,mIAQA,iGAGE,gFAGE,yJASJ,4DAKA,4DAKA,0DCpEA,qGAMA,uGAME,mKAQF,4DAIE,6DAMF,qCC/BF,uQAaA,igBA2BE,+JAOA,0KAYA,8CAIA,4EAKA,mHAOA,gEAGE,+HAMF,yHAGE,yQAMF,0DAGE,mHAMF,4GAME,yIAOF,4EAGE,uJAMF,+GAKE,sKAOF,qHAKE,yMAQF,oHAKA,0EAIE,gGAMA,8CACE,gMCnKN,mLAWE,mJASA,+CAKA,6BAGE,kCAKF,6JAME,uGAMA,6LAOA,qGAMA,qLAOA,0GAMA,6LAKF,wBA5EF,yBA+EI,kDAIA,kEAKE,0FAMA,yGChGN,iGAOE,+CAIE,wDAKF,mDAIE,oEAKA,wEAMF,0HAMA,8HAMA,kFAME,gDAMF,8FAKA,qEAMA,iFAQE,qEAKE,uGAIA,mIAKF,wBACE,0DAIA,gHAOE,sIAKA,sJAMA,4FAKA,6DACE,+JAIA,gOAjCN,wBAuCE,+IAUF,yHAKA,wBACE,yIAQF,wBACE,yHAKA,4HAQF,wBACE,+GX5IJ,+DWsJA,8JAOA,8HAIA,6HAOA,+EAIA,+EAIA,uBAIA,oIAKA,0FAIA,2CAIA,gFAMA,wBACE,gGAOF,uMAUA,4FAIA,2EAIA,+CXjOA,gEWwOE,kCAIA,qEX5OF,mEWyPE,+FAKA,4EAMA,0KAKA,6FAGA,wDAGA,wDAKF,oEAIA,yIAOE,sEAIE,yJAYF,oCAIA,uCAIA,uEAKF,uPAeE,oDAMF,8CAIA,gIAOA,+GX5VA,4EWoWI,2CAKF,+CAIA,sCAKF,2FAKA,wEASE,wEAIA,4DAGE,yGAIA,8FAIE,qIASJ,wBACE,4GAKA,0GAIE,+EAON,mDAGE,4FAMA,0FAKA,qDAIA,qFAIA,iFAKA,6DAIA,6gBAQJ,+GAIE,qKAWF,2FCzfA,+BAGE,qCAIA,6DAIA,gCCXF,8GAQE,0EAIA,iHAME,kFAUF,qGAIE,4GAKA,2FAOE,4DAKF,yDAKF,gJAQE,iDAKF,yEAKE,gFCxEJ,sDAIE,wEAGE,wBACE,wFAON,yCAGE,4EAIA,8EAKI,sEAON,2GAKI,oHAWA,uIAOA,+CAKF,uKAOE,4EAMA,6FAIE,4MAWE,wOAiBF,4EAKA,yEAIA,4EAKA,yLASE,yDAIA,4DAIA,6DAON,wBACE,0CAIA,2CAMJ,yCACE,qIAKA,uIAKA,0IAKA,wIAKA,qIAKA,2ICtLF,2BAGE,oEAKE,0ECRJ,8DAIE,wEAIA,2EAIA,wBAZF,sCAeI,iDAIA,iEAIE,4GCvBN,6FAIE,8CAKA,oIAIE,wBAJF,0HASA,gFAIA,gDAIA,wGjBAA,4EiBSE,8CAKF,yGAOE,mIAME,kHAUA,wEAMJ,iCAGE,oEAIA,sHAKF,wBACE,kCAIA,mCAKF,sFC3FF,mLASE,+BAIA,wFAME,uDAKA,oDAIA,wCAfF,0CCbF,sHAME,gCAIA,qHAKA,yJAOA,oCAIE,sEAIA,qEAKF,wFAIE,kHAWF,mEAMA,wDAKE,kGAMF,0EAIE,sEAIA,2CAKF,kFAIE,oEAMF,sCAIA,uCAIA,wBACE,qJAOA,+FAIE,sEAMJ,0BACE,qFAOJ,qFC5HA,2BAGE,8BAIA,mCAGE,8BAGE,qHAQA,4CAMJ,qHAQE,qHAME,gFAOA,+CChDN,gCAGE,6EAKA,qFAOE,+BAKF,oCAGE,uFAMF,yBACE,gDAKF,yBACE,iEAIA,oSAmBE,6FAMA,gDAKF,kJAME,0GAQA,uFAIA,giBAaE,wDAMJ,qCAKA,+FAKE,iEAMJ,yBA3HF,0BA8HI,kCAIA,4FAOA,yFAMA,6JAME,uDAIA,qCAIA,uEAIA,+dAYF,0NAWE,yNAiBE,kHAjBF,4GA7DJ,yBAuFI,iCAvFJ,yBA2FI,qEA3FJ,yBA+FI,+HA/FJ,yBAoGI,0EAIE,6DAxGN,yBA+GE,qDAKF,0BACE,sFAMJ,6IAQE,0IAUE,yEAIA,wEC5QJ,sRAQA,mIAQE,6IAIA,gLAME,gOAYA,8QAcF,6DAKE,+DAIA,sRAKA,mCAIA,qFAKE,mEAMJ,6CAIE,yKAKF,oMAUE,0PAUA,wBApBF,4GAuBI,gMAKF,wBACE,kNAMJ,uGAGE,wBAHF,iLAOE,4IASE,wBATF,qNAcA,sMAWI,wBADF,4HAKE,60BAIA,8FAIA,oeAKF,yKAGE,wBAHF,8PAWI,iMAIA,uQAMJ,wFAOJ,0CAGE,oHASE,wBATF,6LAeE,mMAIE,wBAJF,sMAWE,0GAMA,wBANA,2IAgBA,wFAOF,4KAUE,wBAVF,gHAkBE,+EAGE,4KAeR,6FAIE,wBAJF,8IAUM,ucAIA,sDAIA,qQAON,iFAQE,wBARF,2BC3TF,6DCAA,4LAaE,8CAKA,mEAIA,0CAKA,gCAIA,wWAOA,oDAKA,iDAKW,kGAQX,uDAIE,oEAIA,6hBAYF,6CAGE,mDAKF,mJAMA,i0BAiBF,+BAKA,kFAQE,+CAKF,wFAMA,4DAME,mKAUE,gCAKF,8ICpJA,oSAQE,mRAaF,+KAOE,+LAOA,yLAOA,uPAaE,6HAMF,yFAKA,4IAYF,wGAKA,wRAiBA,qLAQA,oHAQA,kFAKA,kHAKA,8HAOA,2DCzIF,kIAUE,4PAWE,8MAgBF,oGAKA,4DAIA,uEAIA,4JAKA,+EAKE,mGAKE,4EAIF,yECrEJ,wFAKE,gEAKE,wDAKF,uGAQA,6HAQA,uKASE,sEAaF,wBACE,8DAKA,yEAOJ,0DAIA,kCCtEA,mI5B0BE,0D4BpBA,4CAIA,gEAVF,2IAiBI,+BAIA,kCAIA,wCAIA,wCC7BJ,iLAYE,qCAIA,mLAaA,oLAYA,gFAIE,kDAKF,oFAIA,gJAMA,wJAQA,uEAMA,0EAKE,2EAKA,qDAMJ,wCACE,6CAKE,oGC/FF,mCAIA,+BAGE,iDAKF,sFAKA,oFAIE,wBAJF,4CAUE,mGAKE,wDCjCN,0G/B0BE,8DgC1BF,4KAaE,2VAIA,yDAMA,yCAIA,iGAMA,6GAKA,8FAKA,iIAOA,wBACE,sEAKA,iDCxDJ,8IAMI,0OAgBA,iHAKA,oDAIA,6JAMA,+BAIA,+IAIE,qFC7CN,yEAKE,sGAME,gDAIA,0FAQF,+CAMF,oDAIA,yCACE,qEAKA,4FAOF,yCACE,6GC/CF,uLAQE,gCAIA,gCAGE,sBAHF,8BCXA,kDAKA,sHAQA,mFAGE,+DAMF,8DCvBF,0GAIE,uCAIA,qCAIA,sKAME,wBANF,+CAWA,gKAOA,oKAOA,4JAOA,sHAKA,+ECjDF,kKAQE,8CAIA,gLAcE,qJAMF,4DAKA,sDAKE,8DAMF,yBAEI,iCAGE,6CAON,0BAIA,kEAIA,kEAIA,oEAMA,6DAKE,2EAMA,+DAMA,mGAMA,0DAMF,wBACE,0DAKF,mCAGE,wBACE,8BAMJ,wBAEI,4IAQA,wCAIA,8IAMA,oIAKE,+GCnJN,uCAGE,8CAKF,gCAGE,8CAKF,qDAGE,2DAKF,8CAGE,mFAMF,kFAIE,qGAME,uCAMJ,wRACE,mCAcA,mCAfF,qCAmBE,qEAIA,2DAIE,qDAOJ,+EAKA,2CAIA,0BAGE,+BChGJ,4GAQE,kDAKA,uEAMA,0DCnBF,2HAKE,6JAQE,4FAOF,4CAIE,iDAJF,uIAUI,uDAMJ,0BAKA,+EAIE,kGAMF,mNCjDM,wFAMA,4EAIA,qFAKA,oHASJ,iGAMI,yEAII,yDAKJ,gEAII,qIAQR,2DAKA,gDAIA,sFC9DJ,uOAKE,iHAMA,8F3CgIA,yC2ChIA,kE3CuIA,yCACE,4F2ClIF,6E3C0HA,yC2C1HA,iD3CiIA,yCACE,8D2C7HF,6EAIA,iIAIA,yFAIA,4HAIA,0EAIA,4EAIA,yFAKA,sIAOA,8FAKA,yFC/DF,uJAWE,2DAKE,wCAGE,0GAUJ,8JAWA,iaAKA,uaAKA,sGASA,8CC1DE,6HAKI,yGAGI,yYAKJ,4OAaA,wBACI,8CAKJ,yWAMJ,+D7CbF,wE6CmBM,iQAMI,0QAGI,iDAHJ,0YASQ,iVAMR,oKClEZ,WECE,qFAAA,mFAAA,iFAAA,mFAAA,oFAAA,mFAAA,oFAAA,oFAAA,oFAAA,mFAAA,mFAAA,oFAAA,uFAKF,+FAIE,wDAMF,oCAIA,oCAIA,sCAIA,2CAIA,iDChCA,yMAME,0OAIA,yGAIA,gGAIA,8HAGE,2ICpBF,kCACA,gDAGI,0CACA,wDADA,0CACA,wDADA,yCACA,uDADA,yCACA,uDADA,yCACA,uDALJ,gCACA,8CAGI,wCACA,sDADA,uCACA,qDADA,uCACA,qDADA,uCACA,qDALJ,iCACA,+CAGI,yCACA,uDADA,wCACA,sDADA,wCACA,sDADA,wCACA,sDALJ,+BACA,6CAGI,uCACA,qDADA,sCACA,oDADA,sCACA,oDADA,sCACA,oDALJ,wCACA,sDAGI,gDACA,8DADA,+CACA,6DADA,+CACA,6DADA,+CACA,6DALJ,0CACA,wDAGI,kDACA,gEADA,iDACA,+DADA,iDACA,+DADA,iDACA,+DALJ,6BACA,2CAGI,iCACA,+CADA,wCACA,sDADA,wCACA,sDADA,uCACA,qDADA,uCACA,qDADA,uCACA,qDALJ,8BACA,6ECFF,yCAGI,6ECHJ,wQASE,+LAKA,yDAKA,0FCnBF,+BAIA,+CAIA,6CAIA,mDAIA,2DAIA,kDAIA,2BAIA,0CAIA,sCAIA,sCCpCA,2OAWA,kEAKA,mCAIA,uCAIA,yCAIA,uDAIA,kEAIA,+IAIA,0FAKE,wBALF,4GAYA,2FAKE,wBALF,2GAYA,0LAWA,mKAMA,wCAIA,0CAKA,uDAIA,2GAOE,+CAIA,gDAIA,8EAIA,sBAnBF,iDAsBI,oDAMJ,4DAKA,gCACE,gDAKF,8BACE,6EAQF,yBACE,+CAMF,iCtD3HE,wEAAA,0JAAA,uEAAA,yFAAA,mEAAA,uEAAA,uEAAA,yEAAA,mEAAA,qEAAA,2EAAA,wEuDwBA,2GvDxBA,uEuDmCE,iKR5DJ,qCAGA,mEAGA,mEAGA,mEAGA,qEAGA,uEAGA,uEAGA,yEAIA,2CAGA,4EAGA,4EAGA,4EAGA,8EAGA,gFAGA,gFAGA,kFAIA,uCAGA,sEAGA,sEAGA,sEAGA,wEAIA,yCAGA,yEAGA,yEAGA,yEAGA,2EAIA,6BAGA,4DAGA,uDAGA,uDAGA,uDAGA,yDAIA,0HAIA,mHAIA,mHAIA,yHAIA,mHAIA,sHAIA,yHAIA,4HAIA,+HAKA,mHAIA,mHAIA,mHAIA,sHAIA,4HAOA,uCAGA,6CAGA,uEAGA,wEAGA,oEAGA,oEAGA,oEAGA,sEAGA,wEAGA,wEAGA,0EAGA,4EAGA,8EAIA,6CAGA,6EAGA,6EAGA,6EAGA,+EAGA,iFAGA,iFAGA,iFAGA,mFAGA,mFAIA,yCAGA,0EAGA,2EAGA,uEAGA,uEAGA,uEAGA,yEAIA,2CAGA,8EAGA,0EAGA,0EAGA,0EAGA,4EAIA,+BAGA,wDAGA,wDAGA,wDAGA,0DAIA,yHAIA,kHAIA,wHAIA,kHAIA,kHAIA,qHAKA,0HAIA,sHAIA,yHAIA,kHAIA,kHAIA,kHAIA,qHAKA,4DAOA,mCAIA,kCSnWA,oLAQA,qDAIA,2DAIA,6CChBA,uGCGI,yCA2DJ,waA3DI,yCA+DJ","sources":["scss/main.css","src/assets/scss/main.scss","src/assets/scss/tools/breakout.scss","src/assets/scss/tools/cutoff.scss","src/assets/scss/foundations/typography.scss","src/assets/scss/foundations/space.scss","src/assets/scss/tools/index.scss","src/assets/scss/foundations/animation.scss","src/assets/scss/elements/reset.scss","src/assets/scss/elements/typography.scss","src/assets/scss/objects/prose.scss","src/assets/scss/objects/grid.scss","src/_includes/components/accordion/accordion.scss","src/_includes/components/alert/alert.scss","src/_includes/components/breadcrumb/breadcrumb.scss","src/_includes/components/button/button.scss","src/_includes/components/campaign/campaign.scss","src/_includes/components/card/card.scss","src/_includes/components/card/industry-card.scss","src/_includes/components/card/product-comparison-card.scss","src/_includes/components/comparison-table/comparison-table.scss","src/_includes/components/embed/embed.scss","src/_includes/components/featured-article-card/featured-article-card.scss","src/_includes/components/features-table/features-table.scss","src/_includes/components/filter-search/filter-search.scss","src/_includes/components/footer/footer.scss","src/_includes/components/gallery/gallery.scss","src/_includes/components/header/header.scss","src/_includes/components/hero/hero.scss","src/_includes/components/icon/icon.scss","src/_includes/components/input/input.scss","src/_includes/components/input/radio.scss","src/_includes/components/input/toggle.scss","src/_includes/components/internal-nav/internal-nav.scss","src/_includes/components/meta-box/meta-box.scss","src/_includes/components/off-canvas/off-canvas.scss","src/_includes/components/option-list/option-list.scss","src/_includes/components/post-meta/post-meta.scss","src/_includes/components/product-signpost/product-signpost.scss","src/_includes/components/quote/quote.scss","src/_includes/components/scroll-spy/scroll-spy.scss","src/_includes/components/series/series.scss","src/_includes/components/signpost/signpost.scss","src/_includes/components/slat/slat.scss","src/_includes/components/table/table.scss","src/_includes/components/tabs/tabs.scss","src/_includes/components/twi/twi.scss","src/_includes/components/usp/usp.scss","src/assets/scss/components/form.scss","src/assets/scss/components/headings.scss","src/assets/scss/components/lightbox.scss","src/assets/scss/components/product-finder.scss","src/assets/scss/utilities/index.scss","src/assets/scss/utilities/space.scss","src/assets/scss/utilities/typography.scss","src/assets/scss/utilities/link.scss","src/assets/scss/utilities/colour.scss","src/assets/scss/utilities/disabled.scss","src/assets/scss/utilities/wrap.scss","src/assets/scss/utilities/flex.scss","src/assets/scss/utilities/display.scss","src/assets/scss/utilities/flow.scss","src/assets/scss/utilities/hr.scss","src/assets/scss/utilities/ellipsis.scss","src/assets/scss/utilities/scroll-shadows.scss"],"sourcesContent":[".u-breakout {\n left: 50%;\n left: calc(50% + var(--scrollbarWidth) / 2.0001);\n width: 100vw;\n width: calc(100vw - var(--scrollbarWidth) );\n padding-left: safe-space(0);\n padding-right: safe-space(0);\n position: relative;\n transform: translateX(-50vw);\n}\n\n.u-cutoff {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n}\n\n.u-cutoff--top-right {\n clip-path: polygon(0 0, calc(100% - var(--gutter) ) 0, 100% var(--gutter), 100% 100%, 0 100%);\n}\n\n.u-cutoff--top-left {\n clip-path: polygon(0 var(--gutter), var(--gutter) 0, 100% 0, 100% 100%, 0 100%);\n}\n\n.u-cutoff--bottom-left {\n clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter) 100%, 0 calc(100% - var(--gutter) ) );\n}\n\n.u-cutoff--xl {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xl) ), calc(100% - var(--space-xl) ) 100%, 0 100%);\n}\n\n:root {\n --fluid-min-width: 320;\n --fluid-max-width: 1332;\n --fluid-screen: 100vw;\n --fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width) ) );\n}\n\n@media screen and (min-width: 1332px) {\n :root {\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\n }\n}\n\n:root {\n --f--2-min: 12.64;\n --f--2-max: 12.5;\n --step--2: calc( ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min) ) * var(--fluid-bp) );\n --f--1-min: 14.22;\n --f--1-max: 15;\n --step--1: calc( ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min) ) * var(--fluid-bp) );\n --f-0-min: 16;\n --f-0-max: 18;\n --step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min) ) * var(--fluid-bp) );\n --f-1-min: 18;\n --f-1-max: 21.6;\n --step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min) ) * var(--fluid-bp) );\n --f-2-min: 20.25;\n --f-2-max: 25.92;\n --step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min) ) * var(--fluid-bp) );\n --f-3-min: 22.78;\n --f-3-max: 31.1;\n --step-3: calc( ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min) ) * var(--fluid-bp) );\n --f-4-min: 25.63;\n --f-4-max: 37.32;\n --step-4: calc( ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min) ) * var(--fluid-bp) );\n --f-5-min: 28.83;\n --f-5-max: 44.79;\n --step-5: calc( ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min) ) * var(--fluid-bp) );\n --f-6-min: 32.44;\n --f-6-max: 53.75;\n --step-6: calc( ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min) ) * var(--fluid-bp) );\n --f-7-min: 36.49;\n --f-7-max: 64.5;\n --step-7: calc( ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min) ) * var(--fluid-bp) );\n --f-8-min: 41.05;\n --f-8-max: 77.4;\n --step-8: calc( ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min) ) * var(--fluid-bp) );\n --f-9-min: 46.18;\n --f-9-max: 92.88;\n --step-9: calc( ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min) ) * var(--fluid-bp) );\n --f-10-min: 51.96;\n --f-10-max: 111.45;\n --step-10: calc( ((var(--f-10-min) / 16) * 1rem) + (var(--f-10-max) - var(--f-10-min) ) * var(--fluid-bp) );\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"../Inter-Regular.ed77b881.woff2\") format(\"woff2\"), url(\"../Inter-Regular.ca6858d7.woff\") format(\"woff\");\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(\"../Inter-SemiBold.dd034768.woff2\") format(\"woff2\"), url(\"../Inter-SemiBold.cc1168df.woff\") format(\"woff\");\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(\"../Inter-Bold.af5441a3.woff2\") format(\"woff2\"), url(\"../Inter-Bold.419e8c71.woff\") format(\"woff\");\n}\n\n:root {\n --max-screen: 83.25;\n --fc-screen: 100vw;\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20) );\n --fc-base: 18;\n --fc-3xs: 4.5;\n --space-3xs: calc(var(--fc-3xs) / 16 * 1rem);\n --fc-2xs: 9;\n --space-2xs: calc(var(--fc-2xs) / 16 * 1rem);\n --fc-xs: 13.5;\n --space-xs: calc(var(--fc-xs) / 16 * 1rem);\n --fc-s: 18;\n --space-s: calc(var(--fc-s) / 16 * 1rem);\n --fc-m: 27;\n --space-m: calc(var(--fc-m) / 16 * 1rem);\n --fc-l: 36;\n --space-l: calc(var(--fc-l) / 16 * 1rem);\n --fc-xl: 54;\n --space-xl: calc(var(--fc-xl) / 16 * 1rem);\n --fc-2xl: 72;\n --space-2xl: calc(var(--fc-2xl) / 16 * 1rem);\n --fc-3xl: 108;\n --space-3xl: calc(var(--fc-3xl) / 16 * 1rem);\n --fc-4xl: 144;\n --space-4xl: calc(var(--fc-4xl) / 16 * 1rem);\n --space--3xs: calc( ((var(--fc-) / 16) * 1rem) + (var(--fc-3xs) - var(--fc-) ) * var(--fluid-bp) );\n --space-3xs-2xs: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-2xs) - var(--fc-3xs) ) * var(--fluid-bp) );\n --space-2xs-xs: calc( ((var(--fc-2xs) / 16) * 1rem) + (var(--fc-xs) - var(--fc-2xs) ) * var(--fluid-bp) );\n --space-xs-s: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-s) - var(--fc-xs) ) * var(--fluid-bp) );\n --space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s) ) * var(--fluid-bp) );\n --space-m-l: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-l) - var(--fc-m) ) * var(--fluid-bp) );\n --space-l-xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-xl-2xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-xl) ) * var(--fluid-bp) );\n --space-2xl-3xl: calc( ((var(--fc-2xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-2xl) ) * var(--fluid-bp) );\n --space-3xl-4xl: calc( ((var(--fc-3xl) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-3xl) ) * var(--fluid-bp) );\n --space-s-l: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-l) - var(--fc-s) ) * var(--fluid-bp) );\n --space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s) ) * var(--fluid-bp) );\n --space-xs-l: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-l) - var(--fc-xs) ) * var(--fluid-bp) );\n --space-m-xl: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-xl) - var(--fc-m) ) * var(--fluid-bp) );\n --space-l-2xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-s-xl: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-xl) - var(--fc-s) ) * var(--fluid-bp) );\n --space-l-3xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-xl-3xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-xl) ) * var(--fluid-bp) );\n --space-l-4xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-3xs-m: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-m) - var(--fc-3xs) ) * var(--fluid-bp) );\n --gutter: var(--space-s-l);\n}\n\n@media screen and (min-width: 75em) {\n :root {\n --fc-screen: calc(var(--max-screen) * 1rem);\n }\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n, :before, :after {\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n margin: 0;\n display: flex;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nblockquote, pre, ol, ul, figure {\n margin: 0;\n padding: 0;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n border: none;\n display: block;\n}\n\narticle, aside, figure, footer, header, aside, main, nav {\n display: block;\n}\n\niframe {\n border: none;\n}\n\nbody {\n letter-spacing: -.01em;\n font: 400 18px / 1.2 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-size: var(--step-0);\n color: #333;\n}\n\nh1, h2, h3, h4, h5, h6, p, ul, ol, dl {\n margin: 0;\n}\n\nul, ol, p {\n line-height: 1.2;\n}\n\na {\n text-decoration: none;\n}\n\na, a:hover {\n cursor: pointer;\n color: inherit;\n}\n\n.mp ol, .mp ul {\n list-style: none;\n}\n\ncite, address {\n font-style: normal;\n}\n\n[type=\"submit\"], [type=\"button\"], button {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n background: none;\n border: none;\n border-radius: 0;\n padding: 0;\n}\n\nlabel {\n cursor: pointer;\n}\n\nfieldset {\n border: none;\n padding: .01em 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n {\n scroll-behavior: auto !important;\n transition: none !important;\n animation: none !important;\n }\n}\n\nbody {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n:focus {\n outline: 2px solid #005461;\n}\n\n.body--blog .c-h--page-title, .body--blog .c-hero__content, .body--blog .o-prose--blog, .body--blog .u-lede, .body--blog .c-event-card, .body--blog .c-h--step-4, .body--blog .c-h--step-3, .body--blog .c-off-canvas__header, .body--blog .c-fieldset legend, .c-fieldset .body--blog legend, .body--blog .o-prose h2, .o-prose .body--blog h2, .body--blog .c-h--step-2, .body--blog .o-prose h3, .o-prose .body--blog h3, .body--blog .c-h--step-1, .body--blog .c-product-comparison-card__heading, .body--blog .o-prose h4, .o-prose .body--blog h4, .body--blog .c-card__title {\n -moz-font-feature-settings: \"salt\";\n -webkit-font-feature-settings: \"salt\";\n font-feature-settings: \"salt\";\n}\n\n.o-prose {\n color: inherit;\n}\n\n.o-prose p, .o-prose ul, .o-prose ol {\n line-height: 1.6;\n}\n\n.o-prose p a:not(.c-button), .o-prose li a:not(.c-button), .o-prose td a:not(.c-button) {\n color: #006daf;\n text-underline-offset: 3px;\n text-decoration: underline;\n}\n\n.o-prose p a:not(.c-button):hover, .o-prose li a:not(.c-button):hover, .o-prose td a:not(.c-button):hover {\n text-decoration: none;\n}\n\n.o-prose ul li {\n margin-left: 1em;\n padding-left: .5rem;\n list-style: outside url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"8\\\" height=\\\"20\\\" viewBox=\\\"0 0 10 20\\\"><circle cx=\\\"5\\\" cy=\\\"14\\\" r=\\\"3.5\\\" fill=\\\"%2313AA13\\\" fill-rule=\\\"evenodd\\\"/></svg>\");\n}\n\n.o-prose ul li h3, .o-prose ul li h4 {\n color: #13aa13;\n font-size: 1em;\n line-height: 1.6;\n}\n\n.o-prose ol li {\n margin-left: 1.125em;\n padding-left: .375rem;\n list-style: decimal;\n}\n\n.o-prose ol ol li {\n list-style: lower-alpha;\n}\n\n.o-prose pre {\n padding: 13.5px;\n padding: var(--space-xs);\n letter-spacing: -.01em;\n font-size: 15px;\n line-height: 1.4;\n font-size: var(--step--1);\n background: #ebf1f2;\n overflow-x: auto;\n}\n\n.o-prose li code, .o-prose p code {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #ebf1f2;\n padding: .25em;\n}\n\n.o-prose figcaption {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n display: block;\n}\n\n.o-prose figure > * + * {\n margin-top: .5em;\n}\n\n.o-prose ol ul, .o-prose ol ol, .o-prose ul ul, .o-prose ul ol {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.o-prose ol li + li, .o-prose ol li > ul, .o-prose ol li > ol, .o-prose ul li + li, .o-prose ul li > ul, .o-prose ul li > ol {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.o-prose ol, .o-prose ul, .o-prose > pre {\n --flow: var(--space-s-m);\n}\n\n.o-prose ol:not(:last-child), .o-prose ul:not(:last-child), .o-prose > pre:not(:last-child) {\n margin-bottom: var(--flow);\n}\n\n.o-prose h2, .o-prose h3 {\n --flow: var(--space-m-l);\n}\n\n.o-prose h2 {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\n.o-prose figure, .o-prose > img {\n --flow: var(--space-l-xl);\n margin-bottom: var(--flow);\n}\n\n.o-prose blockquote {\n --flow: var(--space-m-l);\n margin-bottom: var(--flow);\n}\n\n@media (min-width: 35em) {\n .o-prose:not(.o-prose--left-blockquote) blockquote {\n padding-left: 108px;\n padding-left: var(--space-3xl);\n }\n\n .o-prose:not(.o-prose--left-blockquote) blockquote:before {\n left: var(--space-xl);\n }\n\n .o-prose.o-prose--left-blockquote blockquote {\n padding-right: 108px;\n padding-right: var(--space-3xl);\n }\n}\n\n.o-prose--with-lede > p:first-of-type {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #00a2c2;\n}\n\n.o-featured-image {\n margin-left: calc(-1 * var(--gutter) );\n}\n\n.o-grid, .c-footer__sections {\n margin-bottom: -18px;\n margin-bottom: calc(-1 * var(--gutter) );\n width: 100%;\n flex-wrap: wrap;\n justify-content: stretch;\n display: flex;\n}\n\n.o-grid--float:after {\n content: \" \";\n clear: both;\n display: table;\n}\n\n.o-grid--between {\n justify-content: space-between;\n}\n\n.o-grid--no-height-match {\n align-items: start;\n}\n\n.o-grid > , .c-footer__sections > {\n width: 100%;\n}\n\n@media (min-width: 40em) {\n .o-grid--of-two > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n.o-grid--of-two-switch {\n justify-content: space-between;\n}\n\n@media (min-width: 40em) {\n .o-grid--of-two-switch > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-switch > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-switch > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-switch.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-switch.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-switch.o-grid--s > :nth-child(2n+1), .o-grid--of-two-switch > :nth-child(2n+2) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-two-late > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-late > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-late.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-late.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) {\n .o-grid--of-two-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 54.9375em) {\n .o-grid--of-three > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-three > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 67.9375em) {\n .o-grid--of-three-late > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-late > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-late.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 68em) {\n .o-grid--of-three-late > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-late > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-late.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) and (max-width: 54.9375em) {\n .o-grid--of-three-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-three-early > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-early > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-early.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 59.9375em) {\n .o-grid--of-four > , .c-footer__sections > {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four > * + , .c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four > :nth-child(2n+1), .c-footer__sections > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four.o-grid--s > , .o-grid--s.c-footer__sections > {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > * + , .o-grid--s.c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > :nth-child(2n+1), .o-grid--s.c-footer__sections > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 60em) {\n .o-grid--of-four > , .c-footer__sections > {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--gutter) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four > * + , .c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four > :nth-child(4n+1), .c-footer__sections > :nth-child(4n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four.o-grid--s > , .o-grid--s.c-footer__sections > {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--space-s) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > * + , .o-grid--s.c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > :nth-child(4n+1), .o-grid--s.c-footer__sections > :nth-child(4n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) and (max-width: 59.9375em) {\n .o-grid--of-four-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 60em) {\n .o-grid--of-four-early > * {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--gutter) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four-early > :nth-child(4n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four-early.o-grid--s > * {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--space-s) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > :nth-child(4n+1) {\n margin-left: 0;\n }\n}\n\n@media (max-width: 54.9375em) {\n .o-grid--swipeable {\n left: 50%;\n left: calc(50% + var(--scrollbarWidth) / 2.0001);\n width: 100vw;\n width: calc(100vw - var(--scrollbarWidth) );\n padding-left: var(--gutter);\n padding-right: var(--gutter);\n scroll-snap-type: x mandatory;\n scroll-padding: var(--gutter);\n -webkit-overflow-scrolling: touch;\n flex-wrap: nowrap;\n position: relative;\n overflow-x: scroll;\n transform: translateX(-50vw);\n }\n\n .o-grid--swipeable > * {\n max-width: 23em;\n width: calc(85vw - var(--gutter) * 2.333);\n scroll-snap-align: start;\n scroll-snap-stop: always;\n flex: none;\n }\n\n .o-grid--swipeable > * + * {\n margin-left: var(--gutter) !important;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--4\\/7 > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+2) {\n width: 57.1429%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--8\\/4 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--8\\/4-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n width: 65.7143%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--4\\/8 > :nth-child(2n+1), .o-grid--4\\/7 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2), .o-grid--4\\/8-switch > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+1) {\n width: 31.4286%;\n }\n\n .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n margin-left: 2.85714%;\n margin-right: 0;\n }\n\n .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n max-width: 828px;\n }\n\n .o-grid[class=\"switch\"] > :nth-child(2n+1), [class=\"switch\"].c-footer__sections > :nth-child(2n+1) {\n order: 1;\n }\n\n .o-grid--layout, .o-grid--layout > :nth-last-child(1), .o-grid--layout > :nth-last-child(2) {\n margin-bottom: 0;\n }\n\n .o-grid--push {\n justify-content: space-between;\n }\n\n .o-grid--pull {\n justify-content: flex-start;\n }\n\n .o-grid--float {\n display: block;\n }\n\n .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class=\"switch\"] > :nth-child(2n+2) {\n float: left;\n }\n\n .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class=\"switch\"] > :nth-child(2n+1) {\n float: right;\n }\n}\n\n@media (min-width: 70em) {\n .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n width: 74.2857%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2) {\n width: 22.8571%;\n }\n}\n\n.c-accordion__item {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n}\n\n.c-accordion__item + .c-accordion__item {\n border-top: 1px solid #bfd3d6;\n}\n\n.c-accordion__title {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n cursor: pointer;\n font-weight: 700;\n position: relative;\n}\n\n.c-accordion__title:before {\n content: \"\";\n height: 1em;\n width: 1em;\n background-image: url(\"data:image/svg+xml;utf8,<svg width=\\\"18\\\" height=\\\"18\\\" viewBox=\\\"0 0 18 18\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path d=\\\"M9 1V17M1 9H17\\\" stroke=\\\"%23252525\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/></svg>\");\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n position: absolute;\n left: 0;\n}\n\n.c-accordion__item--open .c-accordion__title:before {\n background-image: url(\"data:image/svg+xml;utf8,<svg width=\\\"10\\\" height=\\\"2\\\" viewBox=\\\"0 0 10 2\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path d=\\\"M1 1H9\\\" stroke=\\\"%23252525\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/></svg>\");\n transform: scaleX(1.75);\n}\n\n.c-accordion__content {\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n margin-left: 0;\n display: none;\n}\n\n.c-accordion__item--open .c-accordion__content {\n display: block;\n}\n\n.c-accordion__title, .c-accordion__content {\n padding-left: 36px;\n padding-left: var(--space-l-xl);\n}\n\n.c-alert {\n --alert-border: #006daf;\n border-left: 4px solid #006daf;\n border-left-color: var(--alert-border);\n padding: 18px 18px 18px 54px;\n padding: var(--space-s) var(--space-s) var(--space-s) var(--space-xl);\n background: #ebf3f9;\n position: relative;\n}\n\n.c-alert.mp p {\n line-height: 1.6;\n}\n\n.c-alert > * + * {\n margin-top: 1em;\n}\n\n.c-alert a {\n color: var(--alert-border);\n text-decoration: underline;\n}\n\n.c-alert a:hover {\n text-decoration: none;\n}\n\n.c-alert .c-icon {\n color: #000;\n color: var(--alert-border);\n margin-top: 0;\n font-size: 1.5rem;\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n}\n\n.c-alert pre {\n max-width: 100%;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: none;\n padding: 0;\n overflow-x: auto;\n}\n\n.c-alert--multiline {\n padding: 18px 18px 18px 0;\n padding: var(--space-s) var(--space-s) var(--space-s) 0;\n}\n\n.c-alert--multiline > :not(.c-icon) {\n padding-left: 18px;\n padding-left: var(--space-s);\n}\n\n.c-alert--multiline > :not(.c-icon):first-child {\n color: var(--alert-border);\n padding-left: 54px;\n padding-left: var(--space-xl);\n font-size: inherit;\n line-height: 1.6;\n}\n\n.c-alert--warning {\n --alert-border: #f2a60d;\n background: #fef8ec;\n}\n\n.c-alert--success {\n --alert-border: #13aa13;\n background: #ecf8ec;\n}\n\n.c-alert--error {\n --alert-border: #ce0058;\n background: #fbebf2;\n}\n\n.c-breadcrumb__list {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n display: flex;\n overflow-x: auto;\n}\n\n.c-breadcrumb__item {\n font-size: var(--step--2);\n white-space: nowrap;\n align-items: center;\n display: inline-flex;\n}\n\n.c-breadcrumb__item .c-icon {\n margin-right: 4.5px;\n margin-right: var(--space-3xs);\n margin-left: 4.5px;\n margin-left: var(--space-3xs);\n color: #959595;\n transform: rotate(270deg);\n}\n\n.c-breadcrumb__link {\n color: #4796c5;\n text-decoration: underline;\n}\n\n.c-breadcrumb__link:hover {\n color: #4796c5;\n text-decoration: none;\n}\n\n.c-breadcrumb__current {\n color: #959595;\n}\n\n.c-button--reset {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n background: none;\n border: none;\n border-radius: 0;\n padding: 0;\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n}\n\n::-webkit-file-upload-button, .mp.c-button, .c-button {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n text-align: center;\n letter-spacing: -.01em;\n color: #fff;\n background: #13aa13;\n border: none;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n padding: .777em 1.5em;\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-size: 1.125rem;\n font-weight: 700;\n transition: background-color .3s, color .3s, box-shadow .3s;\n display: flex;\n}\n\n:focus::-webkit-file-upload-button, .c-button:focus, :hover::-webkit-file-upload-button, .c-button:hover {\n color: #fff;\n background-color: #0e7a0e;\n text-decoration: none;\n}\n\n[disabled]::-webkit-file-upload-button, [disabled].c-button, [disabled] ::-webkit-file-upload-button, [disabled] .c-button {\n filter: saturate(.4);\n cursor: not-allowed;\n opacity: .6;\n}\n\n.mp.c-button--wide, .c-button--wide {\n width: 100%;\n}\n\n.mp.c-button--tight, .c-button--tight {\n padding-left: .75em;\n padding-right: .75em;\n}\n\n.mp.c-button--inline, .c-button--inline {\n vertical-align: top;\n margin-bottom: .5em;\n margin-right: .5em;\n display: inline-flex;\n}\n\n.mp.c-button--petrol, .c-button--petrol {\n background-color: #005461;\n}\n\n.mp.c-button--petrol:focus, .mp.c-button--petrol:hover, .c-button--petrol:focus, .c-button--petrol:hover {\n background-color: #3d7b87;\n}\n\n.mp.c-button--blue, .mp::-webkit-file-upload-button, .c-button--blue, ::-webkit-file-upload-button {\n background-color: #00a2c2;\n}\n\n.mp.c-button--blue:focus, .mp:focus::-webkit-file-upload-button, .mp.c-button--blue:hover, .mp:hover::-webkit-file-upload-button, .c-button--blue:focus, :focus::-webkit-file-upload-button, .c-button--blue:hover, :hover::-webkit-file-upload-button {\n background-color: #00758c;\n}\n\n.mp.c-button--red, .c-button--red {\n background-color: #ce0058;\n}\n\n.mp.c-button--red:focus, .mp.c-button--red:hover, .c-button--red:focus, .c-button--red:hover {\n background-color: #9b0042;\n}\n\n.mp.c-button--white, .c-button--white {\n color: #006daf;\n background-color: #fff;\n padding: .777em 1em;\n font-weight: 400;\n}\n\n.mp.c-button--white:focus, .mp.c-button--white:hover, .c-button--white:focus, .c-button--white:hover {\n color: #004e7e;\n background-color: #ebf1f2;\n}\n\n.mp.c-button--utility-blue, .c-button--utility-blue {\n background-color: #006daf;\n}\n\n.mp.c-button--utility-blue:focus, .mp.c-button--utility-blue:hover, .c-button--utility-blue:focus, .c-button--utility-blue:hover {\n background-color: #004e7e;\n}\n\n.mp.c-button--outline-white, .c-button--outline-white {\n color: #fff;\n background: none;\n box-shadow: inset 0 0 0 1px #fff;\n}\n\n.mp.c-button--outline-white:focus, .mp.c-button--outline-white:hover, .c-button--outline-white:focus, .c-button--outline-white:hover {\n color: #005461;\n background-color: #fff;\n}\n\n.mp.c-button--outline-green, .c-button--outline-green {\n color: #13aa13;\n background: none;\n box-shadow: inset 0 0 0 1px #13aa13;\n}\n\n.mp.c-button--outline-green:focus, .mp.c-button--outline-green:hover, .c-button--outline-green:focus, .c-button--outline-green:hover {\n color: #fff;\n background-color: #0e7a0e;\n box-shadow: inset 0 0 0 1px #0e7a0e;\n}\n\n.mp.c-button--small, .c-button--small {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n padding: .5em 1em;\n}\n\n.mp.c-button--loading, .c-button--loading {\n color: #0000;\n transition: color .3s;\n}\n\n.mp.c-button--loading:after, .c-button--loading:after {\n content: \"⌛\";\n color: #fff;\n position: absolute;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .mp.c-button--loading:after, .c-button--loading:after {\n content: \"\";\n height: 1em;\n width: 1em;\n border: 3px solid #3336;\n border-top-color: #fff;\n border-radius: 50%;\n animation: spin 1.2s infinite;\n display: block;\n }\n}\n\n.c-campaign {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n position: relative;\n max-width: 78.75rem !important;\n padding: 0 !important;\n}\n\n.c-campaign__content {\n color: #fff;\n width: 100%;\n padding: 27px;\n padding: var(--space-m-l);\n background: linear-gradient(225deg, #0a0a0a, #333);\n align-self: center;\n}\n\n.c-campaign__video {\n z-index: 1;\n align-self: center;\n}\n\n.c-campaign__image {\n z-index: 0;\n}\n\n.c-campaign__image img {\n width: 100%;\n}\n\n.c-campaign.mp .u-link, .c-campaign.mp .c-off-canvas__close, .c-campaign.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign.mp a {\n color: #47bcd3;\n}\n\n.c-campaign--petrol .c-campaign__content {\n color: #333;\n background: linear-gradient(225deg, #bfd3d6, #ebf1f2);\n}\n\n.c-campaign--petrol.mp .u-link, .c-campaign--petrol.mp .c-off-canvas__close, .c-campaign--petrol.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--petrol.mp a {\n color: #005461;\n}\n\n.c-campaign--blue .c-campaign__content {\n color: #333;\n background: linear-gradient(225deg, #c2e9f0, #ebf8fa);\n}\n\n.c-campaign--blue.mp .u-link, .c-campaign--blue.mp .c-off-canvas__close, .c-campaign--blue.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--blue.mp a {\n color: #00758c;\n}\n\n.c-campaign--orange .c-campaign__content {\n color: #1c1c1c;\n background: linear-gradient(225deg, #fceac5, #fef8ec);\n}\n\n.c-campaign--orange.mp .u-link, .c-campaign--orange.mp .c-off-canvas__close, .c-campaign--orange.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--orange.mp a {\n color: #ae7809;\n}\n\n@media (min-width: 35em) {\n .c-campaign {\n display: flex;\n }\n\n .c-campaign--switch .c-campaign__content {\n order: -1;\n }\n\n .c-campaign__video, .c-campaign__image {\n width: 50%;\n position: relative;\n }\n\n .c-campaign__video + .c-campaign__content, .c-campaign__image + .c-campaign__content {\n width: 50%;\n }\n\n .c-campaign__image img {\n height: 100%;\n width: 100%;\n z-index: 1;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n\n.c-card {\n background: #fff;\n flex-direction: column;\n align-items: stretch;\n display: flex;\n position: relative;\n}\n\n.c-card--alt, .c-card--event {\n background: #ebf1f2;\n}\n\n.c-card--alt__specs, .c-card--event__specs {\n color: #959595;\n}\n\n.c-card--featured {\n color: #bfd3d6;\n background: #005461;\n}\n\n.c-card--featured .c-card__meta, .c-card--featured .mp {\n color: inherit;\n}\n\n.c-card--featured .c-button, .c-card--featured .c-card__title {\n color: #fff;\n}\n\n.c-card--featured .c-card__day {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n color: #fff;\n font-weight: 700;\n}\n\n.c-card--featured .c-card__month {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n color: #bfd3d6;\n font-weight: 700;\n}\n\n.c-card--featured .c-card__wrapper, .c-card--featured .c-card__primary {\n flex-grow: 1;\n}\n\n.c-card--featured .c-button {\n width: 100%;\n margin: 0;\n}\n\n.c-card--featured .c-card__footer {\n padding-top: 18px;\n padding-top: var(--space-s);\n margin-top: auto;\n}\n\n.c-card__wrapper, .c-card__primary {\n flex-direction: column;\n display: flex;\n}\n\n.c-card--layout-multi .c-card__wrapper, .c-card__primary {\n width: 100%;\n flex-shrink: 0;\n}\n\n.c-card--layout-multi .c-card__wrapper {\n gap: 18px;\n gap: var(--space-s-l);\n}\n\n.c-card--layout-multi.c-card--featured.c-card--size-large.c-card--has-image .c-card__wrapper {\n padding: 0;\n}\n\n.c-card--layout-multi.c-card--featured.c-card--size-large.c-card--has-image .c-card__primary {\n padding: 18px;\n padding: var(--space-s-m);\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi .c-card__wrapper {\n flex-direction: row;\n }\n\n .c-card--layout-multi .c-card__image, .c-card--layout-multi .c-card__primary:nth-child(2) {\n width: calc(50% - 18px);\n }\n\n .c-card--layout-multi.c-card--small .c-card__image, .c-card--layout-multi.c-card--size-medium .c-card__image {\n max-width: 152px;\n width: 30%;\n }\n\n .c-card--layout-multi.c-card--small .c-card__primary:nth-child(2), .c-card--layout-multi.c-card--size-medium .c-card__primary:nth-child(2) {\n flex-grow: 1;\n }\n\n .c-card--layout-multi.c-card--size-large.c-card--featured img {\n height: 100%;\n object-fit: cover;\n }\n}\n\n@media only screen and (min-width: 55em) and (min-width: 55em) {\n .c-card--layout-multi.c-card--size-large.c-card--featured:not(.c-card--switch):not(.c-card--event.c-card--has-image) .c-card__primary {\n padding-left: 0 !important;\n }\n\n .c-card--layout-multi.c-card--size-large.c-card--featured.c-card--switch .c-card__primary, .c-card--layout-multi.c-card--size-large.c-card--featured.c-card--event.c-card--has-image .c-card__primary {\n padding-right: 0 !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi .c-card__shop-footer > :first-child {\n width: 30%;\n max-width: 152px;\n margin-right: 36px;\n margin-right: var(--space-l);\n display: block;\n }\n}\n\n.c-card--layout-multi-30-70 .c-card__image {\n width: calc(30% - 18px) !important;\n width: calc(30% - var(--space-s-m) ) !important;\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi-30-70 .c-card__primary:nth-child(2) {\n width: calc(70% - 18px) !important;\n width: calc(70% - var(--space-s-m) ) !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi-40-60 .c-card__image {\n width: calc(60% - 18px) !important;\n width: calc(60% - var(--space-s-m) ) !important;\n }\n\n .c-card--layout-multi-40-60 .c-card__primary {\n width: calc(40% - 18px) !important;\n width: calc(40% - var(--space-s-m) ) !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--switch .c-card__wrapper, .c-card--event.c-card--has-image .c-card__wrapper {\n flex-direction: row-reverse;\n }\n}\n\n.c-card__primary > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-card--layout-single .c-card__primary, .c-card--layout-multi .c-card__wrapper {\n padding: 18px;\n padding: var(--space-s-m);\n width: 100%;\n justify-content: space-between;\n}\n\n.c-card--layout-single.c-card--has-tag:not(.c-card--has-image) .c-card__primary {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\n.c-card__datetime {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-weight: 700;\n font-size: var(--step-1);\n color: #3d7b87;\n display: block;\n}\n\n.c-card__content {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-card__title {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\n.c-card img {\n width: 100%;\n}\n\n.c-card--size-small .c-card__title, .c-card--size-medium .c-card__title {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-card--size-medium .c-twi {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-card--bordered {\n border: 1px solid #bfd3d6;\n}\n\n.c-card--float-right {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n .c-card--float-right {\n margin-left: 13.5px;\n margin-left: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\n.c-card__tag {\n padding: 4.5px 9px;\n padding: var(--space-3xs) var(--space-2xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #005461;\n background: #c2e9f0;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-card__tag + .c-card__wrapper > .c-card__primary {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-card__tag + .c-card__wrapper > .c-card__image + .c-card__primary {\n margin-top: 0;\n}\n\n.c-card--no-height-match {\n align-self: flex-start;\n}\n\n.c-card__specs > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-card__specs dt {\n font-weight: 700;\n}\n\n.c-card__specs dt, .c-card__specs dd {\n margin: 0;\n padding: 0;\n display: block;\n}\n\n.c-card__specs dl > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card--inline-specs .c-card__specs dt, .c-card--inline-specs .c-card__specs dd {\n display: inline;\n}\n\n.c-card--inline-specs .c-card__specs dd:not(:last-child):after {\n content: \", \";\n}\n\n.c-card--2-column-specs .c-card__specs dl {\n gap: 4.5px 9px;\n gap: var(--space-3xs) var(--space-2xs);\n grid-template-columns: repeat(2, minmax(min-content, max-content));\n display: grid;\n}\n\n.c-card--2-column-specs .c-card__specs dt, .c-card--2-column-specs .c-card__specs dd {\n margin: 0;\n}\n\n.c-card--2-column-specs .c-card__specs dt {\n grid-column: 1;\n}\n\n.c-card--2-column-specs .c-card__specs dd {\n grid-column: 2;\n}\n\n.c-card .o-prose li + li {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card__meta {\n color: #3d7b87;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n flex-wrap: wrap;\n align-items: center;\n display: flex;\n}\n\n.c-card__meta > :not(:last-child) {\n padding-right: 1.5em;\n position: relative;\n}\n\n.c-card__meta > :not(:last-child):after {\n content: \"\";\n height: 18px;\n width: 1px;\n background: #3d7b87;\n position: absolute;\n top: 50%;\n right: 9px;\n transform: translateY(-50%);\n}\n\n.c-card__meta .mp {\n font-size: inherit;\n}\n\n.c-card__meta .c-icon {\n font-size: .875em;\n}\n\n.c-card__meta + .c-card__title {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-card__corner {\n color: #fff;\n border-width: 36px;\n border-width: var(--space-l);\n width: 0;\n height: 0;\n text-align: right;\n z-index: 1;\n border-style: solid;\n border-color: #13aa13 #13aa13 #0000 #0000;\n font-size: 1.5rem;\n transition: color .3s;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-card__corner .c-icon {\n position: relative;\n top: -27px;\n}\n\n.c-card:hover .c-card__corner {\n color: #ffffffbf;\n}\n\n.c-card__series {\n padding: 18px 27px;\n padding: var(--space-s) var(--space-m);\n z-index: 2;\n border-top: 1px solid #bfd3d6;\n position: relative;\n}\n\n.c-card__shop-footer {\n padding: 18px;\n padding: var(--space-s) var(--space-s-m);\n background-color: #ebf1f2;\n display: flex;\n}\n\n.c-card__shop-footer-space > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card__shop-footer-space > * {\n display: block;\n}\n\n.c-card__shop-footer-form {\n align-items: flex-end;\n}\n\n.c-card__shop-footer input {\n width: 72px;\n}\n\n.c-card__small {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #3d7b87;\n}\n\n.c-card__flex {\n gap: 18px;\n gap: var(--space-s-l);\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-card--event.c-card--has-image.c-card--has-tag .c-card__tag {\n z-index: 1;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper {\n padding: 0;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__primary {\n padding: 18px;\n padding: var(--space-s-m);\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__image {\n width: 100%;\n position: relative;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__image img {\n max-height: 200px;\n height: 100%;\n object-fit: cover;\n aspect-ratio: 16 / 9;\n}\n\n@media (min-width: 55em) {\n .c-card--event.c-card--has-image .c-card__primary {\n width: calc(70% - 18px);\n width: calc(70% - var(--space-s-m) );\n }\n\n .c-card--event.c-card--has-image .c-card__image {\n width: calc(30% - 18px);\n width: calc(30% - var(--space-s-m) );\n }\n\n .c-card--event.c-card--has-image .c-card__image img {\n max-height: none !important;\n }\n}\n\n.c-card--event-series {\n box-shadow: 0 12px 24px #0003;\n}\n\n.c-card--event-series .c-card__image img {\n max-height: 252px;\n aspect-ratio: 2 / 1;\n object-fit: cover;\n}\n\n.c-card--event-series .c-card__wrapper, .c-card--event-series .c-card__primary {\n height: 100%;\n}\n\n.c-card--event-series .c-card__primary {\n flex-shrink: 1;\n}\n\n.c-card--event-series .c-card__header > * + * {\n margin: 18px 0 0;\n margin: var(--space-s) 0 0 0;\n}\n\n.c-card--event-series .c-card__datetime {\n font-size: var(--step--1);\n font-weight: normal;\n}\n\n.c-card--event-series .c-card__title {\n font-size: var(--step-0);\n}\n\n.c-card--event-series .c-card__footer .u-link, .c-card--event-series .c-card__footer .c-off-canvas__close, .c-card--event-series .c-card__footer .c-internal-nav__list li a, .c-internal-nav__list li .c-card--event-series .c-card__footer a, .c-card--event-series .c-card__footer .u-link svg, .c-card--event-series .c-card__footer .c-off-canvas__close svg, .c-card--event-series .c-card__footer .c-internal-nav__list li a svg, .c-internal-nav__list li .c-card--event-series .c-card__footer a svg {\n color: #4796c5;\n font-size: var(--step--1);\n}\n\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper {\n gap: 18px;\n gap: var(--space-s);\n flex-direction: column;\n}\n\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper .c-card__primary, .grid-view > .c-card--event.c-card--has-image .c-card__wrapper .c-card__image {\n width: 100%;\n}\n\n_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper {\n display: block;\n}\n\n.c-industry-card {\n color: #006daf;\n}\n\n.c-industry-card__link {\n display: block;\n}\n\n.c-industry-card:hover .c-h--reset {\n text-decoration: underline;\n}\n\n.c-industry-card img {\n width: 100%;\n}\n\n.c-product-comparison-card {\n background: #fff;\n border: 1px solid #bfd3d6;\n flex-flow: column;\n flex-grow: 1;\n display: flex;\n}\n\n.c-product-comparison-card > * + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-product-comparison-card__body {\n padding: 18px;\n padding: var(--space-s-m);\n flex-flow: column;\n flex-grow: 1;\n display: flex;\n}\n\n.c-product-comparison-card__body > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-product-comparison-card__features-list {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n list-style: none;\n}\n\n.c-product-comparison-card__features-list-heading {\n margin-top: 18px;\n margin-top: var(--space-s);\n font-weight: 700;\n}\n\n.c-product-comparison-card__features-list > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-product-comparison-card__feature--tick svg {\n color: #13aa13;\n}\n\n.c-product-comparison-card__feature--cross {\n color: #cecece;\n}\n\n.c-product-comparison-card__footer {\n padding-top: 18px;\n padding-top: var(--space-s);\n gap: var(--space-2xs);\n flex-flow: wrap;\n margin-top: auto;\n display: flex;\n}\n\n.c-product-comparison-card__footer > * {\n flex-grow: 1;\n}\n\n.c-product-comparison-card__image {\n height: 10em;\n aspect-ratio: 16 / 9;\n order: -1;\n}\n\n.c-product-comparison-card__image img {\n height: 100%;\n width: 100%;\n object-fit: contain;\n}\n\n.c-comparison-table__desktop {\n width: 100%;\n overflow: auto;\n}\n\n.c-comparison-table__desktop .c-comparison-table {\n width: calc(100% - 1px);\n}\n\n@media (min-width: 60em) {\n .c-comparison-table__desktop .c-comparison-table tbody > tr > :first-child {\n min-width: 300px;\n }\n}\n\n.c-comparison-table__mobile {\n display: none;\n}\n\n.c-comparison-table__mobile > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\n.c-comparison-table__mobile .c-comparison-table {\n width: 100%;\n table-layout: fixed;\n}\n\n.c-comparison-table__mobile .c-comparison-table__product img {\n margin: 0;\n}\n\n.c-comparison-table {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n border-collapse: collapse;\n}\n\n.c-comparison-table thead th {\n padding: 0 9px;\n padding: 0 var(--space-2xs);\n text-align: center;\n vertical-align: top;\n border: none;\n}\n\n.c-comparison-table__product img {\n max-height: 108px;\n max-height: var(--space-3xl);\n object-fit: contain;\n mix-blend-mode: multiply;\n margin: 0 auto;\n}\n\n.c-comparison-table__product p {\n font-weight: 400;\n}\n\n.c-comparison-table__buttons {\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n flex-direction: column;\n margin: 0 auto;\n display: inline-flex;\n margin-top: 1.25rem !important;\n}\n\n.c-comparison-table__buttons * + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-comparison-table__title th {\n padding-top: 13.5px;\n padding-top: var(--space-xs);\n text-align: left;\n}\n\n.c-comparison-table__title th span {\n padding: 9px;\n padding: var(--space-2xs);\n color: #fff;\n max-width: 20em;\n width: 100%;\n text-align: center;\n background-color: #333;\n font-weight: 600;\n display: inline-block;\n position: relative;\n}\n\n.c-comparison-table__title th span:after {\n border-width: 13.5px 0 0 13.5px;\n border-width: var(--space-xs) 0 0 var(--space-xs);\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-color: #efefef #0000 #0000;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-comparison-table tbody tr:first-child th {\n vertical-align: bottom;\n padding: 0;\n}\n\n.c-comparison-table tbody tr:not(.c-comparison-table__title) {\n height: 48px;\n}\n\n.c-comparison-table tbody tr td:first-child {\n text-align: left;\n font-weight: 600;\n}\n\n.c-comparison-table tbody tr td {\n padding: 9px;\n padding: var(--space-2xs);\n text-align: center;\n vertical-align: middle;\n background-color: #fff;\n border: 2px solid #efefef;\n border-left: none;\n border-right: none;\n}\n\n.c-comparison-table tbody tr td .c-icon {\n font-size: 1.5rem;\n}\n\n.c-comparison-table tbody tr td .c-icon--tick {\n color: #13aa13;\n}\n\n.c-comparison-table tbody tr td .c-icon--cross {\n color: #cecece;\n}\n\n@media (max-width: 40em) {\n .c-comparison-table__mobile {\n display: block;\n }\n\n .c-comparison-table__desktop {\n display: none;\n }\n}\n\n@media only screen and (min-width: 640px) {\n .c-comparison-table thead th:nth-last-child(1):nth-child(2), .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {\n width: 85%;\n }\n\n .c-comparison-table thead th:nth-last-child(2):nth-child(2), .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {\n width: 42.5%;\n }\n\n .c-comparison-table thead th:nth-last-child(3):nth-child(2), .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {\n width: 28.3333%;\n }\n\n .c-comparison-table thead th:nth-last-child(4):nth-child(2), .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {\n width: 21.25%;\n }\n\n .c-comparison-table thead th:nth-last-child(5):nth-child(2), .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {\n width: 17%;\n }\n\n .c-comparison-table thead th:nth-last-child(6):nth-child(2), .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {\n width: 14.1667%;\n }\n}\n\n.c-embed {\n position: relative;\n}\n\n.c-embed__wrapper {\n height: 0;\n padding-bottom: 56.625%;\n position: relative;\n}\n\n.c-embed__wrapper > * {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.c-featured-article-card {\n background: #ebf1f2;\n position: relative;\n}\n\n.c-featured-article-card__content {\n padding: 18px;\n padding: var(--space-s-l);\n}\n\n.c-featured-article-card .c-post-meta {\n margin: 18px 0;\n margin: var(--space-s) 0;\n}\n\n@media (min-width: 45em) {\n .c-featured-article-card {\n display: flex;\n }\n\n .c-featured-article-card__content {\n flex-basis: 50%;\n }\n\n .c-featured-article-card__image {\n flex-basis: 50%;\n position: relative;\n }\n\n .c-featured-article-card__image img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n\n.c-features {\n max-width: 78.75rem;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-features__wrapper {\n width: 100%;\n overflow: auto;\n}\n\n.c-features__wrapper .c-table, .c-features__wrapper .o-prose table, .o-prose .c-features__wrapper table {\n width: 100%;\n table-layout: fixed;\n}\n\n@media (min-width: 60em) {\n .c-features__wrapper .c-table, .c-features__wrapper .o-prose table, .o-prose .c-features__wrapper table {\n min-width: 78.75rem;\n }\n}\n\n.c-features__title {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-features__product {\n padding-bottom: 0 !important;\n}\n\n.c-features__introduction td {\n color: #13aa13;\n padding-top: 9px;\n padding-top: var(--space-2xs);\n font-weight: 700;\n}\n\n.c-features__label-text td > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-features__label-text td span {\n display: block;\n}\n\n.c-features__checklist-title th {\n color: #333 !important;\n background: none !important;\n padding-bottom: 0 !important;\n}\n\n.c-features__checklist td {\n vertical-align: middle;\n line-height: 20px;\n padding-top: var(--space-3xs) !important;\n padding-bottom: 0 !important;\n}\n\n.c-features__checklist td svg {\n height: 16px;\n width: 16px;\n vertical-align: middle;\n margin-bottom: 2px;\n display: inline-block;\n}\n\n.c-features__checklist--last td {\n padding-bottom: var(--space-s) !important;\n}\n\n.c-features__mobile {\n display: none;\n}\n\n.c-features__mobile > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\n.c-features__mobile .c-table, .c-features__mobile .o-prose table, .o-prose .c-features__mobile table {\n table-layout: fixed;\n}\n\n@media (max-width: 40em) {\n .c-features__mobile {\n display: block;\n }\n\n .c-features__wrapper {\n display: none;\n }\n}\n\n.c-features thead img {\n max-height: 108px;\n max-height: var(--space-3xl);\n object-fit: contain;\n}\n\n.c-filter-search {\n padding: 27px;\n padding: var(--space-m-l);\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n gap: var(--space-s);\n background: #c2e9f0;\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-filter-search > * {\n flex-grow: 1;\n}\n\n.c-filter-search__fields {\n max-width: 792px;\n background-color: #fff;\n flex-grow: 8;\n display: flex;\n}\n\n.c-filter-search__fields fieldset {\n border: none;\n font-size: 0;\n}\n\n.c-filter-search__fields .c-icon {\n font-size: 1.375rem;\n}\n\n@media only screen and (min-width: 30em) {\n .c-filter-search__fields {\n min-width: 360px;\n }\n}\n\n.c-footer {\n color: #fff;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #003039;\n margin-top: auto;\n}\n\n.c-footer a:hover {\n color: #47bcd3;\n}\n\n.c-footer__primary {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n padding-top: 18px;\n padding-top: var(--space-s-l);\n}\n\n.c-footer.mp .c-footer__h-links, .c-footer.mp .c-footer__sections, .c-footer.mp .c-footer__sections ul, .c-footer.mp .c-footer__sections h4 {\n line-height: 1.6;\n}\n\n.c-footer__sections {\n margin-bottom: 0;\n}\n\n.c-footer__sections > li {\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n}\n\n.c-footer__sections ul li {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-footer__subtitle {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n position: relative;\n}\n\n.c-footer__subtitle:after {\n content: \"\";\n width: 15px;\n height: 1px;\n background: #3d7b87;\n position: absolute;\n bottom: 4px;\n left: 0;\n}\n\n.c-footer__identity {\n flex-wrap: wrap;\n align-items: center;\n display: flex;\n}\n\n.c-footer__logo {\n max-width: 216px;\n width: 60%;\n display: block;\n}\n\n.c-footer__logo img {\n margin-right: 18px;\n margin-right: var(--gutter);\n filter: saturate(0) brightness(10);\n}\n\n.c-footer__social {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n display: flex;\n}\n\n.c-footer__social li + li {\n margin-left: 18px;\n margin-left: var(--space-s-m);\n}\n\n.c-footer__social .c-icon {\n font-size: 1.5rem;\n}\n\n.c-footer__secondary {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n background: #002126;\n}\n\n.c-footer__secondary span a {\n color: #47bcd3;\n text-decoration: underline;\n}\n\n.c-footer .o-prose li a {\n color: #47bcd3;\n}\n\n.c-footer__h-links {\n margin-bottom: .5rem;\n}\n\n@media (min-width: 43em) {\n .c-footer__secondary .u-wrap, .c-footer__secondary .c-internal-nav__wrap {\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n display: flex;\n }\n\n .c-footer__h-links {\n margin: .5rem 18px .5rem 0;\n margin: .5rem var(--space-s-m) .5rem 0;\n display: flex;\n }\n\n .c-footer__h-links li + li {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n}\n\n@media (min-width: 1410px) {\n .c-footer__secondary {\n clip-path: polygon(0% 100%, 68px 0%, 100% 0%, 100% 100%, 68px 100%);\n }\n}\n\n.rich-text-region:has( + .c-footer) {\n margin-bottom: 36px;\n margin-bottom: var(--space-l-xl);\n}\n\n.c-gallery {\n max-height: 95vh;\n}\n\n.c-gallery img {\n cursor: pointer;\n}\n\n.c-gallery__main {\n position: relative;\n}\n\n.c-gallery__main > * {\n width: 100%;\n}\n\n.c-gallery__main > * img {\n aspect-ratio: 16 / 9;\n max-height: calc(95vh - 90px);\n object-fit: contain;\n margin: 0 auto;\n display: block;\n}\n\n.c-gallery__main > :not(.active) {\n display: none;\n}\n\n.c-gallery__thumbnails {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n flex-flow: wrap;\n gap: max(8px, 2%);\n display: flex;\n}\n\n.c-gallery__thumbnails > * {\n max-width: 10.75%;\n max-width: max(var(--space-xl), 10.75%);\n aspect-ratio: 16 / 9;\n background: #efefef;\n}\n\n.c-gallery__thumbnails > * img {\n height: 100%;\n opacity: .8;\n object-fit: cover;\n width: 100%;\n}\n\n.c-gallery__thumbnails > .active img {\n opacity: .25;\n}\n\n.c-header {\n background-color: #fff;\n}\n\n.c-header__wrap {\n padding-top: 18px;\n padding-top: var(--gutter);\n position: relative;\n}\n\n.c-header__logo {\n z-index: 50;\n max-width: 216px;\n width: 60%;\n display: block;\n position: relative;\n}\n\n.c-header__logo img {\n width: 100%;\n}\n\n.c-header__search {\n position: relative;\n}\n\n.c-header__search button:hover, .c-header__search button:focus {\n background-color: #bfd3d6;\n}\n\n@media (min-width: 500px) {\n .c-header__corporate ul {\n justify-content: center;\n }\n}\n\n@media (max-width: 767px) {\n .c-header__wrap {\n padding-bottom: 18px;\n padding-bottom: var(--gutter);\n }\n\n .c-header__primary {\n color: #fff;\n padding: 18px;\n padding: var(--space-s-m);\n z-index: 100;\n height: 100%;\n width: 100%;\n padding-top: 80px;\n padding-top: calc(60px + var(--space-s-m) );\n opacity: 0;\n visibility: hidden;\n background: #005461;\n flex-direction: column;\n align-items: stretch;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n }\n\n .c-header__primary:target {\n opacity: 1;\n visibility: visible;\n transition: opacity .3s, visibility .3s;\n }\n\n .c-header__primary .c-navicon i {\n background: #fff;\n }\n\n .c-header__corporate {\n margin: 18px 0;\n margin: var(--space-s) 0;\n letter-spacing: -.01em;\n font-size: 12.5px;\n font-size: var(--step--2);\n order: 1;\n font-weight: 600;\n }\n\n .c-header__corporate ul {\n flex-wrap: wrap;\n align-items: center;\n margin-left: -6px;\n margin-right: -6px;\n display: flex;\n }\n\n .c-header__corporate li {\n margin: 13.5px 4.5px;\n margin: var(--space-xs-s) var(--space-3xs-m);\n }\n\n .c-header__corporate .c-input--select {\n width: auto;\n color: inherit;\n padding: 0 27px 4.5px 0;\n padding: 0 var(--space-m) var(--space-3xs) 0;\n font-size: inherit;\n background-color: #0000;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%23ffffff\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n background-position: right .4em center;\n border: none;\n border-bottom: 1px solid #3d7b87;\n margin-bottom: -4.5px;\n display: inline-block;\n }\n\n .c-header__corporate .c-input--select option {\n color: #333;\n }\n\n .c-header__search {\n color: #333;\n order: 2;\n }\n\n .c-header__site {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n flex: 1;\n order: -1;\n }\n\n .c-header__site li + li {\n margin-top: 18px;\n margin-top: var(--space-s);\n }\n}\n\n@media (min-width: 768px) {\n .c-header {\n overflow: hidden;\n }\n\n .c-header .c-navicon {\n display: none;\n }\n\n .c-header__primary {\n flex-direction: column;\n align-items: flex-end;\n margin-top: -71px;\n display: flex;\n }\n\n .c-header__search {\n margin-bottom: 8px;\n margin-bottom: calc(var(--gutter) - 10px);\n width: 288px;\n }\n\n .c-header__corporate {\n color: #005461;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n margin-bottom: 8px;\n margin-bottom: calc(var(--space-xs) + 3px);\n }\n\n .c-header__corporate a:hover {\n text-decoration: underline;\n }\n\n .c-header__corporate ul {\n display: flex;\n }\n\n .c-header__corporate li + li {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .c-header__corporate .c-input--select {\n width: auto;\n color: inherit;\n padding: 0 36px 0 0;\n padding: 0 var(--space-l) 0 0;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background-color: #0000;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%2300768d\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n border: none;\n display: inline-block;\n }\n\n .c-header__site {\n color: #fff;\n z-index: 1;\n padding: 14px 0;\n padding: calc(var(--space-xs) + 2px) 0;\n letter-spacing: -.01em;\n font-size: 15px;\n font-weight: 600;\n font-size: var(--step--1);\n width: 100%;\n align-self: flex-start;\n position: relative;\n }\n\n .c-header__site:after {\n content: \"\";\n width: 100vw;\n height: 100%;\n z-index: -2;\n background: linear-gradient(270deg, #13aa13 -12%, #00a2c2 11%, #005461 43% 70%, #003039 100%);\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n}\n\n@media screen and (min-width: 768px) and (-ms-high-contrast: active), (min-width: 768px) and (-ms-high-contrast: none) {\n .c-header__site:after {\n background: linear-gradient(270deg, #13aa13 -12%, #00a2c2 11%, #005461 43%, #003039 100%);\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site ul {\n display: flex;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site li + li {\n margin-left: 18px;\n margin-left: var(--space-s-m);\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site--with-home > ul > li:first-child {\n padding-right: 18px;\n padding-right: var(--space-s);\n border-right: 1px solid #ffffff40;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site a {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n display: block;\n }\n\n .c-header__site a:hover, .c-header__site a:focus {\n opacity: .75;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site li + .c-header__push {\n margin-left: auto;\n }\n}\n\n@media (min-width: 1500px) {\n .c-header__site:after {\n clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);\n }\n}\n\n.c-navicon {\n right: 18px;\n right: var(--space-s-m);\n top: 18px;\n top: var(--space-s-m);\n height: 60px;\n width: 60px;\n position: absolute;\n transform: translateX(25%);\n}\n\n.c-navicon i {\n height: 2px;\n width: 22px;\n background: #00758c;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n.c-navicon i:nth-child(1) {\n transform: translate3d(-50%, -50%, 0)translateY(-7px);\n}\n\n.c-navicon i:nth-child(3) {\n transform: translate3d(-50%, -50%, 0)translateY(7px);\n}\n\n:root {\n --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );\n --gutter-width: calc( (100vw - var(--body-width) ) / 2 );\n --text-width: min(100vw, 51.75rem);\n --hero-gap: calc( var(--body-width) - var(--text-width) );\n --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) * .8 );\n}\n\n.c-hero {\n color: #005461;\n isolation: isolate;\n background: linear-gradient(to top right, #ebf1f2, #c2e9f0);\n position: relative;\n overflow: hidden;\n}\n\n.c-hero.mp .u-link, .c-hero.mp .c-off-canvas__close, .c-hero.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-hero.mp a {\n color: #006daf;\n}\n\n.c-hero .u-wrap, .c-hero .c-internal-nav__wrap {\n padding-top: 27px;\n padding-top: var(--space-m-xl);\n padding-bottom: 54px;\n padding-bottom: var(--space-xl-3xl);\n z-index: 2;\n position: relative;\n}\n\n.c-hero .u-wrap:before, .c-hero .c-internal-nav__wrap:before {\n content: \"\";\n height: 18px;\n height: var(--gutter);\n width: 100vw;\n bottom: 0;\n right: 18px;\n right: var(--gutter);\n z-index: 2;\n background: #fff;\n position: absolute;\n box-shadow: 1px 1px #fff;\n}\n\n.c-hero .u-wrap:after, .c-hero .c-internal-nav__wrap:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 18px 0 0 18px;\n border-width: var(--gutter) 0 0 var(--gutter);\n border-color: #0000 #0000 #0000 #fff;\n position: absolute;\n bottom: 0;\n right: 0;\n box-shadow: -1px 0 #fff;\n}\n\n.c-hero__content {\n z-index: 5;\n max-width: 828px;\n position: relative;\n}\n\n.c-hero__content > * + * {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\n.c-hero__content .c-h, .c-hero__content .o-prose h2, .o-prose .c-hero__content h2, .c-hero__content .o-prose h3, .o-prose .c-hero__content h3, .c-hero__content .o-prose h4, .o-prose .c-hero__content h4, .c-hero__content .c-product-comparison-card__heading {\n color: inherit;\n margin: inherit;\n}\n\n.c-hero__content p {\n line-height: 1.6;\n}\n\n.c-hero__content .c-hero__button-wrap {\n gap: var(--space-s);\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-hero__content .c-hero__button-wrap > .c-button {\n margin: 0 !important;\n}\n\n.c-hero--image {\n color: #fff;\n background: #1c1c1c;\n}\n\n.c-hero--image.mp .u-link, .c-hero--image.mp .c-off-canvas__close, .c-hero--image.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--image.mp a {\n color: #4796c5;\n}\n\n.c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: radial-gradient(farthest-side at 100% 100%, #3339, #1c1c1ce6);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 55em) {\n .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n left: 33.33%;\n }\n\n .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n background: radial-gradient(circle farthest-side at 100% 0, #1c1c1c4d, #1c1c1c);\n }\n}\n\n@media (min-width: 70em) {\n .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n background: linear-gradient(270deg, #1c1c1c00 var(--gutter-width), #1c1c1c9e var(--stop), #1c1c1c);\n }\n}\n\n.c-hero--homepage, .c-hero--homepage-light {\n background: linear-gradient(79.62deg, #003039 0%, #005461 100%);\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage, .c-hero--homepage-light {\n background: linear-gradient(84.46deg, #003039 7.52%, #005461 44.84%, #235057cc 51.02%, #3452579e 54.99%, #4e565738 59.54%, #57575700 65.59%);\n }\n}\n\n.c-hero--homepage:after, .c-hero--homepage-light:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: #00000054;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage:after, .c-hero--homepage-light:after {\n background: radial-gradient(circle farthest-side at 100% 0, #2e323300 0% 15.16%, #2e323333 27.66%, #2936388c 39.61%, #234247cc 49.78%, #005461 59.87%, #003039 100%);\n }\n}\n\n.c-hero--homepage .u-wrap, .c-hero--homepage .c-internal-nav__wrap, .c-hero--homepage-light .u-wrap, .c-hero--homepage-light .c-internal-nav__wrap {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-3xl);\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage .c-hero__content, .c-hero--homepage-light .c-hero__content {\n width: calc(41.666% - 2 * var(--gutter) / 5 - .1px);\n }\n}\n\n.c-hero--homepage .c-hero__content .c-h, .c-hero--homepage-light .c-hero__content .c-h, .c-hero--homepage .c-hero__content .o-prose h2, .c-hero--homepage-light .c-hero__content .o-prose h2, .o-prose .c-hero--homepage .c-hero__content h2, .o-prose .c-hero--homepage-light .c-hero__content h2, .c-hero--homepage .c-hero__content .o-prose h3, .c-hero--homepage-light .c-hero__content .o-prose h3, .o-prose .c-hero--homepage .c-hero__content h3, .o-prose .c-hero--homepage-light .c-hero__content h3, .c-hero--homepage .c-hero__content .o-prose h4, .c-hero--homepage-light .c-hero__content .o-prose h4, .o-prose .c-hero--homepage .c-hero__content h4, .o-prose .c-hero--homepage-light .c-hero__content h4, .c-hero--homepage .c-hero__content .c-product-comparison-card__heading, .c-hero--homepage-light .c-hero__content .c-product-comparison-card__heading {\n color: #fff;\n}\n\n.c-hero--homepage .c-hero__content p, .c-hero--homepage-light .c-hero__content p {\n color: #bfd3d6;\n}\n\n.c-hero--homepage .c-hero__content .u-link, .c-hero--homepage .c-hero__content .c-off-canvas__close, .c-hero--homepage .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage .c-hero__content a, .c-hero--homepage-light .c-hero__content .u-link, .c-hero--homepage-light .c-hero__content .c-off-canvas__close, .c-hero--homepage-light .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage-light .c-hero__content a {\n color: #47bcd3;\n}\n\n.c-hero--homepage .c-hero__image-bg, .c-hero--homepage-light .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n display: none;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage .c-hero__image-bg, .c-hero--homepage-light .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n max-width: 65%;\n z-index: -1;\n background-position: 60% 40%;\n transition: opacity 3s;\n display: block;\n left: 35%;\n }\n\n .c-hero--homepage .c-hero__image-bg:after, .c-hero--homepage-light .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n display: none;\n }\n\n .c-hero--homepage .c-hero__image-bg + [class^=\"c-hero__image-\"], .c-hero--homepage-light .c-hero__image-bg + [class^=\"c-hero__image-\"], .c-hero--homepage .c-hero__image-fg + [class^=\"c-hero__image-\"], .c-hero--homepage-light .c-hero__image-fg + [class^=\"c-hero__image-\"] {\n opacity: 0;\n }\n}\n\n.c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n z-index: 1;\n}\n\n.c-hero--homepage-video {\n position: relative;\n}\n\n.c-hero--homepage-video:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: #00000054;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video:after {\n background: radial-gradient(circle farthest-side at 100% 0, #2e323300 0% 15.16%, #2e323333 27.66%, #2936388c 39.61%, #234247cc 49.78%, #005461 59.87%, #003039 100%);\n }\n}\n\n.c-hero--homepage-video .u-wrap:before, .c-hero--homepage-video .c-internal-nav__wrap:before, .c-hero--homepage-video .u-wrap:after, .c-hero--homepage-video .c-internal-nav__wrap:after {\n display: none;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .u-wrap:before, .c-hero--homepage-video .c-internal-nav__wrap:before, .c-hero--homepage-video .u-wrap:after, .c-hero--homepage-video .c-internal-nav__wrap:after {\n display: inline;\n }\n}\n\n.c-hero--homepage-video .c-hero__video-bg {\n width: 100%;\n height: auto;\n background-size: cover;\n margin-bottom: -6px;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .c-hero__video-bg {\n max-width: 60%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 40%;\n right: 0;\n transform: translateY(-50%);\n }\n}\n\n.c-hero--homepage-video .c-hero__video-bg video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap {\n z-index: 2;\n justify-content: center;\n margin: 0 auto;\n display: flex;\n position: absolute;\n bottom: calc(28.125% - 25px);\n left: 0;\n right: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .c-hero__video-button-wrap {\n top: 45%;\n right: 20%;\n bottom: unset;\n left: unset;\n position: absolute;\n }\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap .c-button {\n position: relative;\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap .c-button:before {\n content: \"\";\n height: 100%;\n width: 100%;\n border-radius: inherit;\n background: #0003;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.c-hero--homepage-light {\n background: linear-gradient(79.62deg, #ebf1f2 0%, #c2e9f0 100%), #ebf1f2;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-light {\n background: linear-gradient(86.37deg, #ebf1f2 7.52% 44.84%, #ebf1f2cc 51.02%, #ebf1f299 52.38%, #ebf1f200 65.41%), #ebf1f2;\n }\n}\n\n.c-hero--homepage-light .c-hero__content .c-h, .c-hero--homepage-light .c-hero__content .o-prose h2, .o-prose .c-hero--homepage-light .c-hero__content h2, .c-hero--homepage-light .c-hero__content .o-prose h3, .o-prose .c-hero--homepage-light .c-hero__content h3, .c-hero--homepage-light .c-hero__content .o-prose h4, .o-prose .c-hero--homepage-light .c-hero__content h4, .c-hero--homepage-light .c-hero__content .c-product-comparison-card__heading {\n color: #1c1c1c;\n}\n\n.c-hero--homepage-light .c-hero__content p {\n color: #333;\n}\n\n.c-hero--homepage-light .c-hero__content .u-link, .c-hero--homepage-light .c-hero__content .c-off-canvas__close, .c-hero--homepage-light .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage-light .c-hero__content a {\n color: #00a2c2;\n}\n\n.c-hero__canvas {\n z-index: -1;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero__canvas {\n z-index: 1;\n }\n}\n\n.c-icon {\n width: 1em;\n height: 1em;\n color: inherit;\n font-size: inherit;\n}\n\n.c-input {\n appearance: none;\n font: inherit;\n padding: 13.5px;\n padding: var(--space-xs);\n color: inherit;\n width: 100%;\n background: #fff;\n border: 1px solid #bfd3d6;\n border-radius: 0;\n font-size: 1rem;\n display: block;\n}\n\n.c-input:focus {\n border-color: #005461;\n outline: none;\n}\n\n.c-input::-webkit-calendar-picker-indicator {\n display: none !important;\n}\n\n.c-input--alt {\n background: #ebf1f2;\n border: none;\n}\n\n.c-input--large {\n min-height: 56px;\n}\n\n.c-input--select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%23006DAF\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n background-position: right 1rem center;\n background-repeat: no-repeat;\n background-size: .875em;\n}\n\n.c-input--textarea {\n resize: vertical;\n min-height: 10rem;\n}\n\n.c-input--file {\n cursor: pointer;\n border: none;\n padding: 0;\n}\n\n::-webkit-file-upload-button {\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n display: inline-flex;\n}\n\n.c-input-error {\n --error-state: #ce0058;\n position: relative;\n}\n\n.c-input-error .c-input {\n width: calc(100% - (27px + var(--space-xs) ) );\n}\n\n.c-input-error:after {\n content: \"\";\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n padding: 13.5px;\n padding: var(--space-xs);\n background: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"12\\\" fill=\\\"%23CE0058\\\"/><path stroke=\\\"%23fff\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2\\\" d=\\\"M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334\\\"/></svg>\") center / 100% 100% no-repeat;\n position: absolute;\n top: 2.3em;\n right: 0;\n}\n\n.c-input-error .c-input {\n border-color: #ce0058;\n}\n\n.c-input-error .c-input:focus {\n border-color: #9b0042;\n}\n\n.c-input-message {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: var(--error-state);\n}\n\n.c-input[disabled], .c-input [disabled], .c-input--disabled, .u-disabled > .c-input {\n background-color: #bfd3d6;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" id=\\\"lock\\\" viewBox=\\\"0 0 25 24\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z\\\"/></svg>\");\n background-position: right var(--space-2xs) center;\n background-repeat: no-repeat;\n background-size: 18px;\n background-size: var(--space-s);\n cursor: not-allowed;\n opacity: .6;\n}\n\n.c-input--with-button {\n border: none;\n}\n\n.c-input--with-button + [type] {\n padding: 13.5px;\n padding: var(--space-xs);\n color: #006daf;\n}\n\n.c-input--with-button + [type] svg {\n display: block;\n}\n\n.c-label {\n margin-bottom: 9px;\n margin-bottom: var(--space-2xs);\n font-weight: 700;\n display: block;\n}\n\n.c-fieldset {\n min-width: 0;\n border: none;\n margin: 0;\n padding: .01em 0 0;\n}\n\n.c-fieldset legend {\n letter-spacing: -.03em;\n float: left;\n margin: 13.5px 0 36px;\n margin: var(--space-xs) 0 var(--space-l);\n width: 100%;\n padding: 0;\n font-weight: 700;\n display: table;\n}\n\n.c-fieldset legend + * {\n clear: both;\n}\n\n.c-fieldset + .c-fieldset {\n margin-top: 36px;\n margin-top: var(--space-l-xl);\n padding-top: 36px;\n padding-top: var(--space-l);\n border-top: 1px solid #bfd3d6;\n}\n\n.c-radio + label, .c-radio + input[type=\"hidden\"] + label, .c-checkbox + label, .c-checkbox + input[type=\"hidden\"] + label {\n padding-left: 36px;\n padding-left: var(--space-l);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n box-decoration-break: clone;\n -webkit-box-decoration-break: clone;\n position: relative;\n}\n\n.c-radio + label:before, .c-radio + input[type=\"hidden\"] + label:before, .c-checkbox + label:before, .c-checkbox + input[type=\"hidden\"] + label:before {\n content: \"\";\n height: 1.25rem;\n width: 1.25rem;\n border: 1px solid #bfd3d6;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.c-radio:focus + label:before, .c-radio:focus + input[type=\"hidden\"] + label:before, .c-checkbox:focus + label:before, .c-checkbox:focus + input[type=\"hidden\"] + label:before {\n outline: 2px solid ;\n}\n\n.c-radio[disabled] + label:before, [disabled] .c-radio + label:before, .c-checkbox[disabled] + label:before, [disabled] .c-checkbox + label:before {\n cursor: not-allowed;\n opacity: .6;\n background-color: #bfd3d6;\n}\n\n.c-radio[disabled]:hover + label:before, [disabled] .c-radio:hover + label:before, .c-checkbox[disabled]:hover + label:before, [disabled] .c-checkbox:hover + label:before {\n background-color: #bfd3d6;\n}\n\n.c-radio--box + label, .c-checkbox--box + label {\n padding: 18px;\n padding: var(--space-s);\n height: 100%;\n width: 100%;\n text-align: center;\n word-break: break-word;\n background: #fff;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n font-weight: 700;\n display: flex;\n}\n\n.c-radio--box + label:before, .c-radio--box + label:after, .c-checkbox--box + label:before, .c-checkbox--box + label:after {\n display: none;\n}\n\n.c-radio--box:checked + label, .c-checkbox--box:checked + label {\n color: #fff;\n background: #00a2c2;\n}\n\n.c-radio--box[disabled] + label, .c-checkbox--box[disabled] + label {\n color: #959595;\n cursor: not-allowed;\n background: #efefef;\n border: 1px solid #cecece;\n}\n\n.c-checkbox:checked + label:before, .c-checkbox:checked + input[type=\"hidden\"] + label:before {\n background: #006daf;\n}\n\n.c-checkbox:checked + label:after, .c-checkbox:checked + input[type=\"hidden\"] + label:after {\n content: \"\";\n width: 7px;\n height: 11px;\n border-bottom: 3px solid #fff;\n border-right: 3px solid #fff;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateX(6.5px)translateY(-1.5px)translateY(-50%)rotate(45deg);\n}\n\n.c-radio + label:hover:before, .c-radio + input[type=\"hidden\"] + label:hover:before, .c-checkbox + label:hover:before, .c-checkbox + input[type=\"hidden\"] + label:hover:before {\n background-color: #ebf3f9;\n}\n\n.c-checkbox:checked + label:hover:before, .c-checkbox:checked + input[type=\"hidden\"] + label:hover:before {\n background: #004e7e;\n}\n\n.c-radio + label:before, .c-radio + input[type=\"hidden\"] + label:before {\n border-radius: 100%;\n}\n\n.c-radio:checked + label:before, .c-radio:checked + input[type=\"hidden\"] + label:before {\n box-shadow: inset 0 0 0 5px #006daf;\n}\n\n.c-radio:checked + label:hover:before, .c-radio:checked + input[type=\"hidden\"] + label:hover:before {\n box-shadow: inset 0 0 0 5px #004e7e;\n}\n\n.c-off-canvas .c-checkbox-group > * {\n width: 100%;\n margin-left: 0;\n}\n\n.c-toggle {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n white-space: nowrap;\n display: inline-block;\n position: relative;\n}\n\n.c-toggle__slider {\n margin-right: 9px;\n margin-right: var(--space-2xs);\n margin-left: 9px;\n margin-left: var(--space-2xs);\n height: 1.25rem;\n width: 2.25rem;\n vertical-align: text-bottom;\n border: 1px solid #bfd3d6;\n border-radius: 1.25rem;\n display: inline-block;\n position: relative;\n}\n\n.c-toggle__slider:before {\n content: \"\";\n height: .75rem;\n width: .75rem;\n background-color: #fff;\n border: 1px solid #bfd3d6;\n border-radius: 50%;\n margin: auto 0;\n transition: all .1s;\n position: absolute;\n top: 0;\n bottom: 0;\n left: .25rem;\n}\n\n.c-toggle:hover .c-toggle__slider, .c-toggle:focus-within .c-toggle__slider {\n background-color: #ebf1f2;\n}\n\n.c-toggle:focus-within .c-toggle__slider {\n outline: 2px solid ;\n}\n\n.c-toggle__checkbox:checked + .c-toggle__slider {\n background-color: #006daf;\n}\n\n.c-toggle:hover .c-toggle__checkbox:checked + .c-toggle__slider, .c-toggle:focus-within .c-toggle__checkbox:checked + .c-toggle__slider {\n background-color: #004e7e;\n}\n\n.c-toggle__checkbox:checked + .c-toggle__slider:before {\n transform: translateX(1rem);\n}\n\n.c-toggle input[disabled] + .c-toggle__slider {\n cursor: not-allowed;\n opacity: .6;\n background-color: #bfd3d6;\n}\n\n.c-toggle input[disabled] + .c-toggle__slider:before {\n background-color: #ebf1f2;\n}\n\n.c-toggle input[disabled] ~ .c-toggle__label {\n cursor: not-allowed;\n opacity: .6;\n}\n\n.c-internal-nav {\n background-color: #0000;\n border-bottom: 1px solid #0000;\n transition: all .2s;\n}\n\n.c-internal-nav--stuck {\n z-index: 9999;\n border-bottom-color: #cecece;\n}\n\n.c-internal-nav--stuck .c-internal-nav__title {\n opacity: 1;\n}\n\n.c-internal-nav__wrap {\n gap: var(--space-l);\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.c-internal-nav__title {\n padding: 18px 0;\n padding: var(--space-s) 0;\n opacity: 0;\n flex-shrink: 0;\n font-weight: bold;\n transition: opacity .2s;\n}\n\n.c-internal-nav__list {\n padding: 18px 0;\n padding: var(--space-s) 0;\n color: #006daf;\n white-space: nowrap;\n font-size: var(--step--1);\n align-items: center;\n display: flex;\n overflow-x: auto;\n}\n\n.c-internal-nav__list > * + * {\n margin-left: 36px;\n margin-left: var(--space-l);\n}\n\n@media (max-width: 44em) {\n .c-internal-nav__title, .c-internal-nav .c-button {\n display: none;\n }\n\n .c-internal-nav__list {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n }\n}\n\n.c-hero + .c-internal-nav {\n margin-top: calc(var(--gutter) * -1);\n}\n\n.c-internal-nav.u-sticky {\n top: -1px;\n}\n\n.c-meta-box {\n padding: 18px;\n padding: var(--space-s-m);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #ebf1f2;\n}\n\n.c-meta-box > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-meta-box .u-wrap--fields {\n padding-right: 0;\n}\n\n@media only screen and (min-width: 35em) and (max-width: 54.95em) {\n .c-meta-box {\n column-width: 18em;\n grid-gap: 0 var(--gutter);\n grid-template-rows: auto max-content auto;\n grid-template-columns: 1fr 1fr;\n display: grid;\n }\n\n .c-meta-box h2 {\n grid-column: 1 / 3;\n }\n\n .c-meta-box li {\n break-inside: avoid;\n }\n\n .c-meta-box .u-grey-step-1 {\n grid-row: 2 / 4;\n }\n\n .c-meta-box .c-button {\n align-self: start;\n }\n}\n\n.c-off-canvas {\n width: 100%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n z-index: 9999;\n background-color: #0000;\n transition: opacity .3s, visibility 0s linear .3s;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.c-off-canvas > * + * {\n margin: 0 !important;\n}\n\n.c-off-canvas__backdrop {\n width: 100%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n backdrop-filter: blur(5px);\n background-color: #33333380;\n transition: opacity .3s;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.c-off-canvas__content {\n width: calc(100% - var(--space-m) );\n height: 100%;\n background-color: #fff;\n flex-direction: column;\n transition: right .3s;\n display: flex;\n position: fixed;\n top: 0;\n right: -100%;\n}\n\n.c-off-canvas__header {\n padding: 18px 18px 0;\n padding: var(--space-s) var(--space-s) 0;\n}\n\n.c-off-canvas__header > * {\n margin-bottom: 0 !important;\n}\n\n.c-off-canvas__header + .c-off-canvas__main {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\n.c-off-canvas__main {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n padding: 4.5px 18px;\n padding: var(--space-3xs) var(--space-s);\n overflow-y: scroll;\n}\n\n.c-off-canvas__footer {\n padding: 0 18px 18px;\n padding: 0 var(--space-s) var(--space-s);\n flex-direction: column;\n align-items: stretch;\n margin-top: auto;\n display: flex;\n}\n\n.c-off-canvas__close {\n padding: 18px;\n padding: var(--space-s);\n margin: 0 auto;\n}\n\n.c-off-canvas--active {\n opacity: 1;\n visibility: visible;\n transition: opacity .3s;\n}\n\n.c-off-canvas--active .c-off-canvas__backdrop {\n opacity: 1;\n visibility: visible;\n}\n\n.c-off-canvas--active .c-off-canvas__content {\n right: 0;\n}\n\n@media only screen and (min-width: 40em) {\n .c-off-canvas--mobile {\n display: none !important;\n }\n\n .c-checkbox-group [data-off-canvas=\"header\"], .c-checkbox-group [data-off-canvas=\"footer\"] {\n display: none;\n }\n}\n\n.mp .c-option-list {\n line-height: 1.6;\n}\n\n.c-option-list a {\n color: #006daf;\n}\n\n.c-option-list a:hover {\n text-decoration: underline;\n}\n\n.c-option-list li {\n margin-bottom: 9px;\n margin-bottom: var(--space-2xs);\n break-inside: avoid;\n}\n\n.c-option-list--columns {\n column-gap: 18px;\n column-gap: var(--gutter);\n column-width: 200px;\n}\n\n@media (min-width: 60em) {\n .c-option-list--columns {\n column-width: 260px;\n }\n}\n\n.c-option-list__title a {\n color: #006daf;\n margin-left: 9px;\n margin-left: var(--space-2xs);\n font-weight: 400;\n}\n\n.c-option-list__title a:hover {\n text-decoration: underline;\n}\n\n.c-post-meta {\n color: #959595;\n border-top: 1px solid #bfd3d6;\n border-bottom: 1px solid #bfd3d6;\n padding: 1.25rem 0;\n}\n\n.c-post-meta > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-product-signpost {\n max-width: 440px;\n padding: 9px;\n padding: var(--space-2xs);\n word-break: break-word;\n justify-content: flex-start;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.c-product-signpost:hover .c-h, .c-product-signpost:hover .o-prose h2, .o-prose .c-product-signpost:hover h2, .c-product-signpost:hover .o-prose h3, .o-prose .c-product-signpost:hover h3, .c-product-signpost:hover .o-prose h4, .o-prose .c-product-signpost:hover h4, .c-product-signpost:hover .c-product-comparison-card__heading {\n text-decoration: underline;\n}\n\n.c-product-signpost__image {\n flex-shrink: 0;\n margin-bottom: 0;\n}\n\n.c-product-signpost__content {\n flex-grow: 1;\n}\n\n.c-product-signpost__wrapper {\n gap: 13.5px;\n gap: var(--space-xs-s);\n flex-direction: column;\n display: flex;\n}\n\n.c-product-signpost .o-prose p {\n letter-spacing: -.01em;\n font-size: 15px;\n line-height: 1.2;\n font-size: var(--step--1);\n}\n\n.c-product-signpost--bordered {\n padding: 13.5px;\n padding: var(--space-xs);\n border: 1px solid #bfd3d6;\n}\n\n.c-product-signpost--float-right {\n margin: 0 0 13.5px 13.5px;\n margin: 0 0 var(--space-xs-l) var(--space-xs-l);\n min-width: 9rem;\n width: 30%;\n}\n\n@media (min-width: 55em) {\n .c-product-signpost--float-right, .c-product-signpost__image {\n width: 40%;\n }\n\n .c-product-signpost__wrapper {\n flex-direction: row;\n }\n}\n\n.c-quote, .o-prose blockquote {\n color: #3d7b87;\n padding: 72px 0 36px 54px;\n padding: var(--space-2xl) 0 var(--space-l) var(--space-xl);\n position: relative;\n}\n\n.c-quote:before, .o-prose blockquote:before {\n content: \"“\";\n color: #ebf1f2;\n height: 57px;\n width: 45px;\n z-index: -1;\n margin-left: -.025em;\n font-family: Arial, sans-serif;\n font-size: 10em;\n font-weight: 900;\n line-height: .9;\n position: absolute;\n top: .1em;\n left: 0;\n}\n\n.c-quote p, .o-prose blockquote p {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n line-height: 1.6;\n}\n\n.c-quote p + p, .o-prose blockquote p + p {\n margin-top: 1em;\n}\n\n.c-quote cite, .o-prose blockquote cite {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n margin-top: 18px;\n margin-top: var(--space-s);\n display: block;\n}\n\n.c-quote__image {\n max-height: 3em;\n}\n\n.c-quote--bordered {\n padding: 54px 54px 54px 144px;\n padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-4xl);\n border: 1px solid #bfd3d6;\n}\n\n.c-quote--bordered:before {\n left: 54px;\n left: var(--space-xl);\n top: 36px;\n top: var(--space-l);\n}\n\n.c-scroll-spy {\n top: 18px;\n top: var(--gutter);\n position: sticky;\n overflow: hidden;\n}\n\n.c-scroll-spy a:not(.c-button) {\n color: #006daf;\n transition: transform .3s;\n display: block;\n position: relative;\n}\n\n.c-scroll-spy a:not(.c-button):hover {\n color: #333;\n}\n\n.c-scroll-spy a:not(.c-button):before {\n content: \"▸ \";\n position: absolute;\n top: 0;\n left: -17px;\n}\n\n.c-scroll-spy-active {\n transform: translateX(17px);\n}\n\n.c-scroll-spy-buttons a:before {\n content: \"\" !important;\n}\n\n@media only screen and (min-width: 880px) {\n .c-scroll-spy-buttons {\n margin-right: 54px;\n margin-right: var(--space-xl);\n }\n\n .c-scroll-spy-buttons .c-button {\n width: 100%;\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n}\n\n@media only screen and (max-width: 879px) {\n .c-scroll-spy-buttons .c-button {\n vertical-align: top;\n margin-bottom: .5em;\n margin-right: .5em;\n display: inline-flex;\n }\n}\n\n.c-series {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n gap: 9px 18px;\n gap: var(--space-2xs) var(--space-s);\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n display: flex;\n}\n\n.c-series .mp {\n font-size: inherit;\n}\n\n.c-series li {\n padding-right: 1rem;\n}\n\n@supports (gap: 1rem) {\n .c-series li {\n padding-right: 0;\n }\n}\n\n.c-signpost__link {\n align-items: center;\n display: flex;\n}\n\n.c-signpost__image {\n margin-right: 18px;\n margin-right: var(--space-s-m);\n width: 20%;\n max-width: 72px;\n flex-grow: 1;\n flex-shrink: 0;\n}\n\n.c-signpost__content {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-signpost__content p {\n color: #006daf;\n text-decoration: underline;\n}\n\n.c-signpost:hover .c-signpost__content p {\n text-decoration: none;\n}\n\n.c-slat {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\n.c-slat--grey {\n background-color: #ebf1f2;\n}\n\n.c-slat--white {\n background-color: #fff;\n}\n\n.c-slat--concentric {\n background-image: url(\"../concentric.465e6b4d.svg\");\n background-position: 100% 0;\n background-repeat: no-repeat;\n background-size: auto 50%;\n}\n\n@media (min-width: 40em) {\n .c-slat--concentric {\n background-size: auto 100%;\n }\n}\n\n.c-slat--dots {\n background-image: url(\"../dots-pattern.1bae0e23.svg\");\n background-position: 0 0;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--crystal {\n background-image: url(\"../crystal.8300dbe3.svg\");\n background-position: 100% 100%;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--arc {\n background-image: url(\"../arc.abe174a6.svg\");\n background-position: 100% 100%;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--padded {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-2xl);\n padding-top: 36px;\n padding-top: var(--space-l-2xl);\n}\n\n.c-slat__title {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\n.c-table, .o-prose table {\n text-align: left;\n width: 100%;\n border-collapse: collapse;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: none;\n border: none;\n}\n\n.c-table th, .o-prose table th {\n font-weight: 600;\n}\n\n.c-table td, .o-prose table td, .c-table th, .o-prose table th {\n vertical-align: top;\n color: inherit;\n background: #ebf1f2;\n border: 2px solid #fff;\n border-left: none;\n border-right: none;\n padding: 12px;\n}\n\n.c-table tr[class=\"u-bg\"] td, .o-prose table tr[class=\"u-bg\"] td, .c-table tr[class=\"u-bg\"] th, .o-prose table tr[class=\"u-bg\"] th {\n background-color: inherit;\n}\n\n.c-table th, .o-prose table th {\n color: #fff;\n background: #005461;\n}\n\n.c-table img, .o-prose table img {\n height: auto !important;\n}\n\n.c-table--center td, .c-table--center th {\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .c-table--ellipsis td {\n width: auto;\n }\n\n .c-table--ellipsis td.u-ellipsis {\n width: 100%;\n }\n}\n\n.c-table--wide {\n width: 100%;\n}\n\n.c-table .c-icon--dash, .o-prose table .c-icon--dash {\n color: #bfd3d6;\n}\n\n.c-table .c-icon--tick, .o-prose table .c-icon--tick {\n color: #13aa13;\n}\n\n.c-table__title th, .c-table__title td {\n color: inherit;\n background: #fff;\n}\n\n.c-table a:hover, .o-prose table a:hover {\n text-decoration: none;\n}\n\n.c-table--comparison thead th {\n color: inherit;\n background: none;\n font-weight: 400;\n}\n\n.c-table--comparison tbody td:nth-child(n+2) {\n text-align: center;\n}\n\n.c-table--features thead th, .c-table--features tbody td, .c-table--features tfoot td {\n background: none;\n}\n\n.c-table--features thead th {\n color: inherit;\n font-weight: 400;\n}\n\n@media (min-width: 30em) {\n .c-table .c-icon, .o-prose table .c-icon {\n font-size: 1.5rem;\n }\n}\n\n.c-table--fixed {\n table-layout: fixed;\n}\n\n@media (min-width: 40em) {\n .c-table--fixed th {\n width: 40%;\n }\n}\n\n@media (max-width: 40em) {\n .c-table--responsive tbody, .c-table--responsive tfoot, .c-table--responsive tr, .c-table--responsive td, .c-table--responsive th {\n display: block;\n }\n\n .c-table--responsive thead {\n display: none;\n }\n\n .c-table--responsive tr + tr {\n padding-top: 18px;\n padding-top: var(--space-s);\n margin-top: 18px;\n margin-top: var(--space-s);\n border-top: 2px solid #bfd3d6;\n }\n\n .c-table--responsive tbody [data-responsive-title] {\n grid-gap: 18px;\n grid-gap: var(--space-s);\n grid-template-columns: 1fr 1fr;\n display: grid;\n }\n\n .c-table--responsive tbody [data-responsive-title]:before {\n content: attr(data-responsive-title);\n font-weight: 700;\n }\n}\n\n.no-js .c-tabs__content > * {\n display: none;\n}\n\n.no-js .c-tabs__content > :target {\n display: block;\n}\n\n.c-tabs__content > * {\n display: none;\n}\n\n.c-tabs__content > .c-tab--active {\n display: block;\n}\n\n.no-js .c-tabs--flex .c-tabs__content > * {\n display: none;\n}\n\n.no-js .c-tabs--flex .c-tabs__content > :target {\n display: flex;\n}\n\n.c-tabs--flex .c-tabs__content > * {\n display: none;\n}\n\n.c-tabs--flex .c-tabs__content > .c-tab--active {\n justify-content: stretch;\n display: flex;\n}\n\n.c-tabs__controls {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n overflow-x: auto;\n}\n\n.c-tabs__controls-list {\n width: 100%;\n min-width: min-content;\n border-bottom: 4px solid #ebf3f9;\n display: flex;\n}\n\n.c-tabs__controls-list li {\n display: flex;\n}\n\n.c-tabs__control {\n letter-spacing: -.01em;\n font-size: 15px;\n font-weight: 700;\n font-size: var(--step--1);\n padding: 0 0 18px;\n padding: 0 0 var(--space-s-m);\n margin-right: 27px;\n margin-right: var(--space-m);\n z-index: 1;\n border-bottom: 4px solid #ebf3f9;\n margin-bottom: -4px;\n display: block;\n position: relative;\n}\n\n.mp .c-tabs__control {\n color: #006daf;\n}\n\n@media screen and (max-width: 55em) {\n .c-tabs__control {\n white-space: nowrap;\n }\n}\n\n.c-tabs__controls-list > li:last-child .c-tabs__control {\n margin-right: 0;\n}\n\n.c-tabs__control.c-twi {\n padding-right: 1.875rem;\n display: flex;\n}\n\n.c-tabs__control.c-twi svg {\n position: absolute;\n right: 0;\n}\n\n:checked + .c-tabs__control, .c-tabs__control--active {\n border-bottom-color: #006daf;\n}\n\n:focus + .c-tabs__control {\n outline: 2px solid ;\n}\n\n.c-tabs .c-tab {\n width: 100%;\n}\n\n.c-tabs .c-tab:focus {\n outline: none;\n}\n\n.c-twi {\n color: inherit;\n justify-content: flex-start;\n align-items: center;\n text-decoration: none;\n display: inline-flex;\n}\n\n.c-twi:hover, .c-twi:focus {\n text-decoration: inherit;\n}\n\n.c-twi svg {\n margin-left: .5em;\n font-size: 1.25em;\n position: static !important;\n}\n\n.c-twi--left svg {\n order: -1;\n margin-left: 0;\n margin-right: .5em;\n}\n\n.c-usp {\n padding-top: 18px;\n padding-top: var(--space-s-m);\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n position: relative;\n}\n\n.c-usp--bordered {\n padding: 18px;\n padding: var(--space-s-m);\n border: 1px solid ;\n border-image-source: linear-gradient(to right, #00a2c280, #13aa1380);\n border-image-slice: 1;\n}\n\n.c-usp--center .c-usp__icon, .c-usp--center .c-usp__title {\n margin-left: auto;\n margin-right: auto;\n}\n\n.c-usp__title {\n max-width: 300px;\n color: #005461;\n}\n\n@supports (-webkit-text-fill-color: transparent) {\n .c-usp__title {\n background-image: linear-gradient(to right, #005461, #00a2c2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .c-usp__title::selection {\n -webkit-background-clip: none;\n }\n}\n\n.c-usp__link {\n margin-top: 0;\n}\n\n.c-usp__icon {\n height: 36px;\n height: var(--space-l);\n width: 36px;\n width: var(--space-l);\n}\n\n.c-usp--center .c-usp__icon {\n height: 72px;\n height: var(--space-2xl);\n width: 72px;\n width: var(--space-2xl);\n}\n\n.c-usp__eyebrow {\n padding: 4.5px 13.5px;\n padding: var(--space-3xs) var(--space-xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #005461;\n background: #c2e9f0;\n border-radius: 2em;\n display: inline-block;\n}\n\n.mp-dynamicform .c-form__section {\n padding: 36px;\n padding: var(--space-l);\n background: #ebf1f2;\n}\n\n.mp-dynamicform .c-form__section + .c-form__section {\n border-top: 2px solid #fff;\n}\n\n.mp-dynamicform .c-form__section-title {\n letter-spacing: -.02em;\n font-size: var(--step-3);\n}\n\n.mp-dynamicform .c-form .c-label--required:after {\n content: \"\";\n color: #ce0058;\n padding: 0 2px;\n position: relative;\n top: -2px;\n}\n\n.mp-dynamicform .c-input__wrap {\n align-items: center;\n gap: var(--space-s);\n flex-wrap: wrap;\n display: flex;\n}\n\n.mp-dynamicform .c-input__wrap .c-label {\n flex-basis: 148px;\n margin-bottom: 0;\n}\n\n.mp-dynamicform .c-input__wrap .c-label + {\n flex: 1 0 148px;\n}\n\n.mp-dynamicform .c-input__wrap--messages {\n row-gap: 0;\n margin-top: 0;\n}\n\n.mp-dynamicform .c-input__wrap--messages p {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n letter-spacing: -.01em;\n font-size: var(--step--1);\n}\n\n.mp-dynamicform .c-input__spacer {\n height: 0;\n flex-basis: 148px;\n}\n\n.mp-dynamicform .c-input--select {\n cursor: pointer;\n}\n\n.mp-dynamicform .c-checkbox + label, .mp-dynamicform .c-radio + label {\n display: inline-block;\n}\n\n.c-h, .o-prose h2, .o-prose h3, .o-prose h4, .c-product-comparison-card__heading {\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-weight: 700;\n line-height: 1.2;\n}\n\n.c-h--page-subtitle {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #13aa13;\n font-weight: 600;\n}\n\n.c-h--step-6, .c-h--page-title {\n letter-spacing: -.03em;\n font-size: 53.75px;\n font-size: var(--step-6);\n}\n\n@media only screen and (max-width: 28rem) {\n .c-h--step-6, .c-h--page-title {\n word-break: break-word;\n hyphens: auto;\n }\n}\n\n@media only screen and (max-width: 70rem) {\n [lang=\"de-DE\"] .c-h--step-6, [lang=\"de-DE\"] .c-h--page-title {\n word-break: break-word;\n hyphens: auto;\n }\n}\n\n.c-h--step-5 {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\n@media only screen and (max-width: 28rem) {\n .c-h--step-5 {\n word-break: break-word;\n hyphens: auto;\n }\n}\n\n@media only screen and (max-width: 70rem) {\n [lang=\"de-DE\"] .c-h--step-5 {\n word-break: break-word;\n hyphens: auto;\n }\n}\n\n.c-h--step-4 {\n letter-spacing: -.03em;\n font-size: 37.32px;\n font-size: var(--step-4);\n}\n\n.c-h--step-3, .o-prose h2, .c-fieldset legend, .c-off-canvas__header {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n}\n\n.c-h--step-2, .o-prose h3 {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\n.c-h--step-1, .o-prose h4, .c-product-comparison-card__heading {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n}\n\n.c-h--step-0 {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-h--step--1 {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-h--reset {\n letter-spacing: -.01em;\n font-size: 18px;\n font-weight: 400;\n font-size: var(--step-0);\n}\n\n.c-h--upper {\n text-transform: uppercase;\n color: #005461;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n letter-spacing: .02em;\n}\n\n.c-h--event-date {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #3d7b87;\n}\n\n.c-h--tagline {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n color: #13aa13;\n}\n\n.c-lightbox {\n z-index: 1000;\n width: 100%;\n height: 100%;\n background-color: #1c1c1ce6;\n justify-content: center;\n align-items: center;\n display: flex;\n position: fixed;\n top: 0;\n}\n\n.c-lightbox__slide {\n max-width: 90vw;\n margin: auto;\n display: none;\n}\n\n.c-lightbox__slide.active {\n display: block;\n}\n\n.c-lightbox__slide.active img {\n max-width: 85vw;\n max-height: 90vh;\n object-fit: contain;\n margin: auto;\n display: block;\n}\n\n.c-lightbox__prev, .c-lightbox__next {\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n background-position: center;\n background-repeat: no-repeat;\n padding: .5rem;\n position: absolute;\n}\n\n.c-lightbox__prev {\n background-image: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"arrow-left\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M22 12H2M2 12L9 5M2 12L9 19\\\" stroke=\\\"white\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"></path></svg>\");\n left: .5rem;\n}\n\n.c-lightbox__next {\n background-image: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"arrow-right\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M2 12H22M22 12L15 5M22 12L15 19\\\" stroke=\\\"white\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"></path></svg>\");\n right: .5rem;\n}\n\n.c-lightbox__close {\n color: #fff;\n cursor: pointer;\n font-size: 1.6rem;\n position: absolute;\n top: .6rem;\n right: .6rem;\n}\n\n.c-lightbox__video {\n width: 100%;\n max-height: 80vh;\n}\n\n.c-product-finder__panel {\n padding: 54px 27px;\n padding: var(--space-xl-2xl) var(--space-m-xl);\n background: #ebf1f2;\n position: relative;\n}\n\n.c-product-finder__panel--intro {\n background: radial-gradient(circle at 100% 0, #ebf1f2 0% 30%, #c2e9f0 100%);\n}\n\n.c-product-finder__panel--intro .c-h, .c-product-finder__panel--intro .o-prose h2, .o-prose .c-product-finder__panel--intro h2, .c-product-finder__panel--intro .o-prose h3, .o-prose .c-product-finder__panel--intro h3, .c-product-finder__panel--intro .o-prose h4, .o-prose .c-product-finder__panel--intro h4, .c-product-finder__panel--intro .c-product-comparison-card__heading {\n font-size: var(--step-5);\n}\n\n.c-product-finder__panel:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 54px 54px 0 0;\n border-width: var(--space-xl) var(--space-xl) 0 0;\n border-color: #0000 #fff #0000 #0000;\n display: none;\n position: absolute;\n bottom: 0;\n right: 0;\n}\n\n@media (min-width: 48em) {\n .c-product-finder__panel:after {\n display: block;\n }\n}\n\n.c-product-finder__panel .c-h, .c-product-finder__panel .o-prose h2, .o-prose .c-product-finder__panel h2, .c-product-finder__panel .o-prose h3, .o-prose .c-product-finder__panel h3, .c-product-finder__panel .o-prose h4, .o-prose .c-product-finder__panel h4, .c-product-finder__panel .c-product-comparison-card__heading, .c-product-finder__panel figure {\n margin-bottom: 0;\n}\n\n.c-product-finder__result {\n flex-flow: column;\n flex: 1;\n display: flex;\n}\n\n.c-product-finder__result > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-product-finder__result > .c-h, .o-prose .c-product-finder__result > h2, .o-prose .c-product-finder__result > h3, .o-prose .c-product-finder__result > h4, .c-product-finder__result > .c-product-comparison-card__heading {\n font-size: var(--step--1);\n text-transform: uppercase;\n}\n\n.c-product-finder__result--upgrade > .c-h, .o-prose .c-product-finder__result--upgrade > h2, .o-prose .c-product-finder__result--upgrade > h3, .o-prose .c-product-finder__result--upgrade > h4, .c-product-finder__result--upgrade > .c-product-comparison-card__heading {\n color: #005461;\n}\n\n@supports (-webkit-text-fill-color: transparent) {\n .c-product-finder__result--upgrade > .c-h, .o-prose .c-product-finder__result--upgrade > h2, .o-prose .c-product-finder__result--upgrade > h3, .o-prose .c-product-finder__result--upgrade > h4, .c-product-finder__result--upgrade > .c-product-comparison-card__heading {\n background-image: linear-gradient(to right, #005461, #00a2c2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n display: inline-block;\n }\n\n .c-product-finder__result--upgrade > .c-h::selection, .o-prose .c-product-finder__result--upgrade > h2::selection, .o-prose .c-product-finder__result--upgrade > h3::selection, .o-prose .c-product-finder__result--upgrade > h4::selection, .c-product-finder__result--upgrade > .c-product-comparison-card__heading::selection {\n -webkit-background-clip: none;\n }\n}\n\n.c-product-finder__result--upgrade .c-product-comparison-card {\n border: 1px solid ;\n border-image-source: linear-gradient(to right, #00a2c280, #13aa1380);\n border-image-slice: 1;\n}\n\nhtml body {\n}\n\nhtml body .u-step--2 {\n letter-spacing: -.01em;\n font-size: 12.5px;\n font-size: var(--step--2);\n}\n\nhtml body .u-step--1 {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\nhtml body .u-step-0 {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\nhtml body .u-step-1 {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n}\n\nhtml body .u-step-2 {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\nhtml body .u-step-3 {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n}\n\nhtml body .u-step-4 {\n letter-spacing: -.03em;\n font-size: 37.32px;\n font-size: var(--step-4);\n}\n\nhtml body .u-step-5 {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\nhtml body .u-step-6 {\n letter-spacing: -.03em;\n font-size: 53.75px;\n font-size: var(--step-6);\n}\n\nhtml body .u-step-7 {\n letter-spacing: -.03em;\n font-size: 64.5px;\n font-size: var(--step-7);\n}\n\nhtml body .u-step-8 {\n letter-spacing: -.03em;\n font-size: 77.4px;\n font-size: var(--step-8);\n}\n\nhtml body .u-step-9 {\n letter-spacing: -.03em;\n font-size: 92.88px;\n font-size: var(--step-9);\n}\n\nhtml body .u-step-10 {\n letter-spacing: -.03em;\n font-size: 111.45px;\n font-size: var(--step-10);\n}\n\nhtml body .u-lede {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #00a2c2;\n}\n\n.mp html body .u-lede, html body .u-lede {\n line-height: 1.6;\n}\n\nhtml body .u-strong {\n font-weight: 700;\n}\n\nhtml body .u-normal {\n font-weight: 400;\n}\n\nhtml body .u-ls {\n letter-spacing: -.01em;\n}\n\nhtml body .u-text-center {\n text-align: center;\n}\n\nhtml body .u-remove-bullets {\n list-style-type: none;\n}\n\nhtml body .u-link-inside a, html body .mp .u-link, html body .u-link, html body .c-internal-nav__list li a, .c-internal-nav__list li html body a, html body .c-off-canvas__close {\n color: #006daf;\n cursor: pointer;\n}\n\nhtml body .u-link-inside a:hover, html body .mp .u-link:hover, html body .u-link:hover, html body .c-internal-nav__list li a:hover, .c-internal-nav__list li html body a:hover, html body .c-off-canvas__close:hover {\n text-decoration: underline;\n}\n\nhtml body .u-link-inside a--petrol, html body .mp .u-link--petrol, html body .u-link--petrol {\n color: #005461;\n}\n\nhtml body .u-link-inside a--red, html body .mp .u-link--red, html body .u-link--red {\n color: #ce0058;\n}\n\nhtml body .u-link-inside a--underline, html body .mp .u-link--underline, html body .u-link--underline {\n text-decoration: underline;\n}\n\nhtml body .u-link-inside a--underline:hover, html body .mp .u-link--underline:hover, html body .u-link--underline:hover {\n text-decoration: none;\n}\n\nhtml body .u-petrol {\n color: #005461;\n}\n\nhtml body .u-bg-petrol {\n background-color: #005461;\n}\n\nhtml body .u-petrol-step--2 {\n color: #002126;\n}\n\nhtml body .u-bg-petrol-step--2 {\n background-color: #002126;\n}\n\nhtml body .u-petrol-step--1 {\n color: #003039;\n}\n\nhtml body .u-bg-petrol-step--1 {\n background-color: #003039;\n}\n\nhtml body .u-petrol-step-1 {\n color: #3d7b87;\n}\n\nhtml body .u-bg-petrol-step-1 {\n background-color: #3d7b87;\n}\n\nhtml body .u-petrol-step-2 {\n color: #bfd3d6;\n}\n\nhtml body .u-bg-petrol-step-2 {\n background-color: #bfd3d6;\n}\n\nhtml body .u-petrol-step-3 {\n color: #ebf1f2;\n}\n\nhtml body .u-bg-petrol-step-3 {\n background-color: #ebf1f2;\n}\n\nhtml body .u-blue {\n color: #00a2c2;\n}\n\nhtml body .u-bg-blue {\n background-color: #00a2c2;\n}\n\nhtml body .u-blue-step--1 {\n color: #00758c;\n}\n\nhtml body .u-bg-blue-step--1 {\n background-color: #00758c;\n}\n\nhtml body .u-blue-step-1 {\n color: #47bcd3;\n}\n\nhtml body .u-bg-blue-step-1 {\n background-color: #47bcd3;\n}\n\nhtml body .u-blue-step-2 {\n color: #c2e9f0;\n}\n\nhtml body .u-bg-blue-step-2 {\n background-color: #c2e9f0;\n}\n\nhtml body .u-blue-step-3 {\n color: #ebf8fa;\n}\n\nhtml body .u-bg-blue-step-3 {\n background-color: #ebf8fa;\n}\n\nhtml body .u-green {\n color: #13aa13;\n}\n\nhtml body .u-bg-green {\n background-color: #13aa13;\n}\n\nhtml body .u-green-step--1 {\n color: #0e7a0e;\n}\n\nhtml body .u-bg-green-step--1 {\n background-color: #0e7a0e;\n}\n\nhtml body .u-green-step-1 {\n color: #55c255;\n}\n\nhtml body .u-bg-green-step-1 {\n background-color: #55c255;\n}\n\nhtml body .u-green-step-2 {\n color: #c6ebc6;\n}\n\nhtml body .u-bg-green-step-2 {\n background-color: #c6ebc6;\n}\n\nhtml body .u-green-step-3 {\n color: #ecf8ec;\n}\n\nhtml body .u-bg-green-step-3 {\n background-color: #ecf8ec;\n}\n\nhtml body .u-red {\n color: #ce0058;\n}\n\nhtml body .u-bg-red {\n background-color: #ce0058;\n}\n\nhtml body .u-red-step--1 {\n color: #9b0042;\n}\n\nhtml body .u-bg-red-step--1 {\n background-color: #9b0042;\n}\n\nhtml body .u-red-step-1 {\n color: #dc4787;\n}\n\nhtml body .u-bg-red-step-1 {\n background-color: #dc4787;\n}\n\nhtml body .u-red-step-2 {\n color: #f3c2d7;\n}\n\nhtml body .u-bg-red-step-2 {\n background-color: #f3c2d7;\n}\n\nhtml body .u-red-step-3 {\n color: #fbebf2;\n}\n\nhtml body .u-bg-red-step-3 {\n background-color: #fbebf2;\n}\n\nhtml body .u-utility-blue {\n color: #006daf;\n}\n\nhtml body .u-bg-utility-blue {\n background-color: #006daf;\n}\n\nhtml body .u-utility-blue-step--1 {\n color: #004e7e;\n}\n\nhtml body .u-bg-utility-blue-step--1 {\n background-color: #004e7e;\n}\n\nhtml body .u-utility-blue-step-1 {\n color: #4796c5;\n}\n\nhtml body .u-bg-utility-blue-step-1 {\n background-color: #4796c5;\n}\n\nhtml body .u-utility-blue-step-2 {\n color: #c2dcec;\n}\n\nhtml body .u-bg-utility-blue-step-2 {\n background-color: #c2dcec;\n}\n\nhtml body .u-utility-blue-step-3 {\n color: #ebf3f9;\n}\n\nhtml body .u-bg-utility-blue-step-3 {\n background-color: #ebf3f9;\n}\n\nhtml body .u-utility-orange {\n color: #f2a60d;\n}\n\nhtml body .u-bg-utility-orange {\n background-color: #f2a60d;\n}\n\nhtml body .u-utility-orange-step--1 {\n color: #ae7809;\n}\n\nhtml body .u-bg-utility-orange-step--1 {\n background-color: #ae7809;\n}\n\nhtml body .u-utility-orange-step-1 {\n color: #f6bf51;\n}\n\nhtml body .u-bg-utility-orange-step-1 {\n background-color: #f6bf51;\n}\n\nhtml body .u-utility-orange-step-2 {\n color: #fceac5;\n}\n\nhtml body .u-bg-utility-orange-step-2 {\n background-color: #fceac5;\n}\n\nhtml body .u-utility-orange-step-3 {\n color: #fef8ec;\n}\n\nhtml body .u-bg-utility-orange-step-3 {\n background-color: #fef8ec;\n}\n\nhtml body .u-grey {\n color: #333;\n}\n\nhtml body .u-bg-grey {\n background-color: #333;\n}\n\nhtml body .u-grey--50 {\n color: #666;\n}\n\nhtml body .u-bg-grey--50 {\n background-color: #666;\n}\n\nhtml body .u-grey-step--2 {\n color: #0a0a0a;\n}\n\nhtml body .u-bg-grey-step--2 {\n background-color: #0a0a0a;\n}\n\nhtml body .u-grey-step--1 {\n color: #1c1c1c;\n}\n\nhtml body .u-bg-grey-step--1 {\n background-color: #1c1c1c;\n}\n\nhtml body .u-grey-step-1 {\n color: #959595;\n}\n\nhtml body .u-bg-grey-step-1 {\n background-color: #959595;\n}\n\nhtml body .u-grey-step-2 {\n color: #cecece;\n}\n\nhtml body .u-bg-grey-step-2 {\n background-color: #cecece;\n}\n\nhtml body .u-grey-step-3 {\n color: #efefef;\n}\n\nhtml body .u-bg-grey-step-3 {\n background-color: #efefef;\n}\n\nhtml body .u-white {\n color: #fff;\n}\n\nhtml body .u-bg-white, html body .c-internal-nav--stuck {\n background-color: #fff;\n}\n\nhtml body .u-disabled {\n cursor: not-allowed;\n}\n\nhtml body .u-disabled input, html body .u-disabled button {\n pointer-events: none;\n}\n\nhtml body .u-wrap, html body .c-internal-nav__wrap {\n padding-right: 18px;\n padding-right: var(--gutter);\n padding-left: 18px;\n padding-left: var(--gutter);\n max-width: 78.75rem;\n max-width: calc(78.75rem + var(--gutter) + var(--gutter) );\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n}\n\nhtml body .u-wrap .u-wrap, html body .c-internal-nav__wrap .u-wrap, html body .u-wrap .c-internal-nav__wrap, html body .c-internal-nav__wrap .c-internal-nav__wrap {\n padding-left: 0;\n padding-right: 0;\n}\n\nhtml body .u-wrap--content {\n max-width: 51.75rem;\n width: 100%;\n}\n\nhtml body .u-wrap--fields {\n max-width: 27rem;\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-flex {\n display: flex;\n}\n\nhtml body .u-flex-column {\n flex-direction: column;\n}\n\nhtml body .u-align-center {\n align-items: center;\n}\n\nhtml body .u-justify-center {\n justify-content: center;\n}\n\nhtml body .u-justify-between {\n justify-content: space-between;\n}\n\nhtml body .u-justify-end {\n justify-content: flex-end;\n}\n\nhtml body .u-flex-1 {\n flex: 1;\n}\n\nhtml body .u-flex-no-shrink {\n flex-shrink: 0;\n}\n\nhtml body .u-flex-no-grow {\n flex-grow: 0;\n}\n\nhtml body .u-flex-wrap {\n flex-wrap: wrap;\n}\n\nhtml body .u-hidden, html body .c-radio, html body .c-checkbox, html body .c-toggle__checkbox {\n clip: rect(0 0 0 0);\n clip-path: inset(0 0 100%);\n height: 1px;\n white-space: nowrap;\n width: 1px;\n transition: clip-path .3s;\n position: absolute;\n overflow: hidden;\n}\n\nhtml body .u-revealed {\n clip-path: inset(0);\n transition: clip-path .3s;\n}\n\nhtml body .u-clear-both {\n clear: both;\n}\n\nhtml body .u-display-none {\n display: none;\n}\n\nhtml body .u-display-block {\n display: block;\n}\n\nhtml body .u-display-inline-block {\n display: inline-block;\n}\n\nhtml body .u-float-left, html body .u-float--image-left {\n float: left;\n}\n\nhtml body .u-float-right, html body .u-float--image-right, html body .c-card--float-right, html body .c-product-signpost--float-right {\n float: right;\n}\n\nhtml body .u-float--image-left {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n html body .u-float--image-left {\n margin-right: 13.5px;\n margin-right: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\nhtml body .u-float--image-right {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n html body .u-float--image-right {\n margin-left: 13.5px;\n margin-left: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\nhtml body .u-fill, html body .c-campaign__link, html body .c-product-signpost__link, html body .c-usp__link {\n height: 100%;\n width: 100%;\n z-index: 1;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n}\n\nhtml body .u-fill--link, html body .c-campaign__link, html body .c-product-signpost__link, html body .c-usp__link {\n white-space: nowrap;\n text-indent: 200%;\n overflow: hidden;\n}\n\nhtml body .u-relative {\n position: relative;\n}\n\nhtml body .u-sticky {\n position: sticky;\n top: 0;\n}\n\nhtml body .u-sticky--gutter {\n top: 18px;\n top: var(--gutter);\n}\n\nhtml body .u-split {\n width: 100%;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\nhtml body .u-split--top {\n align-items: flex-start;\n}\n\nhtml body .u-split--bottom {\n align-items: flex-end;\n}\n\nhtml body .u-split > :first-child {\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\n@supports (gap: 1rem) {\n html body .u-split {\n gap: 18px;\n gap: var(--space-s-m);\n }\n\n html body .u-split > :first-child {\n margin-right: unset;\n }\n}\n\nhtml body .u-row {\n gap: 18px;\n gap: var(--space-s-l);\n display: flex;\n}\n\n@supports (object-fit: contain) {\n html body .u-object-contain {\n object-fit: contain;\n }\n}\n\n@supports (object-fit: cover) {\n html body .u-2\\/1 {\n aspect-ratio: 2 / 1;\n object-fit: cover;\n object-position: 75% 50%;\n }\n}\n\n@media (min-width: 640px) {\n html body .u-md-hidden {\n display: none !important;\n }\n}\n\nhtml body [v-cloak] {\n display: none;\n}\n\nhtml body .u-flow--3xs > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\nhtml body .u-flow--2xs > * + , html body .c-product-comparison-card > + , html body .c-comparison-table__product > + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\nhtml body .u-flow--xs > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\nhtml body .u-flow--s > * + , html body .u-flow > + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\nhtml body .u-flow--m > * + * {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\nhtml body .u-flow--s-m > * + * {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n}\n\nhtml body .u-flow--s-l > * + * {\n margin-top: 18px;\n margin-top: var(--space-s-l);\n}\n\nhtml body .u-flow--m-xl > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-xl);\n}\n\nhtml body .u-flow--l > * + * {\n margin-top: 36px;\n margin-top: var(--space-l);\n}\n\nhtml body .u-flow--xl > * + * {\n margin-top: 54px;\n margin-top: var(--space-xl);\n}\n\nhtml body .u-flow--l-2xl > * + * {\n margin-top: 36px;\n margin-top: var(--space-l-2xl);\n}\n\nhtml body .u-flow--3xl > * + * {\n margin-top: 108px;\n margin-top: var(--space-3xl);\n}\n\nhtml body .u-flow--prose > * + , html body .u-flow--prose > [property=\"a:Content\"] > + * {\n margin-top: var(--flow, 1em);\n}\n\nhtml body .u-flow--gutter > * + * {\n margin-top: 18px;\n margin-top: var(--gutter);\n}\n\nhtml body .u-flow--lined > * + * {\n padding-top: 27px;\n padding-top: var(--space-m-xl);\n margin-top: 27px;\n margin-top: var(--space-m-xl);\n clear: both;\n border-top: 1px solid #bfd3d6;\n}\n\nhtml body .u-pad-top-0 {\n padding-top: 0;\n}\n\nhtml body .u-pad-top-s {\n padding-top: 18px;\n padding-top: var(--space-s);\n}\n\nhtml body .u-pad-top-m {\n padding-top: 27px;\n padding-top: var(--space-m);\n}\n\nhtml body .u-pad-top-l {\n padding-top: 36px;\n padding-top: var(--space-l);\n}\n\nhtml body .u-pad-top-xl {\n padding-top: 54px;\n padding-top: var(--space-xl);\n}\n\nhtml body .u-pad-top-s-m {\n padding-top: 18px;\n padding-top: var(--space-s-m);\n}\n\nhtml body .u-pad-top-m-l {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\nhtml body .u-pad-top-l-xl {\n padding-top: 36px;\n padding-top: var(--space-l-xl);\n}\n\nhtml body .u-pad-bottom-0 {\n padding-bottom: 0;\n}\n\nhtml body .u-pad-bottom-s {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n}\n\nhtml body .u-pad-bottom-m {\n padding-bottom: 27px;\n padding-bottom: var(--space-m);\n}\n\nhtml body .u-pad-bottom-l {\n padding-bottom: 36px;\n padding-bottom: var(--space-l);\n}\n\nhtml body .u-pad-bottom-xl {\n padding-bottom: 54px;\n padding-bottom: var(--space-xl);\n}\n\nhtml body .u-pad-bottom-s-m {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n}\n\nhtml body .u-pad-bottom-m-l {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n}\n\nhtml body .u-pad-bottom-l-xl {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-xl);\n}\n\nhtml body .u-pad-left-0 {\n padding-left: 0;\n}\n\nhtml body .u-pad-left-s {\n padding-left: 18px;\n padding-left: var(--space-s);\n}\n\nhtml body .u-pad-left-m {\n padding-left: 27px;\n padding-left: var(--space-m);\n}\n\nhtml body .u-pad-left-l {\n padding-left: 36px;\n padding-left: var(--space-l);\n}\n\nhtml body .u-pad-left-xl {\n padding-left: 54px;\n padding-left: var(--space-xl);\n}\n\nhtml body .u-pad-right-0 {\n padding-right: 0;\n}\n\nhtml body .u-pad-right-s {\n padding-right: 18px;\n padding-right: var(--space-s);\n}\n\nhtml body .u-pad-right-m {\n padding-right: 27px;\n padding-right: var(--space-m);\n}\n\nhtml body .u-pad-right-l {\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-pad-right-xl {\n padding-right: 54px;\n padding-right: var(--space-xl);\n}\n\nhtml body .u-pad-0 {\n padding: 0;\n}\n\nhtml body .u-pad-3xs {\n padding: 4.5px;\n padding: var(--space-3xs);\n}\n\nhtml body .u-pad-s {\n padding: 18px;\n padding: var(--space-s);\n}\n\nhtml body .u-pad-m {\n padding: 27px;\n padding: var(--space-m);\n}\n\nhtml body .u-pad-l {\n padding: 36px;\n padding: var(--space-l);\n}\n\nhtml body .u-pad-xl {\n padding: 54px;\n padding: var(--space-xl);\n}\n\nhtml body .u-pad-y-xs {\n padding-top: 13.5px;\n padding-top: var(--space-xs);\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n}\n\nhtml body .u-pad-y-s {\n padding-top: 18px;\n padding-top: var(--space-s);\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n}\n\nhtml body .u-pad-y-m {\n padding-top: 27px;\n padding-top: var(--space-m);\n padding-bottom: 27px;\n padding-bottom: var(--space-m);\n}\n\nhtml body .u-pad-y-m-l {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n}\n\nhtml body .u-pad-y-l {\n padding-top: 36px;\n padding-top: var(--space-l);\n padding-bottom: 36px;\n padding-bottom: var(--space-l);\n}\n\nhtml body .u-pad-y-xl {\n padding-top: 54px;\n padding-top: var(--space-xl);\n padding-bottom: 54px;\n padding-bottom: var(--space-xl);\n}\n\nhtml body .u-pad-y-2xl {\n padding-top: 72px;\n padding-top: var(--space-2xl);\n padding-bottom: 72px;\n padding-bottom: var(--space-2xl);\n}\n\nhtml body .u-pad-y-l-xl {\n padding-top: 36px;\n padding-top: var(--space-l-xl);\n padding-bottom: 36px;\n padding-bottom: var(--space-l-xl);\n}\n\nhtml body .u-pad-y-l-2xl {\n padding-top: 36px;\n padding-top: var(--space-l-2xl);\n padding-bottom: 36px;\n padding-bottom: var(--space-l-2xl);\n}\n\nhtml body .u-pad-x-s {\n padding-left: 18px;\n padding-left: var(--space-s);\n padding-right: 18px;\n padding-right: var(--space-s);\n}\n\nhtml body .u-pad-x-m {\n padding-left: 27px;\n padding-left: var(--space-m);\n padding-right: 27px;\n padding-right: var(--space-m);\n}\n\nhtml body .u-pad-x-l {\n padding-left: 36px;\n padding-left: var(--space-l);\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-pad-x-xl {\n padding-left: 54px;\n padding-left: var(--space-xl);\n padding-right: 54px;\n padding-right: var(--space-xl);\n}\n\nhtml body .u-pad-x-s-xl {\n padding-left: 18px;\n padding-left: var(--space-s-xl);\n padding-right: 18px;\n padding-right: var(--space-s-xl);\n}\n\nhtml body .u-margin-top-0 {\n margin-top: 0;\n}\n\nhtml body .u-margin-top-auto {\n margin-top: auto;\n}\n\nhtml body .u-margin-top-2xs {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\nhtml body .u-margin-top-xs {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\nhtml body .u-margin-top-s {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\nhtml body .u-margin-top-m {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\nhtml body .u-margin-top-l {\n margin-top: 36px;\n margin-top: var(--space-l);\n}\n\nhtml body .u-margin-top-xl {\n margin-top: 54px;\n margin-top: var(--space-xl);\n}\n\nhtml body .u-margin-top-s-m {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n}\n\nhtml body .u-margin-top-m-l {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\nhtml body .u-margin-top-l-xl {\n margin-top: 36px;\n margin-top: var(--space-l-xl);\n}\n\nhtml body .u-margin-top-l-2xl {\n margin-top: 36px;\n margin-top: var(--space-l-2xl);\n}\n\nhtml body .u-margin-top-xl-2xl {\n margin-top: 54px;\n margin-top: var(--space-xl-2xl);\n}\n\nhtml body .u-margin-bottom-0 {\n margin-bottom: 0;\n}\n\nhtml body .u-margin-bottom-s {\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n}\n\nhtml body .u-margin-bottom-m {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n}\n\nhtml body .u-margin-bottom-l {\n margin-bottom: 36px;\n margin-bottom: var(--space-l);\n}\n\nhtml body .u-margin-bottom-xl {\n margin-bottom: 54px;\n margin-bottom: var(--space-xl);\n}\n\nhtml body .u-margin-bottom-s-m {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\nhtml body .u-margin-bottom-s-l {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-l);\n}\n\nhtml body .u-margin-bottom-m-l {\n margin-bottom: 27px;\n margin-bottom: var(--space-m-l);\n}\n\nhtml body .u-margin-bottom-m-xl {\n margin-bottom: 27px;\n margin-bottom: var(--space-m-xl);\n}\n\nhtml body .u-margin-bottom-l-xl {\n margin-bottom: 36px;\n margin-bottom: var(--space-l-xl);\n}\n\nhtml body .u-margin-left-0 {\n margin-left: 0;\n}\n\nhtml body .u-margin-left-2xs {\n margin-left: 9px;\n margin-left: var(--space-2xs);\n}\n\nhtml body .u-margin-left-xs {\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n}\n\nhtml body .u-margin-left-s {\n margin-left: 18px;\n margin-left: var(--space-s);\n}\n\nhtml body .u-margin-left-m {\n margin-left: 27px;\n margin-left: var(--space-m);\n}\n\nhtml body .u-margin-left-l {\n margin-left: 36px;\n margin-left: var(--space-l);\n}\n\nhtml body .u-margin-left-xl {\n margin-left: 54px;\n margin-left: var(--space-xl);\n}\n\nhtml body .u-margin-right-0 {\n margin-right: 0;\n}\n\nhtml body .u-margin-right-xs {\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n}\n\nhtml body .u-margin-right-s {\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\nhtml body .u-margin-right-m {\n margin-right: 27px;\n margin-right: var(--space-m);\n}\n\nhtml body .u-margin-right-l {\n margin-right: 36px;\n margin-right: var(--space-l);\n}\n\nhtml body .u-margin-right-xl {\n margin-right: 54px;\n margin-right: var(--space-xl);\n}\n\nhtml body .u-margin-0 {\n margin: 0;\n}\n\nhtml body .u-margin-s {\n margin: 18px;\n margin: var(--space-s);\n}\n\nhtml body .u-margin-m {\n margin: 27px;\n margin: var(--space-m);\n}\n\nhtml body .u-margin-l {\n margin: 36px;\n margin: var(--space-l);\n}\n\nhtml body .u-margin-xl {\n margin: 54px;\n margin: var(--space-xl);\n}\n\nhtml body .u-margin-y-xs {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n margin-bottom: 13.5px;\n margin-bottom: var(--space-xs);\n}\n\nhtml body .u-margin-y-s {\n margin-top: 18px;\n margin-top: var(--space-s);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n}\n\nhtml body .u-margin-y-s-m {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\nhtml body .u-margin-y-m {\n margin-top: 27px;\n margin-top: var(--space-m);\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n}\n\nhtml body .u-margin-y-l {\n margin-top: 36px;\n margin-top: var(--space-l);\n margin-bottom: 36px;\n margin-bottom: var(--space-l);\n}\n\nhtml body .u-margin-y-xl {\n margin-top: 54px;\n margin-top: var(--space-xl);\n margin-bottom: 54px;\n margin-bottom: var(--space-xl);\n}\n\nhtml body .u-margin-x-3xs {\n margin-left: 4.5px;\n margin-left: var(--space-3xs);\n margin-right: 4.5px;\n margin-right: var(--space-3xs);\n}\n\nhtml body .u-margin-x-2xs {\n margin-left: 9px;\n margin-left: var(--space-2xs);\n margin-right: 9px;\n margin-right: var(--space-2xs);\n}\n\nhtml body .u-margin-x-xs {\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n}\n\nhtml body .u-margin-x-s {\n margin-left: 18px;\n margin-left: var(--space-s);\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\nhtml body .u-margin-x-m {\n margin-left: 27px;\n margin-left: var(--space-m);\n margin-right: 27px;\n margin-right: var(--space-m);\n}\n\nhtml body .u-margin-x-l {\n margin-left: 36px;\n margin-left: var(--space-l);\n margin-right: 36px;\n margin-right: var(--space-l);\n}\n\nhtml body .u-margin-x-xl {\n margin-left: 54px;\n margin-left: var(--space-xl);\n margin-right: 54px;\n margin-right: var(--space-xl);\n}\n\nhtml body .u-margin-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\nhtml body .u-width-auto {\n width: auto;\n}\n\nhtml body .u-width-100 {\n width: 100%;\n}\n\nhtml body .u-hr, html body .o-prose hr {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-xl);\n margin: 0 0 27px;\n margin-bottom: var(--space-m-xl);\n border: none;\n border-bottom: 1px solid #bfd3d6;\n}\n\nhtml body .u-border-top {\n border-top: 1px solid #bfd3d6;\n}\n\nhtml body .u-border-bottom {\n border-bottom: 1px solid #bfd3d6;\n}\n\nhtml body .u-border {\n border: 1px solid #bfd3d6;\n}\n\nhtml body .u-ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 0;\n width: 100%;\n overflow: hidden;\n}\n\n@supports (background-attachment: local) {\n html body .u-scroll-shadows--v {\n background-color: #fff;\n background-image: linear-gradient(#fff 50%, #0000), linear-gradient(#0000, #fff 50%), radial-gradient(farthest-side at 50% 0, #9999994d, #0000), radial-gradient(farthest-side at 50% 100%, #9999994d, #0000);\n background-position: top, bottom, top, bottom;\n background-repeat: no-repeat;\n background-size: 100% 54px, 100% 54px, 100% 27px, 100% 27px;\n background-attachment: local, local, scroll, scroll;\n }\n}\n\n@supports (background-attachment: local) {\n html body .u-scroll-shadows--h {\n background-color: #fff;\n background-image: linear-gradient(to right, #fff 50%, #0000), linear-gradient(to right, #0000, #fff 50%), radial-gradient(farthest-side at 0, #9999994d, #0000), radial-gradient(farthest-side at 100%, #9999994d, #0000);\n background-position: 0, 100%, 0, 100%;\n background-repeat: no-repeat;\n background-size: 54px 100%, 54px 100%, 27px 120%, 27px 120%;\n background-attachment: local, local, scroll, scroll;\n }\n}\n\n/# sourceMappingURL=main.css.map /\n","@import './tools';\r\n@import './foundations';\r\n@import './elements';\r\n@import './objects';\r\n@import './components';\r\n@import './utilities';\r\n","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n left: 50%;\r\n left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n position: relative;\r\n transform: translateX(-50vw);\r\n width: 100vw;\r\n width: calc( 100vw - var(--scrollbarWidth) );\r\n padding-left: safe-space($pad);\r\n padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n @include breakout\r\n}","// Cutoff corner effect\r\n@mixin cutoff($corner:\"bottom-right\", $size:var(--gutter)) {\r\n \r\n $offset : calc(100% - $size);\r\n\r\n // Co-ordinates for the polygon\r\n $co1: \"0 0\";\r\n $co2: \"100% 0\";\r\n $co3: \"100% 100%\";\r\n $co4: \"0 100%\";\r\n\r\n // Override the basic co-ordinates\r\n @if $corner == \"top-left\" {\r\n $co1: \"0 #{$size}, #{$size} 0\";\r\n } @else if $corner == \"top-right\" {\r\n $co2: \"#{$offset} 0, 100% #{$size}\";\r\n } @else if $corner == \"bottom-left\" {\r\n $co4: \"#{$size} 100%, 0 #{$offset}\";\r\n } @else {\r\n $co3: \"100% #{$offset}, #{$offset} 100%\";\r\n }\r\n\r\n clip-path: polygon(\r\n #{$co1}, #{$co2}, #{$co3}, #{$co4}\r\n );\r\n}\r\n\r\n.u-cutoff {\r\n @include cutoff\r\n}\r\n\r\n.u-cutoff--top-right {\r\n @include cutoff(\"top-right\")\r\n}\r\n\r\n.u-cutoff--top-left {\r\n @include cutoff(\"top-left\")\r\n}\r\n\r\n.u-cutoff--bottom-left {\r\n @include cutoff(\"bottom-left\")\r\n}\r\n\r\n.u-cutoff--xl {\r\n @include cutoff($size: var(--space-xl))\r\n}","$weights: (\r\n base: 400,\r\n semi: 600,\r\n bold: 700\r\n);\r\n\r\n$line-heights: (\r\n base: 1.2,\r\n prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n '4%': 0.04em,\r\n '2%': 0.02em,\r\n base: -0.01em,\r\n '-2%': -0.02em,\r\n '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, /\r\n$steps: (\r\n -2: (\r\n min: 12.64,\r\n max: 12.50,\r\n ls: base\r\n ),\r\n\r\n -1: (\r\n min: 14.22,\r\n max: 15.00,\r\n ls: base\r\n ),\r\n\r\n 0: (\r\n min: 16.00,\r\n max: 18.00,\r\n ls: base\r\n ),\r\n\r\n 1: (\r\n min: 18.00,\r\n max: 21.60,\r\n ls: '-2%'\r\n ),\r\n\r\n 2: (\r\n min: 20.25,\r\n max: 25.92,\r\n ls: '-2%'\r\n ),\r\n\r\n 3: (\r\n min: 22.78,\r\n max: 31.10,\r\n ls: '-2%'\r\n ),\r\n\r\n 4: (\r\n min: 25.63,\r\n max: 37.32,\r\n ls: '-3%'\r\n ),\r\n\r\n 5: (\r\n min: 28.83,\r\n max: 44.79,\r\n ls: '-3%'\r\n ),\r\n\r\n 6: (\r\n min: 32.44,\r\n max: 53.75,\r\n ls: '-3%'\r\n ),\r\n\r\n 7: (\r\n min: 36.49,\r\n max: 64.50,\r\n ls: '-3%'\r\n ),\r\n\r\n 8: (\r\n min: 41.05,\r\n max: 77.40,\r\n ls: '-3%'\r\n ),\r\n\r\n 9: (\r\n min: 46.18,\r\n max: 92.88,\r\n ls: '-3%'\r\n ),\r\n\r\n 10: (\r\n min: 51.96,\r\n max: 111.45,\r\n ls: '-3%'\r\n )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n --fluid-min-width: #{$f-min-width};\r\n --fluid-max-width: #{$f-max-width};\r\n\r\n --fluid-screen: 100vw;\r\n --fluid-bp: calc(\r\n (var(--fluid-screen) - var(--fluid-min-width) / 16 1rem) /\r\n (var(--fluid-max-width) - var(--fluid-min-width))\r\n );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n :root {\r\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n }\r\n}\r\n\r\n:root {\r\n @each $name, $step in $steps {\r\n --f-#{$name}-min: #{map-get($step, min)};\r\n --f-#{$name}-max: #{map-get($step, max)};\r\n --step-#{$name}: calc(\r\n ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) \r\n var(--fluid-bp)\r\n );\r\n }\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 400;\r\n font-display: swap;\r\n src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 600;\r\n font-display: swap;\r\n src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 700;\r\n font-display: swap;\r\n src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n \"3xs\": 0.25,\r\n \"2xs\": 0.5,\r\n \"xs\": 0.75,\r\n \"s\": 1,\r\n \"m\": 1.5,\r\n \"l\": 2,\r\n \"xl\": 3,\r\n \"2xl\": 4,\r\n \"3xl\": 6,\r\n \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n --max-screen: #{ math.div($f-max-width, 16) };\r\n --fc-screen: 100vw;\r\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n --fc-base: #{$space-base};\r\n\r\n @each $space, $_ in $spaces {\r\n --fc-#{$space}: #{space-size($space)};\r\n --space-#{$space}: calc(var(--fc-#{$space}) / 16 1rem);\r\n }\r\n\r\n $min: \"\";\r\n @each $max, $_ in $spaces {\r\n @if ($min) {\r\n @include space-between($min, $max);\r\n }\r\n $min: $max;\r\n }\r\n\r\n @include space-between(s, l);\r\n @include space-between(s, m);\r\n @include space-between(xs, l);\r\n @include space-between(m, xl);\r\n @include space-between(l, 2xl);\r\n @include space-between(s, xl);\r\n @include space-between(l, 3xl);\r\n @include space-between(xl, 3xl);\r\n @include space-between(l, 4xl);\r\n @include space-between(3xs, m);\r\n\r\n --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n :root {\r\n --fc-screen: calc(var(--max-screen) * 1rem);\r\n }\r\n}\r\n","@import './breakout.scss';\r\n@import './cutoff.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n font-size: 1px * map-get(map-get($steps, $step), max);\r\n font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n & > * + * {\r\n @include margin-top($size);\r\n }\r\n}\r\n\r\n@function space-size($key: s) {\r\n @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n --space-#{$min}-#{$max}: calc(\r\n ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) \r\n var(--fluid-bp)\r\n );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n @if (type-of($value) == number) {\r\n @return $value;\r\n } @else if (type-of($value) == null) {\r\n @return 0;\r\n } @else if (type-of($value) == string) {\r\n $split: get-min-max($value);\r\n $min: nth($split, 1);\r\n\r\n @if ($value == 'gutter') {\r\n @if ($safe) {\r\n @return space-unit(s);\r\n } @else {\r\n @return var(--gutter); \r\n }\r\n }\r\n\r\n @if ($value == 'auto') {\r\n @return auto;\r\n }\r\n \r\n @if ($safe) {\r\n @return space-unit($min);\r\n } @else {\r\n @return var(--space-#{$value}); \r\n }\r\n }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n @if ($arg4 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n } @else if ($arg3 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n } @else if ($arg2 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2);\r\n } @else if ($arg1 != '') {\r\n #{$property}: safe-space($arg1, true);\r\n #{$property}: safe-space($arg1);\r\n }\r\n}\r\n\r\n@function get-min-max($value) {\r\n $split: str-split($value, '-');\r\n $min: nth($split, 1);\r\n\r\n @if (length($split) == 1) {\r\n @return ($min, null);\r\n } @else {\r\n @return ($min, nth($split, 2))\r\n }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n // empty array/list\r\n $split-arr: ();\r\n // first index of separator in string\r\n $index : str-index($string, $separator);\r\n // loop through string\r\n @while $index != null {\r\n // get the substring from the first character to the separator\r\n $item: str-slice($string, 1, $index - 1);\r\n // push item to array\r\n $split-arr: append($split-arr, $item);\r\n // remove item and separator from string\r\n $string: str-slice($string, $index + 1);\r\n // find new index of separator\r\n $index : str-index($string, $separator);\r\n }\r\n // add the remaining string to list (the last item)\r\n $split-arr: append($split-arr, $string);\r\n\r\n @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n @media only screen and (max-width: 28rem) {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n\r\n @media only screen and (max-width: 70rem) {\r\n [lang='de-DE'] & {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n }\r\n}","@keyframes spin {\r\n from { transform: rotate(0deg) }\r\n to { transform: rotate(360deg) }\r\n}","\r\n,\r\n:before,\r\n:after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n min-height: 100vh;\r\n margin: 0;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n height: auto;\r\n border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n display: block;\r\n}\r\n\r\niframe {\r\n border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n font: weight() #{1.125rem}/lh() $font-stack;\r\n @include step();\r\n color: color('grey');\r\n}\r\n\r\nbody {\r\n @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n margin: 0\r\n}\r\n\r\nul, ol, p {\r\n line-height: lh();\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n cursor: pointer;\r\n color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n}\r\n\r\nlabel {\r\n cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n * {\r\n -webkit-animation: none!important;\r\n animation: none!important;\r\n transition: none!important;\r\n scroll-behavior: auto!important;\r\n }\r\n}\r\n","body {\r\n -moz-osx-font-smoothing: grayscale;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:focus {\r\n outline: 2px solid color('petrol');\r\n}\r\n\r\n.body--blog {\r\n .c-h--page-title,\r\n .c-hero__content,\r\n .o-prose--blog,\r\n .u-lede,\r\n .c-event-card,\r\n .c-h--step-4,\r\n .c-h--step-3,\r\n .c-h--step-2,\r\n .c-h--step-1,\r\n .c-card__title {\r\n -moz-font-feature-settings: \"salt\";\r\n -webkit-font-feature-settings: \"salt\";\r\n font-feature-settings: \"salt\";\r\n }\r\n}\r\n",".o-prose {\r\n color: inherit;\r\n\r\n h2 {\r\n @extend .c-h,.c-h--step-3;\r\n }\r\n\r\n h3 {\r\n @extend .c-h,.c-h--step-2;\r\n }\r\n\r\n h4 {\r\n @extend .c-h,.c-h--step-1;\r\n }\r\n\r\n p,\r\n ul,\r\n ol {\r\n line-height: lh('prose');\r\n }\r\n\r\n p a:not(.c-button),\r\n li a:not(.c-button),\r\n td a:not(.c-button) {\r\n color: color('utility-blue');\r\n text-decoration: underline;\r\n text-underline-offset: 3px;\r\n \r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n ul li {\r\n list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside; \r\n margin-left: 1em;\r\n padding-left: 0.5rem;\r\n\r\n h3,\r\n h4 {\r\n line-height: lh('prose');\r\n font-size: 1em;\r\n color: color('green');\r\n }\r\n }\r\n\r\n ol li {\r\n list-style: decimal;\r\n padding-left: 0.375rem;\r\n margin-left: 1.125em;\r\n }\r\n\r\n ol ol li {\r\n list-style: lower-alpha;\r\n }\r\n\r\n pre {\r\n background: color('petrol', 'step-3');\r\n line-height: 1.4;\r\n overflow-x: auto;\r\n @include padding('xs');\r\n @include step(-1);\r\n }\r\n\r\n li code,\r\n p code {\r\n background: color('petrol', 'step-3');\r\n @include step(-1);\r\n padding: 0.25em;\r\n }\r\n\r\n blockquote {\r\n @extend .c-quote;\r\n }\r\n\r\n figcaption {\r\n @include step(-1);\r\n display: block;\r\n }\r\n\r\n figure > * + * {\r\n margin-top: 0.5em;\r\n }\r\n\r\n // Spacing\r\n\r\n ol,\r\n ul {\r\n ul,\r\n ol {\r\n @include margin-top('s');\r\n }\r\n\r\n li + li,\r\n li > ul,\r\n li > ol {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n ol,\r\n ul,\r\n & > pre {\r\n --flow: var(--space-s-m);\r\n\r\n &:not(:last-child) {\r\n margin-bottom: var(--flow);\r\n }\r\n }\r\n\r\n h2,\r\n h3 {\r\n --flow: var(--space-m-l);\r\n }\r\n\r\n h2 {\r\n @include margin-bottom('s-m');\r\n }\r\n\r\n figure,\r\n & > img {\r\n --flow: var(--space-l-xl);\r\n margin-bottom: var(--flow);\r\n }\r\n\r\n blockquote {\r\n --flow: var(--space-m-l);\r\n margin-bottom: var(--flow);\r\n }\r\n\r\n // Modifiers\r\n\r\n @media (min-width: 35em) {\r\n &:not(.o-prose--left-blockquote) blockquote {\r\n @include padding-left('3xl');\r\n\r\n &:before {\r\n left: var(--space-xl);\r\n }\r\n }\r\n\r\n &.o-prose--left-blockquote blockquote {\r\n @include padding-right('3xl');\r\n }\r\n }\r\n\r\n &--with-lede > p:first-of-type {\r\n @include step(1);\r\n color: color('blue');\r\n }\r\n\r\n table {\r\n @extend .c-table;\r\n }\r\n}\r\n\r\n.o-featured-image {\r\n margin-left: calc(-1 * var(--gutter));\r\n}\r\n","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n @return math.div($grid-gutter-width, $grid-width) * 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n @return math.div(\r\n (\r\n ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n ), $grid-width\r\n ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n@mixin o-grid($columns) {\r\n $width: math.div(100%, $columns);\r\n \r\n & > * {\r\n width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);\r\n @include margin-bottom(\"gutter\");\r\n \r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(#{$columns}n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n\r\n &.o-grid--s {\r\n & > * {\r\n width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n width: calc(($width - (($columns - 1) * var(--space-s) / $columns)) - 0.1px);\r\n @include margin-bottom(\"s\");\r\n \r\n & + * {\r\n @include margin-left(\"s\");\r\n }\r\n\r\n &:nth-child(#{$columns}n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.o-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: stretch;\r\n margin-bottom: calc(-1 * space-unit());\r\n margin-bottom: calc(-1 * var(--gutter));\r\n width: 100%;\r\n\r\n &--float:after {\r\n content: \" \";\r\n display: table;\r\n clear: both;\r\n }\r\n\r\n &--between {\r\n justify-content: space-between;\r\n }\r\n\r\n &--no-height-match {\r\n align-items: start;\r\n }\r\n\r\n & > * {\r\n width: 100%;\r\n }\r\n\r\n &--of-two {\r\n @media (min-width: 40em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-two-switch {\r\n justify-content: space-between;\r\n \r\n @media (min-width: 40em) {\r\n @include o-grid(2);\r\n \r\n &>:nth-child(2n + 2) {\r\n @include margin-left(0);\r\n }\r\n }\r\n }\r\n\r\n &--of-two-late {\r\n @media (min-width: 55em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-two-early {\r\n @media (min-width: 22.4em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-three {\r\n @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 55em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-three-late {\r\n @media (min-width: 38em) and (max-width: 67.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 68em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-three-early {\r\n @media (min-width: 22.4em) and (max-width: 54.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 55em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-four {\r\n @media (min-width: 38em) and (max-width: 59.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 60em) {\r\n @include o-grid(4)\r\n }\r\n }\r\n\r\n &--of-four-early {\r\n @media (min-width: 22.4em) and (max-width: 59.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 60em) {\r\n @include o-grid(4)\r\n }\r\n }\r\n\r\n &--swipeable {\r\n @media (max-width: 54.9375em) {\r\n @include breakout('gutter');\r\n flex-wrap: nowrap;\r\n overflow-x: scroll;\r\n scroll-snap-type: x mandatory;\r\n scroll-padding: var(--gutter);\r\n -webkit-overflow-scrolling: touch;\r\n\r\n & > * {\r\n flex: 0 0 auto;\r\n max-width: 23em;\r\n width: calc(85vw - var(--gutter)2.333); // !important\r\n scroll-snap-align: start;\r\n scroll-snap-stop: always;\r\n }\r\n\r\n & > + * {\r\n margin-left: var(--gutter) !important;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--4\\/7 > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 2) {\r\n width: grid-column(7)\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--8\\/4 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/4-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(8);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--4\\/8 > :nth-child(2n + 1),\r\n &--4\\/7 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 1) {\r\n width: grid-column(4);\r\n }\r\n\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n margin-left: grid-gutter();\r\n margin-right: 0;\r\n }\r\n\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n max-width: grid-column-px(8);\r\n }\r\n\r\n &[class=\"switch\"] > :nth-child(2n + 1) {\r\n order: 1;\r\n }\r\n\r\n &--layout {\r\n margin-bottom: 0;\r\n\r\n & > :nth-last-child(1),\r\n & > :nth-last-child(2) {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &--push {\r\n justify-content: space-between;\r\n }\r\n\r\n &--pull {\r\n justify-content: flex-start;\r\n }\r\n\r\n &--float {\r\n display: block;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 1),\r\n &--float[class=\"switch\"] > :nth-child(2n + 2) {\r\n float: left;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 2),\r\n &--float[class=\"switch\"] > :nth-child(2n + 1) {\r\n float: right;\r\n }\r\n }\r\n\r\n @media (min-width: 70em) {\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(9);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2) {\r\n width: grid-column(3);\r\n }\r\n }\r\n}\r\n",".c-accordion {\r\n &__item {\r\n @include padding('xs',0);\r\n \r\n & + & {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n }\r\n }\r\n \r\n &__title {\r\n @include step(1);\r\n @include padding('xs',0);\r\n cursor: pointer;\r\n font-weight: weight('bold');\r\n position: relative;\r\n\r\n &:before {\r\n background-image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 1V17M1 9H17\" stroke=\"%23252525\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n content: \"\";\r\n display: block;\r\n height: 1em;\r\n left: 0;\r\n position: absolute;\r\n width: 1em;\r\n }\r\n\r\n .c-accordion__item--open &:before {\r\n background-image: url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H9\" stroke=\"%23252525\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');\r\n transform: scaleX(1.75);\r\n }\r\n }\r\n\r\n &__content {\r\n margin-left: 0;\r\n @include padding-bottom('xs');\r\n display: none;\r\n\r\n .c-accordion__item--open & {\r\n display: block;\r\n }\r\n }\r\n\r\n &__title,\r\n &__content {\r\n @include padding-left('l-xl');\r\n }\r\n}",".c-alert {\r\n --alert-border: #{color('utility-blue')};\r\n border-left: 4px solid color('utility-blue');\r\n border-left-color: var(--alert-border);\r\n\r\n background: color('utility-blue', 'step-3');\r\n @include padding('s', 's', 's', 'xl');\r\n position: relative;\r\n\r\n &.mp p {\r\n line-height: lh('prose');\r\n }\r\n\r\n & > + * {\r\n margin-top: 1em;\r\n }\r\n\r\n a {\r\n color: var(--alert-border);\r\n text-decoration: underline;\r\n\r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n & .c-icon {\r\n position: absolute;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n margin-top: 0;\r\n font-size: 1.5rem;\r\n color: black;\r\n color: var(--alert-border);\r\n }\r\n\r\n pre {\r\n background: transparent;\r\n padding: 0;\r\n max-width: 100%;\r\n overflow-x: auto;\r\n @include step(-1);\r\n }\r\n\r\n &--multiline {\r\n @include padding('s', 's', 's', 0);\r\n\r\n &> :not(.c-icon) {\r\n @include padding-left('s');\r\n\r\n &:first-child {\r\n color: var(--alert-border);\r\n @include padding-left('xl');\r\n font-size: inherit;\r\n line-height: lh('prose');\r\n }\r\n }\r\n }\r\n\r\n &--warning {\r\n background: color('utility-orange', 'step-3');\r\n --alert-border: #{color('utility-orange')};\r\n }\r\n \r\n &--success {\r\n background: color('green', 'step-3');\r\n --alert-border: #{color('green')};\r\n }\r\n\r\n &--error {\r\n background: color('red', 'step-3');\r\n --alert-border: #{color('red')};\r\n }\r\n}",".c-breadcrumb {\r\n &__list {\r\n @include padding-bottom(\"s-m\");\r\n display: flex;\r\n overflow-x: auto;\r\n }\r\n\r\n &__item {\r\n font-size: var(--step--2);\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n\r\n .c-icon {\r\n @include margin-right(\"3xs\");\r\n @include margin-left(\"3xs\");\r\n color: color('grey', 'step-1');\r\n transform: rotate(270deg);\r\n }\r\n }\r\n\r\n &__link {\r\n color: color('utility-blue', 'step-1');\r\n text-decoration: underline;\r\n \r\n &:hover {\r\n color: color('utility-blue', 'step-1');\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &__current {\r\n color: color('grey', 'step-1');\r\n }\r\n\r\n // color: color('utility-blue');\r\n\r\n // &__wrap {\r\n // position: relative;\r\n\r\n // &:after {\r\n // content: '';\r\n // background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));\r\n // position: absolute;\r\n // z-index: 1;\r\n // height: 100%;\r\n // right: 0;\r\n // top: 0;\r\n // @include space('width', 'l');\r\n\r\n // @media (min-width: $wrapper) {\r\n // display: none;\r\n // }\r\n // }\r\n // }\r\n\r\n // &__list {\r\n // @include padding-bottom('m-l');\r\n // @include margin-bottom('m-l');\r\n // border-bottom: 1px solid color('petrol', 'step-2');\r\n // white-space: nowrap;\r\n // overflow-x: auto;\r\n // display: flex;\r\n\r\n // & > + * {\r\n // @include margin-left('m-l');\r\n // }\r\n // }\r\n}\r\n",".c-button--reset {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n font-family: $font-stack;\r\n}\r\n\r\n%c-button {\r\n // Reset\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n font-family: $font-stack;\r\n text-align: center;\r\n\r\n // Styles\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 6px;\r\n background-color: color(\"green\");\r\n font-weight: weight(\"bold\");\r\n font-size: 1.125rem;\r\n padding: 0.777em 1.5em;\r\n transition: 300ms background-color, 300ms color, 300ms box-shadow;\r\n letter-spacing: ls(\"base\");\r\n color: color(\"white\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"green\", \"step--1\");\r\n text-decoration: none;\r\n color: color(\"white\");\r\n }\r\n\r\n &[disabled],\r\n [disabled] & {\r\n filter: saturate( 0.4 );\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n}\r\n\r\n.mp.c-button,\r\n.c-button {\r\n @extend %c-button;\r\n\r\n &--wide {\r\n width: 100%;\r\n }\r\n\r\n &--tight {\r\n padding-right: 0.75em;\r\n padding-left: 0.75em;\r\n }\r\n\r\n &--inline {\r\n display: inline-flex;\r\n margin-right: 0.5em;\r\n margin-bottom: 0.5em;\r\n vertical-align: top;\r\n }\r\n\r\n &--petrol {\r\n background-color: color(\"petrol\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"petrol\", \"step-1\");\r\n }\r\n }\r\n\r\n &--blue {\r\n background-color: color(\"blue\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--red {\r\n background-color: color(\"red\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"red\", \"step--1\");\r\n }\r\n }\r\n\r\n &--white {\r\n background-color: color(\"white\");\r\n font-weight: weight();\r\n color: color(\"utility-blue\");\r\n padding: 0.777em 1em;\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"petrol\", \"step-3\");\r\n color: color(\"utility-blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--utility-blue {\r\n background-color: color(\"utility-blue\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"utility-blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--outline-white {\r\n background: transparent;\r\n color: color(\"white\");\r\n box-shadow: inset 0 0 0 1px color(\"white\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"white\");\r\n color: color(\"petrol\");\r\n }\r\n }\r\n\r\n &--outline-green {\r\n background: transparent;\r\n color: color(\"green\");\r\n box-shadow: inset 0 0 0 1px color(\"green\");\r\n\r\n &:focus,\r\n &:hover {\r\n box-shadow: inset 0 0 0 1px color(\"green\", \"step--1\");\r\n background-color: color(\"green\", \"step--1\");\r\n color: color(\"white\");\r\n }\r\n }\r\n\r\n &--small {\r\n @include step(-1);\r\n padding: 0.5em 1em;\r\n }\r\n\r\n &--loading {\r\n color: transparent;\r\n transition: color .3s ease;\r\n\r\n &:after {\r\n content: '⌛';\r\n color: color(\"white\");\r\n position: absolute;\r\n }\r\n\r\n @media (prefers-reduced-motion:no-preference) {\r\n &:after {\r\n content: '';\r\n animation: spin 1.2s ease infinite;\r\n border-radius: 50%;\r\n border: 3px solid #3336;\r\n border-top-color: color(\"white\");\r\n display: block;\r\n height: 1em;\r\n width: 1em;\r\n }\r\n }\r\n }\r\n}","$angle: 225deg;\r\n\r\n.c-campaign {\r\n @include cutoff;\r\n \r\n position: relative;\r\n max-width: calc(#{$wrapper}) !important;\r\n padding: 0 !important;\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n }\r\n \r\n &__content {\r\n background: color('grey');\r\n background: linear-gradient($angle, color('grey', 'step--2'), color('grey'));\r\n color: color('white');\r\n width: 100%;\r\n @include padding('m-l');\r\n align-self: center;\r\n }\r\n\r\n &__video {\r\n z-index: 1;\r\n align-self: center;\r\n }\r\n\r\n &__image {\r\n z-index: 0;\r\n\r\n img {\r\n width: 100%;\r\n }\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &--petrol {\r\n \r\n .c-campaign__content {\r\n background: color('petrol', 'step-2');\r\n background: linear-gradient($angle, color('petrol', 'step-2'), color('petrol', 'step-3'));\r\n color: color('grey');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('petrol');\r\n }\r\n }\r\n\r\n &--blue {\r\n \r\n .c-campaign__content {\r\n background: color('blue', 'step-3');\r\n background: linear-gradient($angle, color('blue', 'step-2'), color('blue', 'step-3'));\r\n color: color('grey');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('blue', 'step--1');\r\n }\r\n }\r\n\r\n &--orange {\r\n \r\n .c-campaign__content {\r\n background: color('utility-orange', 'step-2');\r\n background: linear-gradient($angle, color('utility-orange', 'step-2'), color('utility-orange', 'step-3'));\r\n color: color('grey', 'step--1');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('utility-orange', 'step--1');\r\n }\r\n }\r\n\r\n @media (min-width:35em) {\r\n display: flex;\r\n\r\n &--switch &__content {\r\n order: -1;\r\n }\r\n\r\n &__video,\r\n &__image {\r\n position: relative;\r\n width: 50%;\r\n\r\n & + .c-campaign__content {\r\n width: 50%;\r\n }\r\n }\r\n\r\n &__image {\r\n img {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n z-index: 1;\r\n object-fit: cover;\r\n }\r\n }\r\n }\r\n}",".c-card {\r\n background: color(\"white\");\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n\r\n &--alt,\r\n &--event {\r\n background: color(\"petrol\", \"step-3\");\r\n\r\n &__specs {\r\n color: color(\"grey\", \"step-1\")\r\n }\r\n }\r\n\r\n &--featured {\r\n background: color(\"petrol\");\r\n color: color(\"petrol\", \"step-2\");\r\n\r\n .c-card__meta,\r\n .mp {\r\n color: inherit;\r\n }\r\n\r\n .c-button,\r\n .c-card__title {\r\n color: color(\"white\");\r\n }\r\n }\r\n\r\n &--featured &__day {\r\n @include step(5);\r\n color: color(\"white\");\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n &--featured &__month {\r\n @include step(3);\r\n color: color(\"petrol\", \"step-2\");\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n &--featured &__wrapper,\r\n &--featured &__primary {\r\n flex-grow: 1;\r\n }\r\n\r\n &--featured {\r\n .c-button {\r\n width: 100%;\r\n margin: 0;\r\n }\r\n }\r\n\r\n &--featured &__footer {\r\n @include margin-top(\"auto\");\r\n @include padding-top(\"s\");\r\n }\r\n\r\n &__wrapper,\r\n &__primary {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n &--layout-multi .c-card__wrapper,\r\n &__primary {\r\n // Required for IE\r\n flex-shrink: 0;\r\n width: 100%;\r\n }\r\n\r\n &--layout-multi {\r\n .c-card__wrapper {\r\n @include gap(\"s-l\");\r\n }\r\n \r\n &.c-card--featured.c-card--size-large.c-card--has-image {\r\n .c-card__wrapper {\r\n padding: 0;\r\n }\r\n\r\n .c-card__primary {\r\n @include padding('s-m');\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n .c-card__wrapper {\r\n flex-direction: row;\r\n }\r\n\r\n .c-card__image,\r\n .c-card__primary:nth-child(2) {\r\n width: calc(50% - 18px);\r\n }\r\n\r\n &.c-card--small,\r\n &.c-card--size-medium {\r\n .c-card__image {\r\n max-width: 152px;\r\n width: 30%;\r\n }\r\n\r\n .c-card__primary:nth-child(2) {\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n &.c-card--size-large.c-card--featured {\r\n img {\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n @media only screen and (min-width: 55em) {\r\n &:not(.c-card--switch) .c-card__primary {\r\n padding-left: 0 !important;\r\n }\r\n \r\n &.c-card--switch .c-card__primary {\r\n padding-right: 0 !important;\r\n }\r\n }\r\n }\r\n\r\n .c-card__shop-footer > :first-child {\r\n width: 30%;\r\n max-width: 152px;\r\n display: block;\r\n @include margin-right(\"l\");\r\n }\r\n }\r\n }\r\n \r\n &--layout-multi-30-70 {\r\n .c-card__image {\r\n width: calc(30% - 18px) !important;\r\n width: calc(30% - var(--space-s-m)) !important;\r\n }\r\n\r\n @media (min-width: 55em) {\r\n .c-card__primary:nth-child(2) {\r\n width: calc(70% - 18px) !important;\r\n width: calc(70% - var(--space-s-m)) !important;\r\n }\r\n }\r\n }\r\n\r\n &--layout-multi-40-60 {\r\n @media (min-width: 55em) {\r\n .c-card__image {\r\n width: calc(60% - 18px) !important;\r\n width: calc(60% - var(--space-s-m)) !important;\r\n }\r\n\r\n .c-card__primary {\r\n width: calc(40% - 18px) !important;\r\n width: calc(40% - var(--space-s-m)) !important;\r\n }\r\n }\r\n }\r\n\r\n &--switch {\r\n @media (min-width: 55em) {\r\n .c-card__wrapper {\r\n flex-direction: row-reverse;\r\n }\r\n }\r\n }\r\n\r\n &__primary {\r\n @include flow(\"s\");\r\n }\r\n\r\n &--layout-single &__primary,\r\n &--layout-multi &__wrapper {\r\n @include padding(\"s-m\");\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n &--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {\r\n @include padding-top(\"m-l\");\r\n }\r\n\r\n &__datetime {\r\n display: block;\r\n font-weight: weight(\"bold\");\r\n @include step(1);\r\n color: color(\"petrol\", \"step-1\");\r\n }\r\n\r\n &__content {\r\n @include step(-1);\r\n }\r\n\r\n &__title {\r\n @include step(2);\r\n }\r\n\r\n img {\r\n width: 100%;\r\n }\r\n\r\n &--size-small &__title,\r\n &--size-medium &__title {\r\n @include step(0);\r\n }\r\n\r\n &--size-medium .c-twi {\r\n @include step(-1);\r\n }\r\n\r\n &--bordered {\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n }\r\n\r\n &--float-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 38em) {\r\n &--float-right {\r\n @include margin-left('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n }\r\n\r\n &__tag {\r\n @include padding(\"3xs\", \"2xs\");\r\n @include step(-1);\r\n background: color(\"blue\", \"step-2\");\r\n color: color(\"petrol\");\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n &__tag + &__wrapper > &__primary {\r\n @include margin-top(\"xs\");\r\n }\r\n\r\n &__tag + &__wrapper > &__image + &__primary {\r\n @include margin-top(0);\r\n }\r\n\r\n &--no-height-match {\r\n align-self: flex-start;\r\n }\r\n\r\n &__specs {\r\n @include flow(\"xs\");\r\n\r\n dt {\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n dt,\r\n dd {\r\n padding: 0;\r\n margin: 0;\r\n display: block;\r\n }\r\n\r\n dl {\r\n @include flow(\"3xs\");\r\n }\r\n }\r\n\r\n &--inline-specs &__specs {\r\n dt,\r\n dd {\r\n display: inline;\r\n }\r\n\r\n dd:not(:last-child):after {\r\n content: \", \";\r\n }\r\n }\r\n\r\n &--2-column-specs &__specs {\r\n dl {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(min-content, max-content));\r\n @include space('gap', '3xs', '2xs');\r\n }\r\n dt, dd {\r\n margin: 0;\r\n }\r\n dt {\r\n grid-column: 1;\r\n }\r\n dd {\r\n grid-column: 2;\r\n }\r\n }\r\n\r\n .o-prose li + li {\r\n @include margin-top(\"3xs\");\r\n }\r\n\r\n &__meta {\r\n color: color(\"petrol\", \"step-1\");\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n @include step(-1);\r\n\r\n & > :not(:last-child) {\r\n position: relative;\r\n padding-right: 1.5em;\r\n\r\n &:after {\r\n content: \"\";\r\n position: absolute;\r\n height: 18px;\r\n right: 9px;\r\n width: 1px;\r\n top: 50%;\r\n background: color(\"petrol\", \"step-1\");\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n .mp {\r\n font-size: inherit;\r\n }\r\n\r\n .c-icon {\r\n font-size: 0.875em;\r\n }\r\n\r\n & + .c-card__title {\r\n @include margin-top(\"s\");\r\n }\r\n }\r\n\r\n &__corner {\r\n position: absolute;\r\n color: color(\"white\");\r\n right: 0;\r\n top: 0;\r\n @include space(\"border-width\", \"l\");\r\n border-color: color(\"green\") color(\"green\") transparent transparent;\r\n border-style: solid;\r\n width: 0;\r\n height: 0;\r\n text-align: right;\r\n font-size: 1.5rem;\r\n transition: 300ms color;\r\n z-index: 1;\r\n\r\n .c-icon {\r\n position: relative;\r\n top: -27px;\r\n }\r\n }\r\n\r\n &:hover &__corner {\r\n color: rgba(255, 255, 255, 0.75);\r\n }\r\n\r\n &__series {\r\n border-top: 1px solid color(\"petrol\", \"step-2\");\r\n @include padding(\"s\", \"m\");\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n &__shop-footer {\r\n @include padding(\"s\", \"s-m\");\r\n background-color: color(\"petrol\", \"step-3\");\r\n display: flex;\r\n\r\n &-space {\r\n @include flow(\"3xs\");\r\n\r\n & > * {\r\n display: block;\r\n }\r\n }\r\n\r\n &-form {\r\n align-items: flex-end;\r\n }\r\n\r\n input {\r\n width: 72px;\r\n }\r\n }\r\n\r\n &__small {\r\n @include step(-1);\r\n color: color(\"petrol\", \"step-1\");\r\n }\r\n\r\n &__flex {\r\n display: flex;\r\n flex-wrap: wrap;\r\n @include gap(\"s-l\");\r\n }\r\n\r\n &--event.c-card--has-image {\r\n @extend .c-card--switch;\r\n\r\n &.c-card--has-tag .c-card__tag {\r\n z-index: 1;\r\n }\r\n\r\n .c-card__wrapper {\r\n @include padding(0);\r\n\r\n .c-card__primary {\r\n @include padding(\"s-m\");\r\n }\r\n\r\n .c-card__image {\r\n position: relative;\r\n width: 100%;\r\n\r\n img {\r\n max-height: 200px;\r\n height: 100%;\r\n object-fit: cover;\r\n aspect-ratio: 16 / 9;\r\n }\r\n }\r\n }\r\n \r\n @media (min-width: 55em) {\r\n .c-card__primary {\r\n width: calc(70% - 18px);\r\n width: calc(70% - var(--space-s-m));\r\n }\r\n\r\n .c-card__image {\r\n width: calc(30% - 18px);\r\n width: calc(30% - var(--space-s-m));\r\n\r\n img {\r\n max-height: none !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--event-series {\r\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);\r\n\r\n .c-card__image img {\r\n max-height: 252px;\r\n aspect-ratio: 2/1;\r\n object-fit: cover;\r\n }\r\n\r\n .c-card__wrapper,\r\n .c-card__primary {\r\n height: 100%;\r\n }\r\n\r\n .c-card__primary {\r\n flex-shrink: 1;\r\n }\r\n\r\n .c-card__header > * + * {\r\n @include margin('s', 0, 0, 0);\r\n }\r\n\r\n .c-card__datetime {\r\n font-size: var(--step--1);\r\n font-weight: normal;\r\n }\r\n\r\n .c-card__title {\r\n font-size: var(--step-0);\r\n }\r\n\r\n .c-card__footer .u-link,\r\n .c-card__footer .u-link svg {\r\n color: color('utility-blue', 'step-1');\r\n font-size: var(--step--1);\r\n }\r\n }\r\n}\r\n\r\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper {\r\n @include gap(\"s\");\r\n flex-direction: column;\r\n\r\n .c-card__primary {\r\n width: 100%;\r\n }\r\n\r\n .c-card__image {\r\n width: 100%;\r\n }\r\n}\r\n\r\n// IE11 fix\r\n// This forces IE11 to use display:block instead of flex for single-column cards\r\n_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }",".c-industry-card {\r\n color: color('utility-blue');\r\n\r\n &__link {\r\n display: block;\r\n }\r\n\r\n &:hover .c-h--reset {\r\n text-decoration: underline;\r\n }\r\n\r\n img {\r\n width: 100%;\r\n }\r\n}\r\n",".c-product-comparison-card {\r\n @extend .u-flow--2xs;\r\n background: color('white');\r\n display: flex;\r\n flex-flow: column;\r\n flex-grow: 1;\r\n border: 1px solid color('petrol', 'step-2');\r\n \r\n & > * + * {\r\n @include margin-top('2xs');\r\n }\r\n\r\n &__body {\r\n @include padding('s-m');\r\n display: flex;\r\n flex-flow: column;\r\n flex-grow: 1;\r\n \r\n & > * + * {\r\n @include margin-top('xs');\r\n }\r\n }\r\n\r\n &__heading {\r\n @extend .c-h;\r\n @extend .c-h--step-1;\r\n }\r\n\r\n &__features-list {\r\n @include margin-top('2xs');\r\n list-style: none;\r\n\r\n &-heading {\r\n @include margin-top('s');\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n & > * + * {\r\n @include margin-top('3xs');\r\n }\r\n }\r\n\r\n &__feature {\r\n &--tick {\r\n svg {\r\n color: color('green');\r\n }\r\n }\r\n\r\n &--cross {\r\n color: color('grey', 'step-2');\r\n }\r\n }\r\n\r\n &__footer {\r\n @include margin-top('auto');\r\n @include padding-top('s');\r\n display: flex;\r\n flex-flow: row;\r\n flex-wrap: wrap;\r\n gap: var(--space-2xs);\r\n \r\n & > * {\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n &__image {\r\n height: 10em;\r\n order: -1;\r\n aspect-ratio: 16/9;\r\n\r\n img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: contain;\r\n }\r\n }\r\n}\r\n",".c-comparison-table__desktop {\r\n overflow: auto;\r\n width: 100%;\r\n\r\n .c-comparison-table {\r\n width: calc(100% - 1px);\r\n\r\n @media (min-width: 60em) {\r\n tbody > tr > :first-child {\r\n min-width: 300px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.c-comparison-table__mobile {\r\n display: none;\r\n\r\n & > * + * {\r\n @include margin-top('m-l');\r\n }\r\n\r\n .c-comparison-table {\r\n width: 100%;\r\n table-layout: fixed;\r\n\r\n &__product {\r\n img {\r\n @include margin(0);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.c-comparison-table {\r\n @include step(-1);\r\n border-collapse: collapse;\r\n\r\n thead {\r\n th {\r\n @include padding(0, '2xs');\r\n border: 0;\r\n text-align: center;\r\n vertical-align: top;\r\n }\r\n }\r\n\r\n &__product {\r\n @extend .u-flow--2xs;\r\n\r\n img {\r\n @include space('max-height', '3xl');\r\n @include margin(0, 'auto');\r\n object-fit: contain;\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n p {\r\n font-weight: 400;\r\n }\r\n }\r\n \r\n &__buttons {\r\n @include margin(0, 'auto');\r\n @include padding-bottom('xs');\r\n margin-top: 1.25rem !important;\r\n display: inline-flex;\r\n flex-direction: column;\r\n\r\n & * + * {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n &__title { \r\n th {\r\n @include padding-top('xs');\r\n text-align: left;\r\n \r\n span {\r\n @include padding('2xs');\r\n background-color: color('grey');\r\n color: color('white'); \r\n max-width: 20em;\r\n width: 100%;\r\n display: inline-block;\r\n position: relative;\r\n text-align: center;\r\n font-weight: 600;\r\n\r\n &::after {\r\n @include space('border-width', 'xs', 0, 0, 'xs');\r\n content: \"\";\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n border-color: color('grey', 'step-3') transparent transparent transparent;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n tbody {\r\n tr {\r\n &:first-child th {\r\n @include padding(0);\r\n vertical-align: bottom;\r\n }\r\n \r\n &:not(.c-comparison-table__title) {\r\n height: 48px;\r\n }\r\n\r\n td:first-child {\r\n text-align: left;\r\n font-weight: 600;\r\n }\r\n\r\n td {\r\n @include padding('2xs');\r\n background-color: color('white');\r\n border: 2px solid color('grey', 'step-3');\r\n border-right: 0;\r\n border-left: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .c-icon--tick {\r\n color: color('green');\r\n }\r\n \r\n .c-icon--cross {\r\n color: color('grey', 'step-2');\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &__mobile {\r\n display: block;\r\n }\r\n\r\n &__desktop {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 640px) {\r\n .c-comparison-table thead th:nth-last-child(1):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {\r\n width: 85%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(2):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {\r\n width: 42.5%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(3):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {\r\n width: 28.33333%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(4):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {\r\n width: 21.25%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(5):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {\r\n width: 17%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(6):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {\r\n width: 14.16667%;\r\n }\r\n}\r\n",".c-embed {\r\n position: relative;\r\n\r\n &__wrapper {\r\n padding-bottom: 56.625%;\r\n position: relative;\r\n height: 0;\r\n\r\n & > * {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n }\r\n }\r\n}",".c-featured-article-card {\r\n position: relative;\r\n background: color('petrol', 'step-3');\r\n\r\n &__content {\r\n @include padding('s-l');\r\n }\r\n\r\n .c-post-meta {\r\n @include margin('s', 0);\r\n }\r\n\r\n @media (min-width: 45em) {\r\n display: flex;\r\n\r\n &__content {\r\n flex-basis: 50%;\r\n }\r\n\r\n &__image {\r\n position: relative;\r\n flex-basis: 50%;\r\n\r\n img {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n object-fit: cover;\r\n }\r\n }\r\n }\r\n}\r\n",".c-features {\r\n max-width: $wrapper;\r\n @include step(-1);\r\n\r\n &__wrapper {\r\n overflow: auto;\r\n width: 100%;\r\n }\r\n \r\n &__wrapper .c-table {\r\n width: 100%;\r\n table-layout: fixed;\r\n\r\n @media (min-width: 60em) {\r\n min-width: $wrapper;\r\n }\r\n }\r\n\r\n &__title {\r\n @include step();\r\n }\r\n\r\n &__product {\r\n padding-bottom: 0 !important;\r\n }\r\n\r\n &__introduction td {\r\n color: color('green');\r\n font-weight: weight('bold');\r\n @include padding-top('2xs');\r\n }\r\n\r\n &__label-text td {\r\n @include flow('3xs');\r\n\r\n span {\r\n display: block;\r\n }\r\n }\r\n\r\n &__checklist-title th {\r\n color: color('grey') !important;\r\n background: transparent !important;\r\n padding-bottom: 0 !important;\r\n }\r\n\r\n &__checklist {\r\n td {\r\n padding-top: var(--space-3xs) !important;\r\n padding-bottom: 0 !important;\r\n vertical-align: middle;\r\n line-height: 20px;\r\n\r\n svg {\r\n height: 16px;\r\n width: 16px;\r\n vertical-align: middle;\r\n display: inline-block;\r\n margin-bottom: 2px;\r\n }\r\n }\r\n\r\n &--last {\r\n td {\r\n padding-bottom: var(--space-s) !important;\r\n }\r\n }\r\n }\r\n\r\n &__mobile {\r\n display: none;\r\n\r\n & > * + * {\r\n @include margin-top('m-l');\r\n }\r\n\r\n .c-table {\r\n table-layout: fixed;\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &__mobile {\r\n display: block;\r\n }\r\n\r\n &__wrapper {\r\n display: none;\r\n }\r\n }\r\n\r\n thead img {\r\n @include space('max-height', '3xl');\r\n object-fit: contain;\r\n }\r\n}\r\n",".c-filter-search {\r\n background: color('blue', 'step-2');\r\n @include padding('m-l');\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n @include gap('s');\r\n\r\n & > * {\r\n flex-grow: 1;\r\n }\r\n \r\n &__fields {\r\n background-color: color('white');\r\n display: flex;\r\n max-width: 792px;\r\n flex-grow: 8;\r\n\r\n fieldset {\r\n border: 0;\r\n font-size: 0;\r\n }\r\n\r\n .c-icon {\r\n font-size: 1.375rem;\r\n }\r\n\r\n @media only screen and (min-width: 30em) {\r\n min-width: 360px;\r\n }\r\n }\r\n}\r\n",".c-footer {\r\n background: color('petrol', 'step--1');\r\n color: color('white');\r\n @include step(-1);\r\n margin-top: auto;\r\n\r\n a:hover {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &__primary {\r\n @include padding-bottom(s-m);\r\n @include padding-top(s-l);\r\n }\r\n\r\n &.mp &__h-links,\r\n &.mp &__sections,\r\n &.mp &__sections ul,\r\n &.mp &__sections h4 {\r\n line-height: lh('prose');\r\n }\r\n\r\n &__sections {\r\n @extend .o-grid, .o-grid--of-four;\r\n @include margin-bottom(0);\r\n\r\n & > li {\r\n @include margin-bottom('gutter');\r\n }\r\n\r\n ul li {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n &__subtitle {\r\n @include padding-bottom('s');\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n width: 15px;\r\n height: 1px;\r\n background: color('petrol', 'step-1');\r\n position: absolute;\r\n left: 0;\r\n bottom: 4px;\r\n }\r\n }\r\n\r\n &__identity {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n &__logo {\r\n display: block;\r\n max-width: 216px;\r\n width: 60%;\r\n\r\n img {\r\n @include margin-right('gutter');\r\n filter: saturate(0) brightness(10);\r\n }\r\n }\r\n\r\n &__social {\r\n display: flex;\r\n @include margin-top('2xs');\r\n\r\n li + li {\r\n @include margin-left('s-m');\r\n }\r\n\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n &__secondary {\r\n background: color('petrol', 'step--2');\r\n @include padding('xs', 0);\r\n\r\n span a {\r\n color: color('blue', 'step-1');\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .o-prose li a {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &__h-links {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n @media (min-width: 43em) {\r\n &__secondary .u-wrap {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n &__h-links {\r\n display: flex;\r\n @include margin(0.5rem, 's-m', 0.5rem, 0);\r\n \r\n li + li {\r\n @include margin-left('s');\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 1410px) {\r\n &__secondary {\r\n clip-path: polygon(0% 100%, 68px 0%, 100% 0%, 100% 100%, 68px 100%);\r\n }\r\n }\r\n}\r\n\r\n// Temporary fix until RichTextRegion is fixed\r\n.rich-text-region:has( + .c-footer ) {\r\n @include margin-bottom('l-xl');\r\n}",".c-gallery {\r\n max-height: 95vh;\r\n\r\n img {\r\n cursor: pointer;\r\n }\r\n\r\n &__main {\r\n position: relative;\r\n\r\n & > * {\r\n width: 100%;\r\n\r\n img {\r\n aspect-ratio: 16 / 9;\r\n display: block;\r\n margin: 0 auto;\r\n max-height: calc(95vh - 90px);\r\n object-fit: contain;\r\n }\r\n \r\n &:not(.active) {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &__thumbnails {\r\n @include padding-bottom('s');\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 2%;\r\n gap: max(8px, 2%);\r\n \r\n & > * {\r\n background: color('grey', 'step-3');\r\n max-width: 10.75%;\r\n max-width: max(var(--space-xl), 10.75%);\r\n aspect-ratio: 16 / 9;\r\n\r\n img {\r\n height: 100%;\r\n opacity: 0.8;\r\n object-fit: cover;\r\n width: 100%;\r\n }\r\n\r\n &.active img {\r\n opacity: 0.25;\r\n }\r\n }\r\n }\r\n}",".c-header {\r\n background-color: color('white');\r\n\r\n &__wrap {\r\n @include padding-top('gutter');\r\n position: relative;\r\n }\r\n\r\n &__logo {\r\n position: relative;\r\n z-index: 50;\r\n display: block;\r\n max-width: 216px;\r\n width: 60%;\r\n\r\n img {\r\n width: 100%;\r\n }\r\n }\r\n\r\n &__search {\r\n position: relative;\r\n\r\n button:hover,\r\n button:focus {\r\n background-color: color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n @media (min-width: 500px) {\r\n &__corporate ul {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n &__wrap {\r\n @include padding-bottom('gutter');\r\n }\r\n\r\n &__primary {\r\n flex-direction: column;\r\n align-items: stretch;\r\n background: color('petrol');\r\n color: color('white');\r\n position: fixed;\r\n @include padding('s-m');\r\n z-index: 100;\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n padding-top: 80px;\r\n padding-top: calc(60px + var(--space-s-m));\r\n\r\n opacity: 0;\r\n visibility: hidden;\r\n\r\n &:target {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: 300ms opacity, 300ms visibility;\r\n }\r\n\r\n .c-navicon i {\r\n background: color('white');\r\n }\r\n }\r\n\r\n &__corporate {\r\n order: 1;\r\n @include margin('s', 0);\r\n @include step(-2);\r\n font-weight: weight('semi');\r\n\r\n ul {\r\n align-items: center;\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-left:-6px;\r\n margin-right:-6px;\r\n }\r\n\r\n li {\r\n @include margin('xs-s', '3xs-m');\r\n }\r\n\r\n .c-input--select {\r\n width: auto;\r\n color: inherit;\r\n background-color: transparent;\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%23ffffff\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n background-position: center right .4em;\r\n @include padding(0, 'm', '3xs', 0);\r\n display: inline-block;\r\n border: none;\r\n border-bottom: 1px solid #3D7B87;\r\n margin-bottom: -4.5px;\r\n font-size: inherit;\r\n\r\n option {\r\n color: color('grey');\r\n }\r\n }\r\n }\r\n\r\n &__search {\r\n order: 2;\r\n color: color('grey');\r\n }\r\n\r\n &__site {\r\n order: -1;\r\n flex: 1;\r\n @include step(1);\r\n\r\n li + li {\r\n @include margin-top('s');\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 768px) {\r\n overflow: hidden;\r\n \r\n .c-navicon {\r\n display: none;\r\n }\r\n\r\n &__primary {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n margin-top: -71px;\r\n }\r\n\r\n &__search {\r\n margin-bottom: 8px;\r\n margin-bottom: calc(var(--gutter) - 10px);\r\n width: 288px;\r\n }\r\n\r\n &__corporate {\r\n color: color('petrol');\r\n @include step(-1);\r\n margin-bottom: 8px;\r\n margin-bottom: calc(var(--space-xs) + 3px);\r\n\r\n a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n ul {\r\n display: flex;\r\n }\r\n\r\n li + li {\r\n @include margin-left('s');\r\n }\r\n\r\n .c-input--select {\r\n width: auto;\r\n color: inherit;\r\n background-color: transparent;\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%2300768d\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n @include padding(0, 'l', 0, 0);\r\n display: inline-block;\r\n border: none;\r\n @include step(-1);\r\n }\r\n }\r\n\r\n &__site {\r\n color: color('white');\r\n font-weight: weight('semi');\r\n position: relative;\r\n z-index: 1;\r\n padding: 14px 0;\r\n padding: calc(var(--space-xs) + 2px) 0;\r\n @include step(-1);\r\n align-self: flex-start;\r\n width: 100%; \r\n \r\n &:after {\r\n background: linear-gradient(270deg, \r\n color('green') -12%, \r\n color('blue') 11%, \r\n color('petrol') 43%, \r\n color('petrol') 70%, \r\n color('petrol', 'step--1') 100%);\r\n content: '';\r\n position: absolute;\r\n width: 100vw;\r\n height: 100%;\r\n left: 50%;\r\n top: 0;\r\n transform: translateX(-50%);\r\n z-index: -2;\r\n\r\n // Hack for IE11\r\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { \r\n background: linear-gradient(270deg, \r\n color('green') -12%, \r\n color('blue') 11%, \r\n color('petrol') 43%, \r\n color('petrol', 'step--1') 100%);\r\n }\r\n }\r\n\r\n ul {\r\n display: flex;\r\n }\r\n\r\n li + li {\r\n @include margin-left('s-m');\r\n }\r\n\r\n &--with-home > ul > li:first-child {\r\n border-right: 1px solid rgba(255, 255, 255, 0.25);\r\n @include padding-right('s');\r\n }\r\n\r\n a {\r\n @include padding('xs', 0);\r\n display: block;\r\n\r\n &:hover,\r\n &:focus {\r\n opacity: 0.75;\r\n }\r\n }\r\n }\r\n\r\n &__site li + &__push {\r\n margin-left: auto;\r\n }\r\n }\r\n\r\n @media (min-width: 1500px) {\r\n &__site:after {\r\n clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);\r\n }\r\n }\r\n}\r\n\r\n.c-navicon {\r\n position: absolute;\r\n @include space('right', 's-m');\r\n @include space('top', 's-m');\r\n transform: translateX(25%);\r\n height: 60px;\r\n width: 60px;\r\n\r\n i {\r\n position: absolute;\r\n transform: translate3d(-50%, -50%, 0);\r\n background: color('blue', 'step--1');\r\n border-radius: 2px;\r\n height: 2px;\r\n width: 22px;\r\n left: 50%;\r\n top: 50%;\r\n\r\n &:nth-child(1) {\r\n transform: translate3d(-50%, -50%, 0) translateY(-7px);\r\n }\r\n\r\n &:nth-child(3) {\r\n transform: translate3d(-50%, -50%, 0) translateY(7px);\r\n }\r\n }\r\n}\r\n",":root {\r\n --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );\r\n --gutter-width: calc( (100vw - var(--body-width)) / 2 );\r\n --text-width: min(100vw, 51.75rem);\r\n --hero-gap: calc( var(--body-width) - var(--text-width));\r\n --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) .8 );\r\n}\r\n\r\n.c-hero {\r\n background-color: color('blue', 'step-2');\r\n background: linear-gradient(to top right, color('petrol', 'step-3'), color('blue', 'step-2'));\r\n color: color('petrol');\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n\r\n &.mp .u-link {\r\n color: color('utility-blue');\r\n }\r\n \r\n .u-wrap {\r\n @include padding-top('m-xl');\r\n @include padding-bottom('xl-3xl');\r\n position: relative;\r\n z-index: 2;\r\n\r\n &:before {\r\n content: '';\r\n box-shadow: 1px 1px color('white');\r\n @include space('height', 'gutter');\r\n width: 100vw;\r\n background: color('white');\r\n position: absolute;\r\n bottom: 0;\r\n @include space('right', 'gutter');\r\n z-index: 2;\r\n }\r\n\r\n &:after {\r\n content: '';\r\n box-shadow: -1px 0 color('white');\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n @include space('border-width', 'gutter', 0, 0, 'gutter');\r\n border-color: transparent transparent transparent color('white');\r\n bottom: 0;\r\n right: 0;\r\n }\r\n }\r\n\r\n &__content {\r\n position: relative;\r\n z-index: 5;\r\n max-width: 828px;\r\n\r\n & > + * {\r\n @include margin-top('m');\r\n }\r\n\r\n .c-h {\r\n color: inherit;\r\n margin: inherit;\r\n }\r\n\r\n p {\r\n line-height: lh('prose');\r\n }\r\n\r\n .c-hero__button-wrap {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--space-s);\r\n\r\n &> .c-button {\r\n margin: 0 !important;\r\n }\r\n }\r\n }\r\n\r\n &--image {\r\n background: color('grey', 'step--1');\r\n color: color('white');\r\n\r\n &.mp .u-link {\r\n color: color('utility-blue', 'step-1');\r\n }\r\n }\r\n \r\n &__image-bg {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n background-position: 50% 50%;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: radial-gradient(ellipse farthest-side at bottom right, rgba(color('grey'), 60%), rgba(color('grey', 'step--1'), 90%));\r\n }\r\n\r\n @media (min-width: 55em) {\r\n left: 33.33%;\r\n\r\n &:after {\r\n background: radial-gradient(circle farthest-side at top right, rgba(color('grey', 'step--1'), 30%), color('grey', 'step--1'));\r\n }\r\n }\r\n\r\n @media (min-width:70em) {\r\n &:after {\r\n background: linear-gradient(270deg, rgba(color('grey','step--1'),0%) var(--gutter-width), rgba(color('grey','step--1'),62%) var(--stop), color('grey','step--1'));\r\n }\r\n } \r\n }\r\n\r\n &--homepage {\r\n background: linear-gradient(79.62deg, color('petrol', 'step--1') 0%, color('petrol') 100%);\r\n\r\n @media (min-width: 38em) {\r\n background: linear-gradient(84.46deg, color('petrol', 'step--1') 7.52%, color('petrol') 44.84%, rgba(35, 80, 87, 0.8) 51.02%, rgba(52, 82, 87, 0.62) 54.99%, rgba(78, 86, 87, 0.2209) 59.54%, rgba(87, 87, 87, 0) 65.59%);\r\n }\r\n \r\n &::after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n background: rgba(black, 0.33);\r\n width: 100%;\r\n height: 100%;\r\n\r\n @media (min-width: 38em) {\r\n background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);\r\n }\r\n }\r\n\r\n .u-wrap {\r\n @include padding-bottom('l-3xl');\r\n \r\n // &:before,\r\n // &:after {\r\n // display: none;\r\n // }\r\n }\r\n\r\n .c-hero {\r\n &__content {\r\n @media (min-width: 38em) {\r\n width: calc((41.666% - (2 * var(--gutter) / 5)) - 0.1px);\r\n }\r\n\r\n .c-h {\r\n color: color('white');\r\n }\r\n\r\n p {\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n .u-link {\r\n color: color('blue', 'step-1');\r\n }\r\n }\r\n\r\n &__image-bg {\r\n display: none;\r\n \r\n @media (min-width: 38em) {\r\n max-width: 65%;\r\n left: 35%;\r\n display: block;\r\n z-index: -1;\r\n transition: opacity 3s ease;\r\n background-position: 60% 40%;\r\n\r\n &:after {\r\n display: none;\r\n }\r\n\r\n &+ [class^='c-hero__image-'] {\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n &__image-fg {\r\n @extend .c-hero__image-bg;\r\n z-index: 1;\r\n }\r\n }\r\n }\r\n\r\n &--homepage-video {\r\n position: relative;\r\n\r\n &::after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n background: rgba(black, 0.33);\r\n width: 100%;\r\n height: 100%;\r\n\r\n @media (min-width: 38em) {\r\n background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);\r\n }\r\n }\r\n\r\n .u-wrap {\r\n &::before,\r\n &::after {\r\n display: none;\r\n\r\n @media (min-width: 38em) {\r\n display: inline;\r\n }\r\n }\r\n }\r\n\r\n .c-hero {\r\n &__video-bg {\r\n width: 100%;\r\n height: auto;\r\n margin-bottom: -6px;\r\n background-size: cover;\r\n\r\n @media (min-width: 38em) {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n left: 40%;\r\n max-width: 60%;\r\n height: 100%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__video-button-wrap {\r\n position: absolute;\r\n z-index: 2;\r\n right: 0;\r\n bottom: calc(56.25% / 2 - 25px);\r\n left: 0;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n\r\n @media (min-width: 38em) {\r\n position: absolute;\r\n top: 45%;\r\n right: 20%;\r\n bottom: unset;\r\n left: unset;\r\n }\r\n\r\n .c-button {\r\n position: relative;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n background: rgba(black, 0.2);\r\n height: 100%;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n border-radius: inherit;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--homepage-light {\r\n @extend .c-hero--homepage;\r\n background: linear-gradient(79.62deg, color('petrol', 'step-3') 0%, color('blue', 'step-2') 100%), color('petrol', 'step-3');\r\n\r\n @media (min-width: 38em) {\r\n background: linear-gradient(86.37deg, color('petrol', 'step-3') 7.52%, color('petrol', 'step-3') 44.84%, rgba(color('petrol', 'step-3'), 0.8) 51.02%, rgba(color('petrol', 'step-3'), 0.6) 52.38%, rgba(color('petrol', 'step-3'), 0) 65.41%), color('petrol', 'step-3');\r\n }\r\n\r\n .c-hero {\r\n &__content {\r\n .c-h {\r\n color: color('grey', 'step--1');\r\n }\r\n\r\n p {\r\n color: color('grey');\r\n }\r\n\r\n .u-link {\r\n color: color('blue');\r\n }\r\n }\r\n }\r\n }\r\n\r\n &__canvas {\r\n position: absolute;\r\n z-index: -1;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n\r\n @media (min-width: 38em) { \r\n z-index: 1;\r\n }\r\n }\r\n}\r\n",".c-icon {\r\n width: 1em;\r\n height: 1em;\r\n color: inherit;\r\n font-size: inherit;\r\n}",".c-input {\r\n background: color('white');\r\n border: 1px solid color('petrol', 'step-2');\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-radius: 0;\r\n font: inherit;\r\n @include padding('xs');\r\n color: inherit;\r\n font-size: 1rem;\r\n display: block;\r\n width: 100%;\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: color('petrol');\r\n }\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n display: none !important;\r\n }\r\n\r\n &--alt {\r\n background: color('petrol', 'step-3');\r\n border: none;\r\n }\r\n\r\n &--large {\r\n min-height: 56px;\r\n }\r\n\r\n &--select {\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%23006DAF\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n background-position: center right 1rem;\r\n background-repeat: no-repeat;\r\n background-size: 0.875em auto;\r\n }\r\n\r\n &--textarea {\r\n resize: vertical;\r\n min-height: 10rem;;\r\n }\r\n\r\n &--file {\r\n border: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n\r\n @at-root ::-webkit-file-upload-button {\r\n @extend %c-button;\r\n @extend .c-button--blue;\r\n display: inline-flex;\r\n @include margin-right('xs');\r\n }\r\n }\r\n\r\n &-error {\r\n --error-state: #{color('red')};\r\n position: relative;\r\n\r\n .c-input {\r\n width: calc(100% - (27px + var(--space-xs)));\r\n }\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 2.3em;\r\n right: 0;\r\n @include margin-left('xs');\r\n @include padding('xs');\r\n background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"%23CE0058\"/><path stroke=\"%23fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334\"/></svg>') no-repeat center;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n\r\n &-error & {\r\n border-color: color('red');\r\n\r\n &:focus {\r\n border-color: color('red', 'step--1');\r\n }\r\n }\r\n\r\n &-message {\r\n @include margin-top('2xs');\r\n @include step(-1);\r\n color: var(--error-state);\r\n }\r\n\r\n &[disabled],\r\n [disabled],\r\n &--disabled {\r\n background-color: color('petrol', 'step-2');\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"lock\" viewBox=\"0 0 25 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z\"/></svg>');\r\n background-position: right var(--space-2xs) center;\r\n background-repeat: no-repeat;\r\n @include space('background-size', 's');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n}\r\n\r\n.u-disabled > .c-input {\r\n @extend .c-input--disabled;\r\n}\r\n\r\n.c-input--with-button {\r\n // padding-right: 44px;\r\n border: 0;\r\n}\r\n\r\n.c-input--with-button + [type] {\r\n // transform: translateY(-50%);\r\n // position: absolute;\r\n @include padding('xs');\r\n color: color('utility-blue');\r\n // right: 0;\r\n // top: 50%;\r\n\r\n svg {\r\n display: block;\r\n }\r\n}\r\n\r\n.c-label {\r\n font-weight: weight('bold');\r\n @include margin-bottom('2xs');\r\n display: block;\r\n}\r\n\r\n.c-fieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n margin: 0;\r\n min-width: 0;\r\n\r\n legend {\r\n @extend .c-h--step-3;\r\n font-weight: weight('bold');\r\n letter-spacing: ls('-3%');\r\n display: table;\r\n float: left;\r\n @include margin('xs', 0, 'l');\r\n padding: 0;\r\n width: 100%;\r\n\r\n + * {\r\n clear: both;\r\n }\r\n }\r\n\r\n & + & {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n @include margin-top('l-xl');\r\n @include padding-top('l');\r\n }\r\n}\r\n",".c-radio,\r\n.c-checkbox {\r\n @extend .u-hidden;\r\n\r\n &+label,\r\n &+input[type=hidden]+label {\r\n @include padding-left('l');\r\n position: relative;\r\n @include step(-1);\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n\r\n &:before {\r\n transform: translateY(-50%);\r\n position: absolute;\r\n content: '';\r\n border: 1px solid color('petrol', 'step-2');\r\n border-radius: 2px;\r\n height: 1.25rem;\r\n width: 1.25rem;\r\n left: 0;\r\n top: 50%;\r\n }\r\n }\r\n\r\n &:focus+label:before,\r\n &:focus+input[type=hidden]+label:before {\r\n outline: 2px solid;\r\n }\r\n\r\n &[disabled],\r\n [disabled] & {\r\n &+label:before {\r\n background-color: color('petrol', 'step-2');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n\r\n }\r\n\r\n &:hover+label:before {\r\n background-color: color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n\r\n &--box {\r\n &+label {\r\n @include padding('s');\r\n height: 100%;\r\n width: 100%;\r\n background: color('white');\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 6px;\r\n text-align: center;\r\n font-weight: 700;\r\n word-break: break-word;\r\n\r\n &:before,\r\n &:after {\r\n display: none;\r\n }\r\n }\r\n\r\n &:checked+label {\r\n background: color('blue');\r\n color: color('white');\r\n }\r\n\r\n &[disabled]+label {\r\n background: color('grey', 'step-3');\r\n color: color('grey', 'step-1');\r\n border: 1px solid color('grey', 'step-2');\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n}\r\n\r\n.c-checkbox {\r\n\r\n &:checked+label:before,\r\n &:checked+input[type=hidden]+label:before {\r\n background: color('utility-blue');\r\n }\r\n\r\n &:checked+label:after,\r\n &:checked+input[type=hidden]+label:after {\r\n transform: translateX(6.5px) translateY(-1.5px) translateY(-50%) rotate(45deg);\r\n position: absolute;\r\n content: '';\r\n width: 7px;\r\n height: 11px;\r\n border-bottom: 3px solid color('white');\r\n border-right: 3px solid color('white');\r\n left: 0;\r\n top: 50%;\r\n }\r\n}\r\n\r\n.c-radio,\r\n.c-checkbox {\r\n\r\n &+label:hover:before,\r\n &+input[type=hidden]+label:hover:before {\r\n background-color: color('utility-blue', 'step-3');\r\n }\r\n}\r\n\r\n.c-checkbox {\r\n\r\n &:checked+label:hover:before,\r\n &:checked+input[type=hidden]+label:hover:before {\r\n background: color('utility-blue', 'step--1');\r\n }\r\n}\r\n\r\n.c-radio {\r\n\r\n &+label:before,\r\n &+input[type=hidden]+label:before {\r\n border-radius: 100%;\r\n }\r\n\r\n &:checked+label:before,\r\n &:checked+input[type=hidden]+label:before {\r\n box-shadow: inset 0 0 0 5px color('utility-blue');\r\n }\r\n\r\n &:checked+label:hover:before,\r\n &:checked+input[type=hidden]+label:hover:before {\r\n box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');\r\n }\r\n}\r\n\r\n.c-off-canvas .c-checkbox-group {\r\n &>* {\r\n width: 100%;\r\n margin-left: 0;\r\n }\r\n}",".c-toggle {\r\n position: relative;\r\n @include step(-1);\r\n display: inline-block;\r\n white-space: nowrap;\r\n\r\n &__checkbox {\r\n @extend .u-hidden;\r\n }\r\n\r\n &__slider {\r\n @include margin-right('2xs');\r\n @include margin-left('2xs');\r\n position: relative;\r\n display: inline-block;\r\n height: 1.25rem;\r\n width: 2.25rem;\r\n border: 1px solid color('petrol', 'step-2');\r\n border-radius: 1.25rem;\r\n vertical-align: text-bottom;\r\n\r\n &::before {\r\n position: absolute;\r\n content: \"\";\r\n background-color: color('white');\r\n border: 1px solid color('petrol', 'step-2');\r\n height: 0.75rem;\r\n width: 0.75rem;\r\n top: 0;\r\n bottom: 0;\r\n left: 0.25rem;\r\n margin: auto 0;\r\n border-radius: 50%;\r\n transition: .1s;\r\n }\r\n }\r\n\r\n &:hover &__slider,\r\n &:focus-within &__slider {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n \r\n &:focus-within &__slider {\r\n outline: 2px solid;\r\n }\r\n\r\n &__checkbox:checked + &__slider {\r\n background-color: color('utility-blue');\r\n }\r\n\r\n &:hover &__checkbox:checked + &__slider,\r\n &:focus-within &__checkbox:checked + &__slider {\r\n background-color: color('utility-blue', 'step--1');\r\n }\r\n\r\n &__checkbox:checked + &__slider::before {\r\n transform: translateX(1rem);\r\n }\r\n\r\n input[disabled] {\r\n & + .c-toggle__slider {\r\n background-color: color('petrol', 'step-2');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n\r\n &:before {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n }\r\n & ~ .c-toggle__label {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n }\r\n}",".c-internal-nav {\r\n background-color: transparent;\r\n border-bottom: 1px solid transparent;\r\n transition: 200ms all;\r\n\r\n &--stuck {\r\n @extend .u-bg-white;\r\n border-bottom-color: color('grey', 'step-2');\r\n z-index: 9999;\r\n\r\n .c-internal-nav__title {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &__wrap {\r\n @extend .u-wrap;\r\n display: flex;\r\n gap: var(--space-l);\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n &__title {\r\n @include padding('s', 0);\r\n flex-shrink: 0;\r\n font-weight: bold;\r\n transition: 200ms opacity;\r\n opacity: 0;\r\n }\r\n\r\n &__list {\r\n @include padding('s', 0);\r\n color: color('utility-blue');\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n display: flex;\r\n align-items: center;\r\n font-size: var(--step--1);\r\n\r\n & > * + * {\r\n @include margin-left('l');\r\n }\r\n\r\n li {\r\n a {\r\n @extend .u-link;\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n @media (max-width: 44em) {\r\n &__title,\r\n .c-button {\r\n display: none;\r\n }\r\n \r\n &__list {\r\n @include padding-bottom('s');\r\n }\r\n }\r\n}\r\n\r\n\r\n.c-hero + .c-internal-nav {\r\n margin-top: calc(var(--gutter) * -1);\r\n}\r\n\r\n.c-internal-nav.u-sticky {\r\n top: -1px;\r\n}",".c-meta-box {\r\n background: color('petrol', 'step-3');\r\n @include padding('s-m');\r\n @include step(-1);\r\n @include flow('s');\r\n\r\n .u-wrap--fields {\r\n @include padding-right(0)\r\n }\r\n\r\n @media only screen and (min-width: 35em) and (max-width: 54.95em) {\r\n column-width: 18em;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n grid-gap: 0 var(--gutter);\r\n grid-template-rows: auto max-content auto;\r\n \r\n h2 {\r\n grid-column: 1/3;\r\n }\r\n\r\n li {\r\n break-inside: avoid;\r\n }\r\n \r\n .u-grey-step-1 {\r\n grid-row: 2/4;\r\n }\r\n \r\n .c-button {\r\n align-self: start;\r\n }\r\n }\r\n}",".c-off-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\r\n z-index: 9999;\r\n\r\n &> * + * {\r\n margin: 0 !important;\r\n }\r\n\r\n &__backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(color(\"grey\"), 0.5);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n &__content {\r\n position: fixed;\r\n top: 0;\r\n right: -100%;\r\n width: calc(100% - var(--space-m));\r\n height: 100%;\r\n background-color: color(\"white\");\r\n transition: right 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n &__header {\r\n @extend .c-h--step-3;\r\n @include padding('s', 's', 0);\r\n\r\n & > * {\r\n margin-bottom: 0 !important;\r\n }\r\n }\r\n\r\n &__header + &__main {\r\n @include margin-top('m');\r\n }\r\n\r\n &__main {\r\n @include margin-bottom('m');\r\n @include padding('3xs', 's');\r\n overflow-y: scroll;\r\n }\r\n\r\n &__footer {\r\n @include margin-top('auto');\r\n @include padding(0, 's', 's');\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n &__close {\r\n @extend .u-link;\r\n @include margin(0, 'auto');\r\n @include padding('s');\r\n }\r\n\r\n &--active {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: opacity 0.3s ease;\r\n\r\n .c-off-canvas__backdrop {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .c-off-canvas__content {\r\n right: 0;\r\n }\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 40em) {\r\n .c-off-canvas--mobile {\r\n display: none !important;\r\n }\r\n\r\n .c-checkbox-group {\r\n [data-off-canvas=\"header\"],\r\n [data-off-canvas=\"footer\"] {\r\n display: none;\r\n }\r\n }\r\n}",".c-option-list {\r\n .mp & {\r\n line-height: lh('prose');\r\n }\r\n\r\n a {\r\n color: color('utility-blue');\r\n \r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n li {\r\n @include margin-bottom('2xs');\r\n break-inside: avoid;\r\n } \r\n\r\n &--columns {\r\n @include space('column-gap', 'gutter');\r\n column-width: 200px;\r\n\r\n @media (min-width: 60em) {\r\n column-width: 260px;\r\n }\r\n }\r\n\r\n &__title {\r\n a {\r\n font-weight: weight();\r\n color: color('utility-blue');\r\n @include margin-left('2xs');\r\n \r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n",".c-post-meta {\r\n color: color('grey', 'step-1');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n border-top: 1px solid color('petrol', 'step-2');\r\n padding: 1.25rem 0;\r\n @include flow('xs');\r\n}\r\n",".c-product-signpost {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n max-width: 440px;\r\n @include padding(\"2xs\");\r\n word-break: break-word;\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n }\r\n\r\n &:hover .c-h {\r\n text-decoration: underline;\r\n }\r\n\r\n &__image {\r\n margin-bottom: 0;\r\n // @include padding-right(\"s\");\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n flex-grow: 1;\r\n }\r\n\r\n &__wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n @include space('gap', 'xs-s');\r\n }\r\n\r\n .o-prose p {\r\n line-height: lh();\r\n @include step(-1);\r\n }\r\n\r\n &--bordered {\r\n @include padding(\"xs\");\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n }\r\n\r\n &--float-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", \"xs-l\");\r\n min-width: 9rem;\r\n width: 30%;\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--float-right,\r\n &__image {\r\n width: 40%;\r\n }\r\n\r\n &__wrapper {\r\n flex-direction: row;\r\n }\r\n }\r\n}\r\n",".c-quote {\r\n color: color('petrol', 'step-1');\r\n padding-top: 74px;\r\n @include padding('2xl', 0, 'l', 'xl');\r\n position: relative;\r\n\r\n &:before {\r\n content: '“';\r\n color: color('petrol', 'step-3');\r\n position: absolute;\r\n height: 57px;\r\n width: 45px;\r\n left: 0;\r\n top: 0.1em;\r\n font-family: \"Arial\", sans-serif;\r\n font-size: 10em;\r\n font-weight: 900;\r\n line-height: 0.9;\r\n margin-left: -0.025em;\r\n z-index: -1;\r\n }\r\n\r\n p {\r\n @include step(2);\r\n line-height: lh('prose');\r\n }\r\n\r\n p + p {\r\n margin-top: 1em;\r\n }\r\n\r\n cite {\r\n display: block;\r\n @include step(-1);\r\n @include margin-top('s');\r\n }\r\n\r\n &__image {\r\n max-height: 3em;\r\n }\r\n\r\n &--bordered {\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n @include padding('xl', 'xl', 'xl', '4xl');\r\n\r\n &:before {\r\n @include space('left', 'xl');\r\n @include space('top', 'l');\r\n }\r\n }\r\n}",".c-scroll-spy {\r\n position: sticky;\r\n @include space(\"top\", \"gutter\");\r\n overflow: hidden;\r\n\r\n a:not(.c-button) {\r\n color: color(\"utility-blue\");\r\n position: relative;\r\n display: block;\r\n transition: 300ms transform;\r\n\r\n &:hover {\r\n color: color(\"grey\");\r\n }\r\n\r\n &::before {\r\n content: \"▸ \";\r\n position: absolute;\r\n left: -17px;\r\n top: 0;\r\n }\r\n }\r\n\r\n &-active {\r\n transform: translateX(17px);\r\n }\r\n}\r\n\r\n/below additions added to allow for buttons to be displayed under the list items but remain sticky /\r\n.c-scroll-spy-buttons a:before {\r\n content: \"\" !important;\r\n}\r\n\r\n@media only screen and (min-width: 880px) {\r\n .c-scroll-spy-buttons {\r\n margin-right: 54px;\r\n margin-right: var(--space-xl);\r\n }\r\n\r\n .c-scroll-spy-buttons .c-button {\r\n width: 100%;\r\n margin-bottom: 18px;\r\n margin-bottom: var(--space-s);\r\n }\r\n}\r\n\r\n@media only screen and (max-width: 879px) {\r\n .c-scroll-spy-buttons .c-button {\r\n display: inline-flex;\r\n margin-right: 0.5em;\r\n margin-bottom: 0.5em;\r\n vertical-align: top;\r\n }\r\n}\r\n",".c-series {\r\n @include step(-1);\r\n list-style: none;\r\n flex-wrap: wrap;\r\n display: flex;\r\n @include gap('2xs', 's');\r\n align-items: center;\r\n\r\n .mp {\r\n font-size: inherit;\r\n }\r\n\r\n li {\r\n padding-right: 1rem;\r\n\r\n @supports (gap: 1rem) {\r\n padding-right: 0;\r\n }\r\n }\r\n}\r\n",".c-signpost {\r\n &__link {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n &__image {\r\n @include margin-right('s-m');\r\n width: 20%;\r\n max-width: 72px;\r\n flex-grow: 1;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n @include step(-1);\r\n\r\n p {\r\n color: color('utility-blue');\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &:hover &__content p {\r\n text-decoration: none;\r\n }\r\n}",".c-slat {\r\n @include padding-bottom('m-l');\r\n @include padding-top('m-l');\r\n\r\n &--grey {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n\r\n &--white {\r\n background-color: color('white');\r\n }\r\n\r\n &--concentric {\r\n background-image: url('../svg/concentric.svg');\r\n background-repeat: no-repeat;\r\n background-position: right top;\r\n background-size: auto 50%;\r\n\r\n @media (min-width: 40em) {\r\n background-size: auto 100%;\r\n }\r\n }\r\n\r\n &--dots {\r\n background-image: url('../svg/dots-pattern.svg');\r\n background-repeat: no-repeat;\r\n background-position: left top;\r\n background-size: auto 100%;\r\n }\r\n \r\n &--crystal {\r\n background-image: url('../svg/crystal.svg');\r\n background-repeat: no-repeat;\r\n background-position: right bottom;\r\n background-size: auto 100%;\r\n }\r\n \r\n &--arc {\r\n background-image: url('../svg/arc.svg');\r\n background-repeat: no-repeat;\r\n background-position: right bottom;\r\n background-size: auto 100%;\r\n }\r\n\r\n &--padded {\r\n @include padding-bottom('l-2xl');\r\n @include padding-top('l-2xl');\r\n }\r\n\r\n &__title {\r\n @include step(5);\r\n }\r\n}",".c-table {\r\n text-align: left;\r\n border: none;\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: transparent;\r\n @include step(-1);\r\n\r\n th {\r\n font-weight: weight('semi');\r\n }\r\n\r\n td,\r\n th {\r\n padding: 12px;\r\n background: color('petrol', 'step-3');\r\n border: none;\r\n border-bottom: 2px solid color('white');\r\n border-top: 2px solid color('white');\r\n vertical-align: top;\r\n color: inherit;\r\n\r\n }\r\n\r\n // Allow setting 'u-bg' background colours on table rows\r\n tr[class='u-bg'] {\r\n td,\r\n th {\r\n background-color: inherit;\r\n }\r\n }\r\n\r\n th {\r\n background: color('petrol');\r\n color: color('white');\r\n }\r\n\r\n img {\r\n height: auto !important;\r\n }\r\n\r\n &--center {\r\n td,\r\n th {\r\n vertical-align: middle;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n &--ellipsis {\r\n td {\r\n width: auto;\r\n\r\n &.u-ellipsis {\r\n width: 100%;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--wide {\r\n width: 100%;\r\n }\r\n\r\n .c-icon--dash {\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n .c-icon--tick {\r\n color: color('green');\r\n }\r\n\r\n &__title th,\r\n &__title td {\r\n background: color('white');\r\n color: inherit;\r\n }\r\n\r\n a:hover {\r\n text-decoration: none;\r\n }\r\n\r\n &--comparison {\r\n thead th {\r\n background: transparent;\r\n color: inherit;\r\n font-weight: weight();\r\n }\r\n\r\n tbody td:nth-child(n+2) {\r\n text-align: center;\r\n }\r\n }\r\n\r\n &--features {\r\n thead th,\r\n tbody td,\r\n tfoot td {\r\n background: transparent;\r\n }\r\n\r\n thead th {\r\n color: inherit;\r\n font-weight: weight();\r\n }\r\n }\r\n\r\n @media (min-width: 30em) {\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n &--fixed {\r\n table-layout: fixed;\r\n\r\n @media (min-width: 40em) {\r\n th {\r\n width: 40%;\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &--responsive {\r\n tbody,\r\n tfoot,\r\n tr,\r\n td,\r\n th {\r\n display: block;\r\n }\r\n\r\n thead {\r\n display: none;\r\n }\r\n \r\n tr + tr {\r\n border-top: 2px solid color('petrol', 'step-2');\r\n @include padding-top('s');\r\n @include margin-top('s');\r\n }\r\n \r\n tbody [data-responsive-title] {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n @include grid-gap('s');\r\n \r\n &:before {\r\n content: attr(data-responsive-title);\r\n font-weight: 700;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n",".c-tabs {\r\n .no-js &__content > {\r\n display: none;\r\n\r\n &:target {\r\n display: block;\r\n }\r\n }\r\n\r\n &__content > * {\r\n display: none;\r\n\r\n &.c-tab--active {\r\n display: block;\r\n }\r\n }\r\n\r\n .no-js &--flex &__content > * {\r\n display: none;\r\n\r\n &:target {\r\n display: flex;\r\n }\r\n }\r\n \r\n &--flex &__content > * {\r\n display: none;\r\n\r\n &.c-tab--active {\r\n display: flex;\r\n justify-content: stretch;\r\n }\r\n }\r\n \r\n &__controls {\r\n @include margin-bottom('m');\r\n overflow-x: auto;\r\n \r\n &-list {\r\n border-bottom: 4px solid color('utility-blue', 'step-3');\r\n display: flex;\r\n width: 100%;\r\n min-width: min-content;\r\n\r\n li {\r\n display: flex;\r\n }\r\n }\r\n }\r\n\r\n &__control {\r\n .mp & {\r\n color: color('utility-blue');\r\n }\r\n\r\n font-weight: weight('bold');\r\n @include step(-1);\r\n @include padding(0, 0 , 's-m');\r\n @include margin-right('m');\r\n display: block;\r\n border-bottom: 4px solid color('utility-blue', 'step-3');\r\n margin-bottom: -4px;\r\n position: relative;\r\n z-index: 1;\r\n\r\n @media screen and (max-width:55em) {\r\n white-space: nowrap;\r\n }\r\n\r\n .c-tabs__controls-list > li:last-child & {\r\n @include margin-right(0);\r\n }\r\n \r\n &.c-twi {\r\n display: flex;\r\n padding-right: 1.875rem;\r\n\r\n svg {\r\n position: absolute;\r\n right: 0;\r\n }\r\n }\r\n }\r\n \r\n :checked + &__control,\r\n &__control--active {\r\n border-bottom-color: color('utility-blue');\r\n }\r\n\r\n :focus + &__control {\r\n outline: 2px solid;\r\n }\r\n\r\n .c-tab {\r\n width: 100%;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n}\r\n",".c-twi {\r\n $twi-space: 0.5em;\r\n display: inline-flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n color: inherit;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: inherit;\r\n }\r\n\r\n svg {\r\n margin-left: $twi-space;\r\n font-size: 1.25em;\r\n position: static !important;\r\n }\r\n\r\n &--left svg {\r\n margin-right: $twi-space;\r\n margin-left: 0;\r\n order: -1;\r\n }\r\n}\r\n",".c-usp {\r\n @include padding-top('s-m');\r\n @include padding-bottom('s-m');\r\n position: relative;\r\n \r\n &--bordered {\r\n @include padding('s-m');\r\n border: 1px solid;\r\n border-image-slice: 1;\r\n border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));\r\n }\r\n\r\n &--center {\r\n .c-usp__icon,\r\n .c-usp__title {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n &__title {\r\n max-width: 300px;\r\n color: color('petrol');\r\n\r\n @supports(-webkit-text-fill-color:transparent) {\r\n background-image: linear-gradient(to right, color('petrol'), color('blue') );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n // display: inline-block;\r\n\r\n &::selection {\r\n -webkit-background-clip: none;\r\n }\r\n }\r\n }\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n margin-top: 0;\r\n }\r\n\r\n &__icon {\r\n @include space('height','l');\r\n @include space('width','l');\r\n\r\n .c-usp--center & {\r\n @include space('height','2xl');\r\n @include space('width','2xl');\r\n }\r\n }\r\n\r\n &__eyebrow {\r\n @include padding('3xs', 'xs');\r\n @include step(-1);\r\n border-radius: 2em;\r\n background: #c2e9f0;\r\n color: #005461;\r\n display: inline-block;\r\n }\r\n}\r\n",".mp-dynamicform {\r\n .c-form {\r\n &__section {\r\n padding: 36px;\r\n padding: var(--space-l);\r\n background: color('petrol', 'step-3');\r\n }\r\n\r\n &__section + .c-form__section {\r\n border-top: 2px solid color('white');\r\n }\r\n\r\n &__section-title {\r\n letter-spacing: -.02em;\r\n font-size: var(--step-3);\r\n }\r\n\r\n .c-label--required:after {\r\n content: \"\";\r\n color: color('red');\r\n padding: 0 2px;\r\n position: relative;\r\n top: -2px;\r\n }\r\n }\r\n \r\n .c-input__wrap {\r\n align-items: center;\r\n gap: var(--space-s);\r\n flex-wrap: wrap;\r\n display: flex;\r\n \r\n .c-label {\r\n flex-basis: 148px;\r\n margin-bottom: 0;\r\n \r\n &+ {\r\n flex: 1 0 148px;\r\n }\r\n }\r\n\r\n &--messages {\r\n row-gap: 0;\r\n margin-top: 0;\r\n \r\n p {\r\n @include margin-top('2xs');\r\n letter-spacing: -.01em;\r\n font-size: var(--step--1);\r\n }\r\n }\r\n }\r\n\r\n .c-input__spacer {\r\n height: 0;\r\n flex-basis: 148px;\r\n }\r\n\r\n .c-input--select {\r\n cursor: pointer;\r\n }\r\n\r\n .c-checkbox + label,\r\n .c-radio + label {\r\n display: inline-block;\r\n }\r\n}",".c-h {\r\n font-weight: 700;\r\n font-family: $font-stack;\r\n line-height: lh();\r\n\r\n &--page-subtitle {\r\n @include step(1);\r\n color: color('green');\r\n font-weight: weight('semi');\r\n }\r\n\r\n &--step-6,\r\n &--page-title {\r\n @include hyphenated;\r\n @include step(6);\r\n }\r\n\r\n &--step-5 {\r\n @include hyphenated;\r\n @include step(5);\r\n }\r\n\r\n &--step-4 {\r\n @include step(4);\r\n }\r\n\r\n &--step-3 {\r\n @include step(3);\r\n }\r\n\r\n &--step-2 {\r\n @include step(2);\r\n }\r\n\r\n &--step-1 {\r\n @include step(1);\r\n }\r\n\r\n &--step-0 {\r\n @include step();\r\n }\r\n\r\n &--step--1 {\r\n @include step(-1);\r\n }\r\n\r\n &--reset {\r\n font-weight: weight();\r\n @include step();\r\n }\r\n\r\n &--upper {\r\n text-transform: uppercase;\r\n color: color('petrol');\r\n @include step(-1);\r\n letter-spacing: ls('2%');\r\n }\r\n\r\n &--event-date {\r\n @include step(1);\r\n color: color('petrol', 'step-1');\r\n }\r\n\r\n &--tagline {\r\n @include step();\r\n color: color('green');\r\n }\r\n}\r\n",".c-lightbox {\r\n position: fixed;\r\n z-index: 1000;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(color('grey', 'step--1'), .9);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &__slide {\r\n max-width: 90vw;\r\n margin: auto;\r\n display: none;\r\n\r\n &.active {\r\n display: block;\r\n\r\n img {\r\n max-width: 85vw;\r\n max-height: 90vh;\r\n margin: auto;\r\n display: block;\r\n object-fit: contain;\r\n }\r\n }\r\n }\r\n\r\n &__prev,\r\n &__next {\r\n position: absolute;\r\n height: 2rem;\r\n width: 2rem;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n }\r\n\r\n &__prev {\r\n background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"arrow-left\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12H2M2 12L9 5M2 12L9 19\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>');\r\n left: 0.5rem;\r\n }\r\n\r\n &__next {\r\n background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"arrow-right\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12H22M22 12L15 5M22 12L15 19\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>');\r\n right: 0.5rem;\r\n }\r\n\r\n &__close {\r\n position: absolute;\r\n top: 0.6rem;\r\n right: 0.6rem;\r\n color: color('white');\r\n font-size: 1.6rem;\r\n cursor: pointer;\r\n }\r\n\r\n &__video {\r\n width: 100%;\r\n max-height: 80vh;\r\n }\r\n}\r\n",".c-product-finder {\r\n &__panel {\r\n background: color('petrol', 'step-3');\r\n @include padding('xl-2xl', 'm-xl');\r\n position: relative;\r\n\r\n &--intro {\r\n background: radial-gradient(circle at top right, color('petrol', 'step-3') 0%, color('petrol', 'step-3') 30%, color('blue', 'step-2') 100%);\r\n\r\n .c-h {\r\n font-size: var(--step-5);\r\n }\r\n }\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n @include space('border-width', 'xl', 'xl', 0, 0);\r\n border-color: transparent color('white') transparent transparent;\r\n bottom: 0;\r\n right: 0;\r\n display: none;\r\n }\r\n \r\n @media (min-width: 48em) {\r\n &:after {\r\n display: block;\r\n }\r\n }\r\n\r\n .c-h,\r\n figure {\r\n @include margin-bottom(0);\r\n }\r\n }\r\n\r\n &__result {\r\n display: flex;\r\n flex-flow: column;\r\n flex: 1;\r\n @include flow('s');\r\n\r\n &>.c-h {\r\n font-size: var(--step--1);\r\n text-transform: uppercase;\r\n }\r\n\r\n &--upgrade {\r\n &>.c-h {\r\n color: color('petrol');\r\n\r\n @supports(-webkit-text-fill-color:transparent) {\r\n background-image: linear-gradient(to right, color('petrol'), color('blue'));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n\r\n &::selection {\r\n -webkit-background-clip: none;\r\n }\r\n }\r\n }\r\n\r\n .c-product-comparison-card {\r\n border: 1px solid;\r\n border-image-slice: 1;\r\n border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));\r\n }\r\n }\r\n\r\n }\r\n}","html body {\r\n\r\n@import './typography.scss';\r\n@import './link.scss';\r\n@import './colour.scss';\r\n@import './disabled.scss';\r\n@import './wrap.scss';\r\n@import './flex.scss';\r\n@import './display.scss';\r\n@import './flow.scss';\r\n@import './space.scss';\r\n@import './hr.scss';\r\n@import './ellipsis.scss';\r\n@import './scroll-shadows.scss';\r\n\r\n}","/* Padding /\r\n.u-pad-top-0 {\r\n padding-top: 0;\r\n}\r\n.u-pad-top-s {\r\n @include padding-top('s');\r\n}\r\n.u-pad-top-m {\r\n @include padding-top('m');\r\n}\r\n.u-pad-top-l {\r\n @include padding-top('l');\r\n}\r\n.u-pad-top-xl {\r\n @include padding-top('xl');\r\n}\r\n.u-pad-top-s-m {\r\n @include padding-top('s-m');\r\n}\r\n.u-pad-top-m-l {\r\n @include padding-top('m-l');\r\n}\r\n.u-pad-top-l-xl {\r\n @include padding-top('l-xl');\r\n}\r\n\r\n.u-pad-bottom-0 {\r\n padding-bottom: 0;\r\n}\r\n.u-pad-bottom-s {\r\n @include padding-bottom('s');\r\n}\r\n.u-pad-bottom-m {\r\n @include padding-bottom('m');\r\n}\r\n.u-pad-bottom-l {\r\n @include padding-bottom('l');\r\n}\r\n.u-pad-bottom-xl {\r\n @include padding-bottom('xl');\r\n}\r\n.u-pad-bottom-s-m {\r\n @include padding-bottom('s-m');\r\n}\r\n.u-pad-bottom-m-l {\r\n @include padding-bottom('m-l');\r\n}\r\n.u-pad-bottom-l-xl {\r\n @include padding-bottom('l-xl');\r\n}\r\n\r\n.u-pad-left-0 {\r\n padding-left: 0;\r\n}\r\n.u-pad-left-s {\r\n @include padding-left('s');\r\n}\r\n.u-pad-left-m {\r\n @include padding-left('m');\r\n}\r\n.u-pad-left-l {\r\n @include padding-left('l');\r\n}\r\n.u-pad-left-xl {\r\n @include padding-left('xl');\r\n}\r\n\r\n.u-pad-right-0 {\r\n padding-right: 0;\r\n}\r\n.u-pad-right-s {\r\n @include padding-right('s');\r\n}\r\n.u-pad-right-m {\r\n @include padding-right('m');\r\n}\r\n.u-pad-right-l {\r\n @include padding-right('l');\r\n}\r\n.u-pad-right-xl {\r\n @include padding-right('xl');\r\n}\r\n\r\n.u-pad-0 {\r\n padding: 0;\r\n}\r\n.u-pad-3xs {\r\n @include padding('3xs');\r\n}\r\n.u-pad-s {\r\n @include padding('s');\r\n}\r\n.u-pad-m {\r\n @include padding('m');\r\n}\r\n.u-pad-l {\r\n @include padding('l');\r\n}\r\n.u-pad-xl {\r\n @include padding('xl');\r\n}\r\n\r\n.u-pad-y-xs {\r\n @include padding-top('xs');\r\n @include padding-bottom('xs');\r\n}\r\n.u-pad-y-s {\r\n @include padding-top('s');\r\n @include padding-bottom('s');\r\n}\r\n.u-pad-y-m {\r\n @include padding-top('m');\r\n @include padding-bottom('m');\r\n}\r\n.u-pad-y-m-l {\r\n @include padding-top('m-l');\r\n @include padding-bottom('m-l');\r\n}\r\n.u-pad-y-l {\r\n @include padding-top('l');\r\n @include padding-bottom('l');\r\n}\r\n.u-pad-y-xl {\r\n @include padding-top('xl');\r\n @include padding-bottom('xl');\r\n}\r\n.u-pad-y-2xl {\r\n @include padding-top('2xl');\r\n @include padding-bottom('2xl');\r\n}\r\n.u-pad-y-l-xl {\r\n @include padding-top('l-xl');\r\n @include padding-bottom('l-xl');\r\n}\r\n.u-pad-y-l-2xl {\r\n @include padding-top('l-2xl');\r\n @include padding-bottom('l-2xl');\r\n}\r\n\r\n.u-pad-x-s {\r\n @include padding-left('s');\r\n @include padding-right('s');\r\n}\r\n.u-pad-x-m {\r\n @include padding-left('m');\r\n @include padding-right('m');\r\n}\r\n.u-pad-x-l {\r\n @include padding-left('l');\r\n @include padding-right('l');\r\n}\r\n.u-pad-x-xl {\r\n @include padding-left('xl');\r\n @include padding-right('xl');\r\n}\r\n.u-pad-x-s-xl {\r\n @include padding-left('s-xl');\r\n @include padding-right('s-xl');\r\n}\r\n\r\n/ Margin /\r\n\r\n.u-margin-top-0 {\r\n margin-top: 0;\r\n}\r\n.u-margin-top-auto {\r\n margin-top: auto;\r\n}\r\n.u-margin-top-2xs {\r\n @include margin-top('2xs');\r\n}\r\n.u-margin-top-xs {\r\n @include margin-top('xs');\r\n}\r\n.u-margin-top-s {\r\n @include margin-top('s');\r\n}\r\n.u-margin-top-m {\r\n @include margin-top('m');\r\n}\r\n.u-margin-top-l {\r\n @include margin-top('l');\r\n}\r\n.u-margin-top-xl {\r\n @include margin-top('xl');\r\n}\r\n.u-margin-top-s-m {\r\n @include margin-top('s-m');\r\n}\r\n.u-margin-top-m-l {\r\n @include margin-top('m-l');\r\n}\r\n.u-margin-top-l-xl {\r\n @include margin-top('l-xl');\r\n}\r\n.u-margin-top-l-2xl {\r\n @include margin-top('l-2xl');\r\n}\r\n.u-margin-top-xl-2xl {\r\n @include margin-top('xl-2xl');\r\n}\r\n\r\n.u-margin-bottom-0 {\r\n margin-bottom: 0;\r\n}\r\n.u-margin-bottom-s {\r\n @include margin-bottom('s');\r\n}\r\n.u-margin-bottom-m {\r\n @include margin-bottom('m');\r\n}\r\n.u-margin-bottom-l {\r\n @include margin-bottom('l');\r\n}\r\n.u-margin-bottom-xl {\r\n @include margin-bottom('xl');\r\n}\r\n.u-margin-bottom-s-m {\r\n @include margin-bottom('s-m');\r\n}\r\n.u-margin-bottom-s-l {\r\n @include margin-bottom('s-l');\r\n}\r\n.u-margin-bottom-m-l {\r\n @include margin-bottom('m-l');\r\n}\r\n.u-margin-bottom-m-xl {\r\n @include margin-bottom('m-xl');\r\n}\r\n.u-margin-bottom-l-xl {\r\n @include margin-bottom('l-xl');\r\n}\r\n\r\n.u-margin-left-0 {\r\n margin-left: 0;\r\n}\r\n.u-margin-left-2xs {\r\n @include margin-left('2xs');\r\n}\r\n.u-margin-left-xs {\r\n @include margin-left('xs');\r\n}\r\n.u-margin-left-s {\r\n @include margin-left('s');\r\n}\r\n.u-margin-left-m {\r\n @include margin-left('m');\r\n}\r\n.u-margin-left-l {\r\n @include margin-left('l');\r\n}\r\n.u-margin-left-xl {\r\n @include margin-left('xl');\r\n}\r\n\r\n.u-margin-right-0 {\r\n margin-right: 0;\r\n}\r\n.u-margin-right-xs {\r\n @include margin-right('xs');\r\n}\r\n.u-margin-right-s {\r\n @include margin-right('s');\r\n}\r\n.u-margin-right-m {\r\n @include margin-right('m');\r\n}\r\n.u-margin-right-l {\r\n @include margin-right('l');\r\n}\r\n.u-margin-right-xl {\r\n @include margin-right('xl');\r\n}\r\n\r\n.u-margin-0 {\r\n margin: 0;\r\n}\r\n.u-margin-s {\r\n @include margin('s');\r\n}\r\n.u-margin-m {\r\n @include margin('m');\r\n}\r\n.u-margin-l {\r\n @include margin('l');\r\n}\r\n.u-margin-xl {\r\n @include margin('xl');\r\n}\r\n\r\n.u-margin-y-xs {\r\n @include margin-top('xs');\r\n @include margin-bottom('xs');\r\n}\r\n.u-margin-y-s {\r\n @include margin-top('s');\r\n @include margin-bottom('s');\r\n}\r\n.u-margin-y-s-m {\r\n @include margin-top('s-m');\r\n @include margin-bottom('s-m');\r\n}\r\n.u-margin-y-m {\r\n @include margin-top('m');\r\n @include margin-bottom('m');\r\n}\r\n.u-margin-y-l {\r\n @include margin-top('l');\r\n @include margin-bottom('l');\r\n}\r\n.u-margin-y-xl {\r\n @include margin-top('xl');\r\n @include margin-bottom('xl');\r\n}\r\n\r\n.u-margin-x-3xs {\r\n @include margin-left('3xs');\r\n @include margin-right('3xs');\r\n}\r\n.u-margin-x-2xs {\r\n @include margin-left('2xs');\r\n @include margin-right('2xs');\r\n}\r\n.u-margin-x-xs {\r\n @include margin-left('xs');\r\n @include margin-right('xs');\r\n}\r\n.u-margin-x-s {\r\n @include margin-left('s');\r\n @include margin-right('s');\r\n}\r\n.u-margin-x-m {\r\n @include margin-left('m');\r\n @include margin-right('m');\r\n}\r\n.u-margin-x-l {\r\n @include margin-left('l');\r\n @include margin-right('l');\r\n}\r\n.u-margin-x-xl {\r\n @include margin-left('xl');\r\n @include margin-right('xl');\r\n}\r\n\r\n.u-margin-auto {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n/ Width /\r\n\r\n.u-width-auto {\r\n width: auto;\r\n}\r\n\r\n.u-width-100 {\r\n width: 100%;\r\n}\r\n","@each $name, $step in $steps {\r\n .u-step-#{$name} {\r\n @include step($name);\r\n }\r\n}\r\n\r\n.u-lede {\r\n @include step(1);\r\n color: color('blue');\r\n \r\n .mp &,\r\n & {\r\n line-height: lh('prose');\r\n }\r\n}\r\n\r\n.u-strong {\r\n font-weight: weight('bold');\r\n}\r\n\r\n.u-normal {\r\n font-weight: weight();\r\n}\r\n\r\n.u-ls {\r\n letter-spacing: ls();\r\n}\r\n\r\n.u-text-center {\r\n text-align: center;\r\n}\r\n\r\n.u-remove-bullets {\r\n list-style-type: none;\r\n}",".u-link-inside a,\r\n.mp .u-link,\r\n.u-link {\r\n color: color('utility-blue');\r\n cursor: pointer;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n &--petrol {\r\n color: color('petrol');\r\n }\r\n\r\n &--red {\r\n color: color('red');\r\n }\r\n \r\n &--underline {\r\n text-decoration: underline;\r\n \r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n}\r\n","@each $name, $colour in $colours {\r\n .u-#{$name} { color: color($name); }\r\n .u-bg-#{$name} { background-color: color($name); }\r\n @each $tone, $shade in $colour {\r\n @if ($tone != 'step-0') {\r\n .u-#{$name}-#{$tone} { color: color($name, $tone); }\r\n .u-bg-#{$name}-#{$tone} { background-color: color($name, $tone); }\r\n }\r\n }\r\n}\r\n",".u-disabled {\r\n cursor: not-allowed;\r\n \r\n input,\r\n button {\r\n pointer-events: none;\r\n }\r\n}",".u-wrap {\r\n @include padding-right('gutter');\r\n @include padding-left('gutter');\r\n margin-right: auto;\r\n margin-left: auto;\r\n max-width: calc(#{$wrapper});\r\n max-width: calc(#{$wrapper} + var(--gutter) + var(--gutter));\r\n width: 100%;\r\n\r\n .u-wrap {\r\n padding-right: 0;\r\n padding-left: 0;\r\n }\r\n\r\n &--content {\r\n max-width: 51.75rem;\r\n width: 100%;\r\n }\r\n\r\n &--fields {\r\n max-width: 27rem;\r\n @include padding-right('l');\r\n }\r\n}\r\n",".u-flex {\r\n display: flex;\r\n}\r\n\r\n.u-flex-column {\r\n flex-direction: column;\r\n}\r\n\r\n.u-align-center {\r\n align-items: center;\r\n}\r\n\r\n.u-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.u-justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.u-justify-end {\r\n justify-content: flex-end;\r\n}\r\n\r\n.u-flex-1 {\r\n flex: 1;\r\n}\r\n\r\n.u-flex-no-shrink {\r\n flex-shrink: 0;\r\n}\r\n\r\n.u-flex-no-grow {\r\n flex-grow: 0;\r\n}\r\n\r\n.u-flex-wrap {\r\n flex-wrap: wrap;\r\n}\r\n",".u-hidden {\r\n clip: rect(0 0 0 0);\r\n clip-path: inset(0 0 100% 0);\r\n height: 1px;\r\n overflow: hidden;\r\n position: absolute;\r\n transition: 300ms clip-path;\r\n white-space: nowrap;\r\n width: 1px;\r\n}\r\n\r\n.u-revealed {\r\n clip-path: inset(0);\r\n transition: 300ms clip-path;\r\n}\r\n\r\n.u-clear-both {\r\n clear: both;\r\n}\r\n\r\n.u-display-none {\r\n display: none;\r\n}\r\n\r\n.u-display-block {\r\n display: block;\r\n}\r\n\r\n.u-display-inline-block {\r\n display: inline-block;\r\n}\r\n\r\n.u-float-left {\r\n float: left;\r\n}\r\n\r\n.u-float-right {\r\n float: right;\r\n}\r\n\r\n.u-float--image-left {\r\n @extend .u-float-left;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n\r\n @media (min-width: 38em) {\r\n @include margin-right('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n}\r\n\r\n.u-float--image-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n\r\n @media (min-width: 38em) {\r\n @include margin-left('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n}\r\n\r\n.u-fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n z-index: 1;\r\n\r\n object-fit: cover;\r\n}\r\n\r\n.u-fill--link {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-indent: 200%;\r\n}\r\n\r\n.u-relative {\r\n position: relative;\r\n}\r\n\r\n.u-sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.u-sticky--gutter {\r\n @include space(\"top\", \"gutter\");\r\n}\r\n\r\n.u-split {\r\n display: flex;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &--top {\r\n align-items: flex-start;\r\n }\r\n\r\n &--bottom {\r\n align-items: flex-end;\r\n }\r\n\r\n & > :first-child {\r\n @include margin-right(\"s\");\r\n }\r\n\r\n @supports (gap: 1rem) {\r\n @include gap(\"s-m\");\r\n \r\n & > :first-child {\r\n margin-right: unset;\r\n }\r\n }\r\n}\r\n\r\n.u-row {\r\n display: flex;\r\n @include gap(\"s-l\");\r\n}\r\n\r\n@supports (object-fit: contain) {\r\n .u-object-contain {\r\n object-fit: contain;\r\n }\r\n}\r\n\r\n@supports (object-fit: cover) {\r\n .u-2\\/1 {\r\n aspect-ratio: 2 / 1;\r\n object-fit: cover;\r\n object-position: 75% 50%;\r\n }\r\n}\r\n\r\n\r\n@media (min-width: 640px) {\r\n .u-md-hidden {\r\n display: none !important;\r\n }\r\n}\r\n\r\n// Used to hide un-compiled Vue code - Do not remove\r\n[v-cloak] {\r\n display: none;\r\n}",".u-flow {\r\n &--3xs {\r\n @include flow('3xs');\r\n }\r\n\r\n &--2xs {\r\n @include flow('2xs');\r\n }\r\n\r\n &--xs {\r\n @include flow('xs');\r\n }\r\n\r\n &--s,\r\n & {\r\n @include flow('s');\r\n }\r\n\r\n &--m {\r\n @include flow('m');\r\n }\r\n\r\n &--s-m {\r\n @include flow('s-m');\r\n }\r\n\r\n &--s-l {\r\n @include flow('s-l');\r\n }\r\n\r\n &--m-xl {\r\n @include flow('m-xl');\r\n }\r\n\r\n &--l {\r\n @include flow('l');\r\n }\r\n\r\n &--xl {\r\n @include flow('xl');\r\n }\r\n\r\n &--l-2xl {\r\n @include flow('l-2xl');\r\n }\r\n\r\n &--3xl {\r\n @include flow('3xl');\r\n }\r\n\r\n &--prose > + ,\r\n // Fix for Tridion XPM markup interrupting u-flow--prose spacing\r\n &--prose > [property='a:Content'] > + * {\r\n margin-top: var(--flow, 1em);\r\n }\r\n\r\n &--gutter {\r\n @include flow('gutter');\r\n }\r\n\r\n &--lined {\r\n & > * + * {\r\n @include padding-top('m-xl');\r\n @include margin-top('m-xl');\r\n border-top: 1px solid color('petrol', 'step-2');\r\n clear: both;\r\n }\r\n }\r\n}\r\n",".u-hr {\r\n margin: 0;\r\n border: none;\r\n @include padding-bottom('m-xl');\r\n @include margin-bottom('m-xl');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-bottom {\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n @extend .u-hr\r\n}",".u-ellipsis {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n max-width: 0;\r\n width: 100%;\r\n}","// Scroll shadows\r\n// Helps identify when an element has overflow i.e. can be scrolled\r\n@mixin scroll-shadows($direction:vertical,$background-color:white) {\r\n @supports (background-attachment: local) {\r\n $cover-size: 54px;\r\n $shadow-size: 27px;\r\n $cover-direction: to bottom;\r\n $shadow-position-start: 50% 0;\r\n $shadow-position-end: 50% 100%;\r\n\r\n @if $direction == vertical {\r\n background-position: \r\n center top, \r\n center bottom, \r\n center top, \r\n center bottom;\r\n background-size: \r\n 100% $cover-size, \r\n 100% $cover-size, \r\n 100% $shadow-size, \r\n 100% $shadow-size;\r\n }\r\n \r\n @else if $direction == horizontal {\r\n background-position: \r\n left center, \r\n right center, \r\n left center, \r\n right center;\r\n background-size: \r\n $cover-size 100%, \r\n $cover-size 100%, \r\n $shadow-size 120%, \r\n $shadow-size 120%;\r\n $cover-direction: to right;\r\n $shadow-position-start: 0 50%;\r\n $shadow-position-end: 100% 50%;\r\n }\r\n\r\n background-repeat: no-repeat;\r\n background-color: $background-color;\r\n background-attachment: local, local, scroll, scroll;\r\n background-image: \r\n linear-gradient(\r\n $cover-direction, \r\n $background-color 50%, \r\n transparent),\r\n linear-gradient(\r\n $cover-direction, \r\n transparent, \r\n $background-color 50%),\r\n radial-gradient(\r\n farthest-side at $shadow-position-start, \r\n transparentize(darken($background-color,40%), 0.7), \r\n transparent),\r\n radial-gradient(\r\n farthest-side at $shadow-position-end, \r\n transparentize(darken($background-color,40%), 0.7), \r\n transparent);\r\n }\r\n}\r\n\r\n.u-scroll-shadows--v {\r\n @include scroll-shadows\r\n}\r\n\r\n.u-scroll-shadows--h {\r\n @include scroll-shadows(horizontal)\r\n}"],"names":[],"version":3,"file":"main.css.map"}
1	+ {"mappings":"AEcA,6NCaA,8GAIA,4GAIA,8FAIA,8GAIA,sHC8DA,mMAWA,qCACE,uDAKF,2nDAWA,6NASA,+NASA,uNCrIA,88EAkCA,mCACE,gDErDF,uECCA,uCAMA,iHASA,4BAIA,+CASA,sDAOA,gEAWA,gBAYA,8LAIA,sCAaA,wBAIA,uBAIA,uCAQA,8BAOA,+BAOA,+JAcA,qBAIA,oCAOA,uCACE,qFCpIF,0EAKA,iCAKE,soBCVF,uBAeE,mDAMA,wJAOE,6HAKF,oRAKE,gFAQF,2EAMA,yCAIA,qKAQA,gIAWA,gGAKA,oCAQE,sGAKA,uJAOF,6DAKE,kHAKF,gDAKA,8DAIA,gFAMA,sEAOA,wBACE,oGAGE,+EAKF,iGAKF,iHAUF,qDClGA,oJAQE,0DAMA,+CAIA,2CAIA,2CAKE,wBA1DF,oIAKE,+DAIA,+CAMA,gJAKE,0EAIA,0DAuCJ,qDAGE,wBAlEF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,yGAoDF,wBA5EF,yIAKE,oEAIA,oDAMA,qJAKE,+EAIA,+DA0DF,0BAlFF,0IAKE,qEAIA,qDAMA,sJAKE,gFAIA,gEAgEF,kDAxFF,sIAKE,iEAIA,iDAMA,kJAKE,4EAIA,4DAoEF,wBA5FF,iJAKE,iEAIA,iDAMA,6JAKE,4EAIA,4DA0EF,kDAlGF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,iEA8EF,wBAtGF,sJAKE,sEAIA,sDAMA,kKAKE,iFAIA,iEAoFF,oDA5GF,4IAKE,uEAIA,uDAMA,wJAKE,kFAIA,kEAwFF,wBAhHF,uJAKE,uEAIA,uDAMA,mKAKE,kFAIA,kEA8FF,kDAtHF,2JAKE,wFAIA,qFAMA,iLAKE,6GAIA,0GAkGF,wBA1HF,4JAKE,wFAIA,qFAMA,kLAKE,6GAIA,0GAwGF,oDAhIF,2IAKE,sEAIA,sDAMA,uJAKE,iFAIA,iEA4GF,wBApIF,4IAKE,sEAIA,sDAMA,wJAKE,iFAIA,iEAkHF,6BADF,kWASI,qIAQA,4DAOJ,wBACE,yNAQF,wBACE,oFAKA,6aAeA,kfAiBA,kcAgBA,0JAOA,oGAIA,sGASA,4CAIA,yCAIA,6BAIA,+GAKA,iHAMF,wBACE,mSAWA,oSCjTA,6DAGI,mEAKJ,8KAOI,mZAYA,8TAMJ,sGAKI,6DAKJ,2FC5CJ,uOASE,8BAIA,4BAIA,+DAIE,sCAKF,+HAUA,mIAQA,iGAGE,gFAGE,yJASJ,4DAKA,4DAKA,0DCpEA,qGAMA,uGAME,mKAQF,4DAIE,6DAMF,qCC/BF,uQAaA,igBA2BE,+JAOA,0KAYA,8CAIA,4EAKA,mHAOA,gEAGE,+HAMF,yHAGE,yQAMF,0DAGE,mHAMF,4GAME,yIAOF,4EAGE,uJAMF,+GAKE,sKAOF,qHAKE,yMAQF,oHAKA,0EAIE,gGAMA,8CACE,gMCnKN,mLAWE,mJASA,+CAKA,6BAGE,kCAKF,6JAME,uGAMA,6LAOA,qGAMA,qLAOA,0GAMA,6LAKF,wBA5EF,yBA+EI,kDAIA,kEAKE,0FAMA,yGChGN,iGAOE,+CAIE,wDAKF,mDAIE,oEAKA,wEAMF,0HAMA,8HAMA,kFAME,gDAMF,8FAKA,qEAMA,iFAQE,qEAKE,uGAIA,mIAKF,wBACE,0DAIA,gHAOE,sIAKA,sJAMA,4FAKA,6DACE,+JAIA,gOAjCN,wBAuCE,+IAUF,yHAKA,wBACE,yIAQF,wBACE,yHAKA,4HAQF,wBACE,+GX5IJ,+DWsJA,8JAOA,8HAIA,6HAOA,+EAIA,+EAIA,uBAIA,oIAKA,0FAIA,2CAIA,gFAMA,wBACE,gGAOF,uMAUA,4FAIA,2EAIA,+CXjOA,gEWwOE,kCAIA,qEX5OF,mEWyPE,+FAKA,4EAMA,0KAKA,6FAGA,wDAGA,wDAKF,oEAIA,yIAOE,sEAIE,yJAYF,oCAIA,uCAIA,uEAKF,uPAeE,oDAMF,8CAIA,gIAOA,+GX5VA,4EWoWI,2CAKF,+CAIA,sCAKF,2FAKA,wEASE,wEAIA,4DAGE,yGAIA,8FAIE,qIASJ,wBACE,4GAKA,0GAIE,+EAON,mDAGE,4FAMA,0FAKA,qDAIA,qFAIA,iFAKA,6DAIA,6gBAQJ,+GAIE,qKAWF,2FCzfA,+BAGE,qCAIA,6DAIA,gCCXF,8GAQE,0EAIA,iHAME,kFAUF,qGAIE,4GAKA,2FAOE,4DAKF,yDAKF,gJAQE,iDAKF,yEAKE,gFCxEJ,sDAIE,wEAGE,wBACE,wFAON,yCAGE,4EAIA,8EAKI,sEAON,2GAKI,oHAWA,uIAOA,+CAKF,uKAOE,4EAMA,6FAIE,4MAWE,wOAiBF,4EAKA,yEAIA,4EAKA,yLASE,yDAIA,4DAIA,6DAON,wBACE,0CAIA,2CAMJ,yCACE,qIAKA,uIAKA,0IAKA,wIAKA,qIAKA,2ICtLF,2BAGE,oEAKE,0ECRJ,8DAIE,wEAIA,2EAIA,wBAZF,sCAeI,iDAIA,iEAIE,4GCvBN,6FAIE,8CAKA,oIAIE,wBAJF,0HASA,gFAIA,gDAIA,wGjBAA,4EiBSE,8CAKF,yGAOE,mIAME,kHAUA,wEAMJ,iCAGE,oEAIA,sHAKF,wBACE,kCAIA,mCAKF,sFC3FF,mLASE,+BAIA,wFAME,uDAKA,oDAIA,wCAfF,0CCbF,sHAME,gCAIA,qHAKA,yJAOA,oCAIE,sEAIA,qEAKF,wFAIE,kHAWF,mEAMA,wDAKE,kGAMF,0EAIE,sEAIA,2CAKF,kFAIE,oEAMF,sCAIA,uCAIA,wBACE,qJAOA,+FAIE,sEAMJ,0BACE,qFAOJ,qFC5HA,2BAGE,8BAIA,mCAGE,8BAGE,qHAQA,4CAMJ,qHAQE,qHAME,gFAOA,+CChDN,gCAGE,6EAKA,qFAOE,+BAKF,oCAGE,uFAMF,yBACE,gDAKF,yBACE,iEAIA,oSAmBE,6FAMA,gDAKF,kJAME,0GAQA,uFAIA,giBAaE,wDAMJ,qCAKA,+FAKE,iEAMJ,yBA3HF,0BA8HI,kCAIA,4FAOA,yFAMA,6JAME,uDAIA,qCAIA,uEAIA,+dAYF,0NAWE,yNAiBE,kHAjBF,4GA7DJ,yBAuFI,iCAvFJ,yBA2FI,qEA3FJ,yBA+FI,+HA/FJ,yBAoGI,0EAIE,6DAxGN,yBA+GE,qDAKF,0BACE,sFAMJ,6IAQE,0IAUE,yEAIA,wEC5QJ,sRAQA,mIAQE,6IAIA,gLAME,gOAYA,8QAcF,6DAKE,+DAIA,sRAKA,mCAIA,qFAKE,mEAMJ,6CAIE,yKAKF,oMAUE,0PAUA,wBApBF,4GAuBI,gMAKF,wBACE,kNAMJ,uGAGE,wBAHF,iLAOE,4IASE,wBATF,qNAcA,sMAWI,wBADF,4HAKE,60BAIA,8FAIA,oeAKF,yKAGE,wBAHF,8PAWI,iMAIA,uQAMJ,wFAOJ,0CAGE,oHASE,wBATF,6LAeE,mMAIE,wBAJF,sMAWE,0GAMA,wBANA,2IAgBA,wFAOF,4KAUE,wBAVF,gHAkBE,+EAGE,4KAeR,6FAIE,wBAJF,8IAUM,ucAIA,sDAIA,qQAON,iFAQE,wBARF,2BC3TF,6DCAA,4LAaE,8CAKA,mEAIA,0CAKA,gCAIA,wWAOA,oDAKA,iDAKW,kGAQX,uDAIE,oEAIA,6hBAYF,6CAGE,mDAKF,mJAMA,i0BAiBF,+BAKA,kFAQE,+CAKF,wFAMA,4DAME,mKAUE,gCAKF,8ICpJA,oSAQE,mRAaF,+KAOE,+LAOA,yLAOA,uPAaE,6HAMF,yFAKA,4IAYF,wGAKA,wRAiBA,qLAQA,oHAQA,kFAKA,kHAKA,8HAOA,2DCzIF,kIAUE,4PAWE,8MAgBF,oGAKA,4DAIA,uEAIA,4JAKA,+EAKE,mGAKE,4EAIF,yECrEJ,wFAKE,gEAKE,wDAKF,uGAQA,6HAQA,uKASE,sEAaF,wBACE,8DAKA,yEAOJ,0DAIA,kCCtEA,mI5B0BE,0D4BpBA,4CCNF,iLAYE,qCAIA,uPAaA,oLAYA,gFAIE,kDAKF,oFAIA,gJAMA,wJAQA,uEAMA,0EAKE,2EAKA,qDAMJ,wCACE,6CAKE,oGC/FF,mCAIA,+BAGE,iDAKF,sFAKA,oFAIE,wBAJF,4CAUE,mGAKE,wDCjCN,0G/B0BE,8DgC1BF,4KAaE,2VAIA,yDAMA,yCAIA,iGAMA,6GAKA,8FAKA,iIAOA,wBACE,sEAKA,iDCxDJ,8IAMI,0OAgBA,iHAKA,oDAIA,6JAMA,+BAIA,+IAIE,qFC7CN,yEAKE,sGAME,gDAIA,0FAQF,+CAMF,oDAIA,yCACE,qEAKA,4FAOF,yCACE,6GC/CF,uLAQE,gCAIA,gCAGE,sBAHF,8BCXA,kDAKA,sHAQA,mFAGE,+DAMF,8DCvBF,0GAIE,uCAIA,qCAIA,sKAME,wBANF,+CAWA,gKAOA,oKAOA,4JAOA,sHAKA,+ECjDF,kKAQE,8CAIA,gLAcE,qJAMF,4DAKA,sDAKE,8DAMF,yBAEI,iCAGE,6CAON,0BAIA,kEAIA,kEAIA,oEAMA,6DAKE,2EAMA,+DAMA,mGAMA,0DAMF,wBACE,0DAKF,mCAGE,wBACE,8BAMJ,wBAEI,4IAQA,wCAIA,8IAMA,oIAKE,+GCnJN,uCAGE,8CAKF,gCAGE,8CAKF,qDAGE,2DAKF,8CAGE,mFAMF,kFAIE,qGAME,uCAMJ,wRACE,mCAcA,mCAfF,qCAmBE,qEAIA,2DAIE,qDAOJ,+EAKA,2CAIA,0BAGE,+BChGJ,4GAQE,kDAKA,uEAMA,0DCnBF,2HAKE,6JAQE,4FAOF,4CAIE,iDAJF,uIAUI,uDAMJ,0BAKA,+EAIE,kGAMF,mNCjDM,wFAMA,4EAIA,qFAKA,oHASJ,iGAMI,yEAII,yDAKJ,gEAII,qIAQR,2DAKA,gDAIA,sFC9DJ,uOAKE,iHAMA,8F3CgIA,yC2ChIA,uF3CuIA,yCACE,iH2ClIF,6E3C0HA,yC2C1HA,sE3CiIA,yCACE,mF2C7HF,6EAIA,iIAIA,yFAIA,4HAIA,0EAIA,4EAIA,yFAKA,sIAOA,8FAKA,yFC/DF,uJAWE,2DAKE,wCAGE,0GAUJ,8JAWA,iaAKA,uaAKA,sGASA,8CC1DE,6HAKI,yGAGI,yYAKJ,4OAaA,wBACI,8CAKJ,yWAMJ,+D7CbF,wE6CmBM,iQAMI,0QAGI,iDAHJ,0YASQ,iVAMR,oKClEZ,WECE,qFAAA,mFAAA,iFAAA,mFAAA,oFAAA,mFAAA,oFAAA,oFAAA,oFAAA,mFAAA,mFAAA,oFAAA,uFAKF,+FAIE,wDAMF,oCAIA,oCAIA,sCAIA,2CAIA,iDChCA,yMAME,0OAIA,yGAIA,gGAIA,8HAGE,2ICpBF,kCACA,gDAGI,0CACA,wDADA,0CACA,wDADA,yCACA,uDADA,yCACA,uDADA,yCACA,uDALJ,gCACA,8CAGI,wCACA,sDADA,uCACA,qDADA,uCACA,qDADA,uCACA,qDALJ,iCACA,+CAGI,yCACA,uDADA,wCACA,sDADA,wCACA,sDADA,wCACA,sDALJ,+BACA,6CAGI,uCACA,qDADA,sCACA,oDADA,sCACA,oDADA,sCACA,oDALJ,wCACA,sDAGI,gDACA,8DADA,+CACA,6DADA,+CACA,6DADA,+CACA,6DALJ,0CACA,wDAGI,kDACA,gEADA,iDACA,+DADA,iDACA,+DADA,iDACA,+DALJ,6BACA,2CAGI,iCACA,+CADA,wCACA,sDADA,wCACA,sDADA,uCACA,qDADA,uCACA,qDADA,uCACA,qDALJ,8BACA,6ECFF,yCAGI,6ECHJ,wQASE,+LAKA,yDAKA,0FCnBF,+BAIA,+CAIA,6CAIA,mDAIA,2DAIA,kDAIA,2BAIA,0CAIA,sCAIA,sCCpCA,2OAWA,kEAKA,mCAIA,uCAIA,yCAIA,uDAIA,kEAIA,+IAIA,0FAKE,wBALF,4GAYA,2FAKE,wBALF,2GAYA,0LAWA,mKAMA,wCAIA,0CAKA,uDAIA,2GAOE,+CAIA,gDAIA,8EAIA,sBAnBF,iDAsBI,oDAMJ,4DAKA,gCACE,gDAKF,8BACE,6EAQF,yBACE,+CAMF,iCtD3HE,wEAAA,0JAAA,uEAAA,yFAAA,mEAAA,uEAAA,uEAAA,yEAAA,mEAAA,qEAAA,2EAAA,wEuDwBA,2GvDxBA,uEuDmCE,iKR5DJ,qCAGA,mEAGA,mEAGA,mEAGA,qEAGA,uEAGA,uEAGA,yEAIA,2CAGA,4EAGA,4EAGA,4EAGA,8EAGA,gFAGA,gFAGA,kFAIA,uCAGA,sEAGA,sEAGA,sEAGA,wEAIA,yCAGA,yEAGA,yEAGA,yEAGA,2EAIA,6BAGA,4DAGA,uDAGA,uDAGA,uDAGA,yDAIA,0HAIA,mHAIA,mHAIA,yHAIA,mHAIA,sHAIA,yHAIA,4HAIA,+HAKA,mHAIA,mHAIA,mHAIA,sHAIA,4HAOA,uCAGA,6CAGA,uEAGA,wEAGA,oEAGA,oEAGA,oEAGA,sEAGA,wEAGA,wEAGA,0EAGA,4EAGA,8EAIA,6CAGA,6EAGA,6EAGA,6EAGA,+EAGA,iFAGA,iFAGA,iFAGA,mFAGA,mFAIA,yCAGA,0EAGA,2EAGA,uEAGA,uEAGA,uEAGA,yEAIA,2CAGA,8EAGA,0EAGA,0EAGA,0EAGA,4EAIA,+BAGA,wDAGA,wDAGA,wDAGA,0DAIA,yHAIA,kHAIA,wHAIA,kHAIA,kHAIA,qHAKA,0HAIA,sHAIA,yHAIA,kHAIA,kHAIA,kHAIA,qHAKA,4DAOA,mCAIA,kCSnWA,oLAQA,qDAIA,2DAIA,6CChBA,uGCGI,yCA2DJ,waA3DI,yCA+DJ","sources":["scss/main.css","src/assets/scss/main.scss","src/assets/scss/tools/breakout.scss","src/assets/scss/tools/cutoff.scss","src/assets/scss/foundations/typography.scss","src/assets/scss/foundations/space.scss","src/assets/scss/tools/index.scss","src/assets/scss/foundations/animation.scss","src/assets/scss/elements/reset.scss","src/assets/scss/elements/typography.scss","src/assets/scss/objects/prose.scss","src/assets/scss/objects/grid.scss","src/_includes/components/accordion/accordion.scss","src/_includes/components/alert/alert.scss","src/_includes/components/breadcrumb/breadcrumb.scss","src/_includes/components/button/button.scss","src/_includes/components/campaign/campaign.scss","src/_includes/components/card/card.scss","src/_includes/components/card/industry-card.scss","src/_includes/components/card/product-comparison-card.scss","src/_includes/components/comparison-table/comparison-table.scss","src/_includes/components/embed/embed.scss","src/_includes/components/featured-article-card/featured-article-card.scss","src/_includes/components/features-table/features-table.scss","src/_includes/components/filter-search/filter-search.scss","src/_includes/components/footer/footer.scss","src/_includes/components/gallery/gallery.scss","src/_includes/components/header/header.scss","src/_includes/components/hero/hero.scss","src/_includes/components/icon/icon.scss","src/_includes/components/input/input.scss","src/_includes/components/input/radio.scss","src/_includes/components/input/toggle.scss","src/_includes/components/internal-nav/internal-nav.scss","src/_includes/components/meta-box/meta-box.scss","src/_includes/components/off-canvas/off-canvas.scss","src/_includes/components/option-list/option-list.scss","src/_includes/components/post-meta/post-meta.scss","src/_includes/components/product-signpost/product-signpost.scss","src/_includes/components/quote/quote.scss","src/_includes/components/scroll-spy/scroll-spy.scss","src/_includes/components/series/series.scss","src/_includes/components/signpost/signpost.scss","src/_includes/components/slat/slat.scss","src/_includes/components/table/table.scss","src/_includes/components/tabs/tabs.scss","src/_includes/components/twi/twi.scss","src/_includes/components/usp/usp.scss","src/assets/scss/components/form.scss","src/assets/scss/components/headings.scss","src/assets/scss/components/lightbox.scss","src/assets/scss/components/product-finder.scss","src/assets/scss/utilities/index.scss","src/assets/scss/utilities/space.scss","src/assets/scss/utilities/typography.scss","src/assets/scss/utilities/link.scss","src/assets/scss/utilities/colour.scss","src/assets/scss/utilities/disabled.scss","src/assets/scss/utilities/wrap.scss","src/assets/scss/utilities/flex.scss","src/assets/scss/utilities/display.scss","src/assets/scss/utilities/flow.scss","src/assets/scss/utilities/hr.scss","src/assets/scss/utilities/ellipsis.scss","src/assets/scss/utilities/scroll-shadows.scss"],"sourcesContent":[".u-breakout {\n left: 50%;\n left: calc(50% + var(--scrollbarWidth) / 2.0001);\n width: 100vw;\n width: calc(100vw - var(--scrollbarWidth) );\n padding-left: safe-space(0);\n padding-right: safe-space(0);\n position: relative;\n transform: translateX(-50vw);\n}\n\n.u-cutoff {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n}\n\n.u-cutoff--top-right {\n clip-path: polygon(0 0, calc(100% - var(--gutter) ) 0, 100% var(--gutter), 100% 100%, 0 100%);\n}\n\n.u-cutoff--top-left {\n clip-path: polygon(0 var(--gutter), var(--gutter) 0, 100% 0, 100% 100%, 0 100%);\n}\n\n.u-cutoff--bottom-left {\n clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter) 100%, 0 calc(100% - var(--gutter) ) );\n}\n\n.u-cutoff--xl {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xl) ), calc(100% - var(--space-xl) ) 100%, 0 100%);\n}\n\n:root {\n --fluid-min-width: 320;\n --fluid-max-width: 1332;\n --fluid-screen: 100vw;\n --fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width) ) );\n}\n\n@media screen and (min-width: 1332px) {\n :root {\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\n }\n}\n\n:root {\n --f--2-min: 12.64;\n --f--2-max: 12.5;\n --step--2: calc( ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min) ) * var(--fluid-bp) );\n --f--1-min: 14.22;\n --f--1-max: 15;\n --step--1: calc( ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min) ) * var(--fluid-bp) );\n --f-0-min: 16;\n --f-0-max: 18;\n --step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min) ) * var(--fluid-bp) );\n --f-1-min: 18;\n --f-1-max: 21.6;\n --step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min) ) * var(--fluid-bp) );\n --f-2-min: 20.25;\n --f-2-max: 25.92;\n --step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min) ) * var(--fluid-bp) );\n --f-3-min: 22.78;\n --f-3-max: 31.1;\n --step-3: calc( ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min) ) * var(--fluid-bp) );\n --f-4-min: 25.63;\n --f-4-max: 37.32;\n --step-4: calc( ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min) ) * var(--fluid-bp) );\n --f-5-min: 28.83;\n --f-5-max: 44.79;\n --step-5: calc( ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min) ) * var(--fluid-bp) );\n --f-6-min: 32.44;\n --f-6-max: 53.75;\n --step-6: calc( ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min) ) * var(--fluid-bp) );\n --f-7-min: 36.49;\n --f-7-max: 64.5;\n --step-7: calc( ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min) ) * var(--fluid-bp) );\n --f-8-min: 41.05;\n --f-8-max: 77.4;\n --step-8: calc( ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min) ) * var(--fluid-bp) );\n --f-9-min: 46.18;\n --f-9-max: 92.88;\n --step-9: calc( ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min) ) * var(--fluid-bp) );\n --f-10-min: 51.96;\n --f-10-max: 111.45;\n --step-10: calc( ((var(--f-10-min) / 16) * 1rem) + (var(--f-10-max) - var(--f-10-min) ) * var(--fluid-bp) );\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"../Inter-Regular.ed77b881.woff2\") format(\"woff2\"), url(\"../Inter-Regular.ca6858d7.woff\") format(\"woff\");\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(\"../Inter-SemiBold.dd034768.woff2\") format(\"woff2\"), url(\"../Inter-SemiBold.cc1168df.woff\") format(\"woff\");\n}\n\n@font-face {\n font-family: Inter;\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(\"../Inter-Bold.af5441a3.woff2\") format(\"woff2\"), url(\"../Inter-Bold.419e8c71.woff\") format(\"woff\");\n}\n\n:root {\n --max-screen: 83.25;\n --fc-screen: 100vw;\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20) );\n --fc-base: 18;\n --fc-3xs: 4.5;\n --space-3xs: calc(var(--fc-3xs) / 16 * 1rem);\n --fc-2xs: 9;\n --space-2xs: calc(var(--fc-2xs) / 16 * 1rem);\n --fc-xs: 13.5;\n --space-xs: calc(var(--fc-xs) / 16 * 1rem);\n --fc-s: 18;\n --space-s: calc(var(--fc-s) / 16 * 1rem);\n --fc-m: 27;\n --space-m: calc(var(--fc-m) / 16 * 1rem);\n --fc-l: 36;\n --space-l: calc(var(--fc-l) / 16 * 1rem);\n --fc-xl: 54;\n --space-xl: calc(var(--fc-xl) / 16 * 1rem);\n --fc-2xl: 72;\n --space-2xl: calc(var(--fc-2xl) / 16 * 1rem);\n --fc-3xl: 108;\n --space-3xl: calc(var(--fc-3xl) / 16 * 1rem);\n --fc-4xl: 144;\n --space-4xl: calc(var(--fc-4xl) / 16 * 1rem);\n --space--3xs: calc( ((var(--fc-) / 16) * 1rem) + (var(--fc-3xs) - var(--fc-) ) * var(--fluid-bp) );\n --space-3xs-2xs: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-2xs) - var(--fc-3xs) ) * var(--fluid-bp) );\n --space-2xs-xs: calc( ((var(--fc-2xs) / 16) * 1rem) + (var(--fc-xs) - var(--fc-2xs) ) * var(--fluid-bp) );\n --space-xs-s: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-s) - var(--fc-xs) ) * var(--fluid-bp) );\n --space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s) ) * var(--fluid-bp) );\n --space-m-l: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-l) - var(--fc-m) ) * var(--fluid-bp) );\n --space-l-xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-xl-2xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-xl) ) * var(--fluid-bp) );\n --space-2xl-3xl: calc( ((var(--fc-2xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-2xl) ) * var(--fluid-bp) );\n --space-3xl-4xl: calc( ((var(--fc-3xl) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-3xl) ) * var(--fluid-bp) );\n --space-s-l: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-l) - var(--fc-s) ) * var(--fluid-bp) );\n --space-s-m: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-m) - var(--fc-s) ) * var(--fluid-bp) );\n --space-xs-l: calc( ((var(--fc-xs) / 16) * 1rem) + (var(--fc-l) - var(--fc-xs) ) * var(--fluid-bp) );\n --space-m-xl: calc( ((var(--fc-m) / 16) * 1rem) + (var(--fc-xl) - var(--fc-m) ) * var(--fluid-bp) );\n --space-l-2xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-2xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-s-xl: calc( ((var(--fc-s) / 16) * 1rem) + (var(--fc-xl) - var(--fc-s) ) * var(--fluid-bp) );\n --space-l-3xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-xl-3xl: calc( ((var(--fc-xl) / 16) * 1rem) + (var(--fc-3xl) - var(--fc-xl) ) * var(--fluid-bp) );\n --space-l-4xl: calc( ((var(--fc-l) / 16) * 1rem) + (var(--fc-4xl) - var(--fc-l) ) * var(--fluid-bp) );\n --space-3xs-m: calc( ((var(--fc-3xs) / 16) * 1rem) + (var(--fc-m) - var(--fc-3xs) ) * var(--fluid-bp) );\n --gutter: var(--space-s-l);\n}\n\n@media screen and (min-width: 75em) {\n :root {\n --fc-screen: calc(var(--max-screen) * 1rem);\n }\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n, :before, :after {\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n margin: 0;\n display: flex;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nblockquote, pre, ol, ul, figure {\n margin: 0;\n padding: 0;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n border: none;\n display: block;\n}\n\narticle, aside, figure, footer, header, aside, main, nav {\n display: block;\n}\n\niframe {\n border: none;\n}\n\nbody {\n letter-spacing: -.01em;\n font: 400 18px / 1.2 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-size: var(--step-0);\n color: #333;\n}\n\nh1, h2, h3, h4, h5, h6, p, ul, ol, dl {\n margin: 0;\n}\n\nul, ol, p {\n line-height: 1.2;\n}\n\na {\n text-decoration: none;\n}\n\na, a:hover {\n cursor: pointer;\n color: inherit;\n}\n\n.mp ol, .mp ul {\n list-style: none;\n}\n\ncite, address {\n font-style: normal;\n}\n\n[type=\"submit\"], [type=\"button\"], button {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n background: none;\n border: none;\n border-radius: 0;\n padding: 0;\n}\n\nlabel {\n cursor: pointer;\n}\n\nfieldset {\n border: none;\n padding: .01em 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n {\n scroll-behavior: auto !important;\n transition: none !important;\n animation: none !important;\n }\n}\n\nbody {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n:focus {\n outline: 2px solid #005461;\n}\n\n.body--blog .c-h--page-title, .body--blog .c-hero__content, .body--blog .o-prose--blog, .body--blog .u-lede, .body--blog .c-event-card, .body--blog .c-h--step-4, .body--blog .c-h--step-3, .body--blog .c-off-canvas__header, .body--blog .c-fieldset legend, .c-fieldset .body--blog legend, .body--blog .o-prose h2, .o-prose .body--blog h2, .body--blog .c-h--step-2, .body--blog .o-prose h3, .o-prose .body--blog h3, .body--blog .c-h--step-1, .body--blog .c-product-comparison-card__heading, .body--blog .o-prose h4, .o-prose .body--blog h4, .body--blog .c-card__title {\n -moz-font-feature-settings: \"salt\";\n -webkit-font-feature-settings: \"salt\";\n font-feature-settings: \"salt\";\n}\n\n.o-prose {\n color: inherit;\n}\n\n.o-prose p, .o-prose ul, .o-prose ol {\n line-height: 1.6;\n}\n\n.o-prose p a:not(.c-button), .o-prose li a:not(.c-button), .o-prose td a:not(.c-button) {\n color: #006daf;\n text-underline-offset: 3px;\n text-decoration: underline;\n}\n\n.o-prose p a:not(.c-button):hover, .o-prose li a:not(.c-button):hover, .o-prose td a:not(.c-button):hover {\n text-decoration: none;\n}\n\n.o-prose ul li {\n margin-left: 1em;\n padding-left: .5rem;\n list-style: outside url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"8\\\" height=\\\"20\\\" viewBox=\\\"0 0 10 20\\\"><circle cx=\\\"5\\\" cy=\\\"14\\\" r=\\\"3.5\\\" fill=\\\"%2313AA13\\\" fill-rule=\\\"evenodd\\\"/></svg>\");\n}\n\n.o-prose ul li h3, .o-prose ul li h4 {\n color: #13aa13;\n font-size: 1em;\n line-height: 1.6;\n}\n\n.o-prose ol li {\n margin-left: 1.125em;\n padding-left: .375rem;\n list-style: decimal;\n}\n\n.o-prose ol ol li {\n list-style: lower-alpha;\n}\n\n.o-prose pre {\n padding: 13.5px;\n padding: var(--space-xs);\n letter-spacing: -.01em;\n font-size: 15px;\n line-height: 1.4;\n font-size: var(--step--1);\n background: #ebf1f2;\n overflow-x: auto;\n}\n\n.o-prose li code, .o-prose p code {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #ebf1f2;\n padding: .25em;\n}\n\n.o-prose figcaption {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n display: block;\n}\n\n.o-prose figure > * + * {\n margin-top: .5em;\n}\n\n.o-prose ol ul, .o-prose ol ol, .o-prose ul ul, .o-prose ul ol {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.o-prose ol li + li, .o-prose ol li > ul, .o-prose ol li > ol, .o-prose ul li + li, .o-prose ul li > ul, .o-prose ul li > ol {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.o-prose ol, .o-prose ul, .o-prose > pre {\n --flow: var(--space-s-m);\n}\n\n.o-prose ol:not(:last-child), .o-prose ul:not(:last-child), .o-prose > pre:not(:last-child) {\n margin-bottom: var(--flow);\n}\n\n.o-prose h2, .o-prose h3 {\n --flow: var(--space-m-l);\n}\n\n.o-prose h2 {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\n.o-prose figure, .o-prose > img {\n --flow: var(--space-l-xl);\n margin-bottom: var(--flow);\n}\n\n.o-prose blockquote {\n --flow: var(--space-m-l);\n margin-bottom: var(--flow);\n}\n\n@media (min-width: 35em) {\n .o-prose:not(.o-prose--left-blockquote) blockquote {\n padding-left: 108px;\n padding-left: var(--space-3xl);\n }\n\n .o-prose:not(.o-prose--left-blockquote) blockquote:before {\n left: var(--space-xl);\n }\n\n .o-prose.o-prose--left-blockquote blockquote {\n padding-right: 108px;\n padding-right: var(--space-3xl);\n }\n}\n\n.o-prose--with-lede > p:first-of-type {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #00a2c2;\n}\n\n.o-featured-image {\n margin-left: calc(-1 * var(--gutter) );\n}\n\n.o-grid, .c-footer__sections {\n margin-bottom: -18px;\n margin-bottom: calc(-1 * var(--gutter) );\n width: 100%;\n flex-wrap: wrap;\n justify-content: stretch;\n display: flex;\n}\n\n.o-grid--float:after {\n content: \" \";\n clear: both;\n display: table;\n}\n\n.o-grid--between {\n justify-content: space-between;\n}\n\n.o-grid--no-height-match {\n align-items: start;\n}\n\n.o-grid > , .c-footer__sections > {\n width: 100%;\n}\n\n@media (min-width: 40em) {\n .o-grid--of-two > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n.o-grid--of-two-switch {\n justify-content: space-between;\n}\n\n@media (min-width: 40em) {\n .o-grid--of-two-switch > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-switch > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-switch > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-switch.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-switch.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-switch.o-grid--s > :nth-child(2n+1), .o-grid--of-two-switch > :nth-child(2n+2) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-two-late > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-late > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-late.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-late.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) {\n .o-grid--of-two-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-two-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-two-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-two-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-two-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-two-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 54.9375em) {\n .o-grid--of-three > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-three > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 67.9375em) {\n .o-grid--of-three-late > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-late > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-late.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 68em) {\n .o-grid--of-three-late > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-late > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-late > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-late.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-late.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) and (max-width: 54.9375em) {\n .o-grid--of-three-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--of-three-early > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--gutter) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-three-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-three-early > :nth-child(3n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-three-early.o-grid--s > * {\n width: calc(33.3333% - 12.1px);\n width: calc(33.3333% - 2 * var(--space-s) / 3 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-three-early.o-grid--s > :nth-child(3n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 38em) and (max-width: 59.9375em) {\n .o-grid--of-four > , .c-footer__sections > {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four > * + , .c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four > :nth-child(2n+1), .c-footer__sections > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four.o-grid--s > , .o-grid--s.c-footer__sections > {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > * + , .o-grid--s.c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > :nth-child(2n+1), .o-grid--s.c-footer__sections > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 60em) {\n .o-grid--of-four > , .c-footer__sections > {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--gutter) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four > * + , .c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four > :nth-child(4n+1), .c-footer__sections > :nth-child(4n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four.o-grid--s > , .o-grid--s.c-footer__sections > {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--space-s) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > * + , .o-grid--s.c-footer__sections > + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four.o-grid--s > :nth-child(4n+1), .o-grid--s.c-footer__sections > :nth-child(4n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 22.4em) and (max-width: 59.9375em) {\n .o-grid--of-four-early > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--gutter) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four-early > :nth-child(2n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four-early.o-grid--s > * {\n width: calc(50% - 9.1px);\n width: calc(50% - 1 * var(--space-s) / 2 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > :nth-child(2n+1) {\n margin-left: 0;\n }\n}\n\n@media (min-width: 60em) {\n .o-grid--of-four-early > * {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--gutter) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n }\n\n .o-grid--of-four-early > * + * {\n margin-left: 18px;\n margin-left: var(--gutter);\n }\n\n .o-grid--of-four-early > :nth-child(4n+1) {\n margin-left: 0;\n }\n\n .o-grid--of-four-early.o-grid--s > * {\n width: calc(25% - 13.6px);\n width: calc(25% - 3 * var(--space-s) / 4 - .1px);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > * + * {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .o-grid--of-four-early.o-grid--s > :nth-child(4n+1) {\n margin-left: 0;\n }\n}\n\n@media (max-width: 54.9375em) {\n .o-grid--swipeable {\n left: 50%;\n left: calc(50% + var(--scrollbarWidth) / 2.0001);\n width: 100vw;\n width: calc(100vw - var(--scrollbarWidth) );\n padding-left: var(--gutter);\n padding-right: var(--gutter);\n scroll-snap-type: x mandatory;\n scroll-padding: var(--gutter);\n -webkit-overflow-scrolling: touch;\n flex-wrap: nowrap;\n position: relative;\n overflow-x: scroll;\n transform: translateX(-50vw);\n }\n\n .o-grid--swipeable > * {\n max-width: 23em;\n width: calc(85vw - var(--gutter) * 2.333);\n scroll-snap-align: start;\n scroll-snap-stop: always;\n flex: none;\n }\n\n .o-grid--swipeable > * + * {\n margin-left: var(--gutter) !important;\n }\n}\n\n@media (max-width: 55em) {\n .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class=\"switch\"] > :nth-child(2n+2), .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class=\"switch\"] > :nth-child(2n+1) {\n position: static;\n }\n}\n\n@media (min-width: 55em) {\n .o-grid--4\\/7 > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+2) {\n width: 57.1429%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--8\\/4 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--8\\/4-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n width: 65.7143%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--4\\/8 > :nth-child(2n+1), .o-grid--4\\/7 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2), .o-grid--4\\/8-switch > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+1) {\n width: 31.4286%;\n }\n\n .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n margin-left: 2.85714%;\n margin-right: 0;\n }\n\n .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n max-width: 828px;\n }\n\n .o-grid[class=\"switch\"] > :nth-child(2n+1), [class=\"switch\"].c-footer__sections > :nth-child(2n+1) {\n order: 1;\n }\n\n .o-grid--layout, .o-grid--layout > :nth-last-child(1), .o-grid--layout > :nth-last-child(2) {\n margin-bottom: 0;\n }\n\n .o-grid--push {\n justify-content: space-between;\n }\n\n .o-grid--pull {\n justify-content: flex-start;\n }\n\n .o-grid--float {\n display: block;\n }\n\n .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class=\"switch\"] > :nth-child(2n+2) {\n float: left;\n }\n\n .o-grid--float:not([class=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class=\"switch\"] > :nth-child(2n+1) {\n float: right;\n }\n}\n\n@media (min-width: 70em) {\n .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n width: 74.2857%;\n }\n\n .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2) {\n width: 22.8571%;\n }\n}\n\n.c-accordion__item {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n}\n\n.c-accordion__item + .c-accordion__item {\n border-top: 1px solid #bfd3d6;\n}\n\n.c-accordion__title {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n cursor: pointer;\n font-weight: 700;\n position: relative;\n}\n\n.c-accordion__title:before {\n content: \"\";\n height: 1em;\n width: 1em;\n background-image: url(\"data:image/svg+xml;utf8,<svg width=\\\"18\\\" height=\\\"18\\\" viewBox=\\\"0 0 18 18\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path d=\\\"M9 1V17M1 9H17\\\" stroke=\\\"%23252525\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/></svg>\");\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n position: absolute;\n left: 0;\n}\n\n.c-accordion__item--open .c-accordion__title:before {\n background-image: url(\"data:image/svg+xml;utf8,<svg width=\\\"10\\\" height=\\\"2\\\" viewBox=\\\"0 0 10 2\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path d=\\\"M1 1H9\\\" stroke=\\\"%23252525\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\"/></svg>\");\n transform: scaleX(1.75);\n}\n\n.c-accordion__content {\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n margin-left: 0;\n display: none;\n}\n\n.c-accordion__item--open .c-accordion__content {\n display: block;\n}\n\n.c-accordion__title, .c-accordion__content {\n padding-left: 36px;\n padding-left: var(--space-l-xl);\n}\n\n.c-alert {\n --alert-border: #006daf;\n border-left: 4px solid #006daf;\n border-left-color: var(--alert-border);\n padding: 18px 18px 18px 54px;\n padding: var(--space-s) var(--space-s) var(--space-s) var(--space-xl);\n background: #ebf3f9;\n position: relative;\n}\n\n.c-alert.mp p {\n line-height: 1.6;\n}\n\n.c-alert > * + * {\n margin-top: 1em;\n}\n\n.c-alert a {\n color: var(--alert-border);\n text-decoration: underline;\n}\n\n.c-alert a:hover {\n text-decoration: none;\n}\n\n.c-alert .c-icon {\n color: #000;\n color: var(--alert-border);\n margin-top: 0;\n font-size: 1.5rem;\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n}\n\n.c-alert pre {\n max-width: 100%;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: none;\n padding: 0;\n overflow-x: auto;\n}\n\n.c-alert--multiline {\n padding: 18px 18px 18px 0;\n padding: var(--space-s) var(--space-s) var(--space-s) 0;\n}\n\n.c-alert--multiline > :not(.c-icon) {\n padding-left: 18px;\n padding-left: var(--space-s);\n}\n\n.c-alert--multiline > :not(.c-icon):first-child {\n color: var(--alert-border);\n padding-left: 54px;\n padding-left: var(--space-xl);\n font-size: inherit;\n line-height: 1.6;\n}\n\n.c-alert--warning {\n --alert-border: #f2a60d;\n background: #fef8ec;\n}\n\n.c-alert--success {\n --alert-border: #13aa13;\n background: #ecf8ec;\n}\n\n.c-alert--error {\n --alert-border: #ce0058;\n background: #fbebf2;\n}\n\n.c-breadcrumb__list {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n display: flex;\n overflow-x: auto;\n}\n\n.c-breadcrumb__item {\n font-size: var(--step--2);\n white-space: nowrap;\n align-items: center;\n display: inline-flex;\n}\n\n.c-breadcrumb__item .c-icon {\n margin-right: 4.5px;\n margin-right: var(--space-3xs);\n margin-left: 4.5px;\n margin-left: var(--space-3xs);\n color: #959595;\n transform: rotate(270deg);\n}\n\n.c-breadcrumb__link {\n color: #4796c5;\n text-decoration: underline;\n}\n\n.c-breadcrumb__link:hover {\n color: #4796c5;\n text-decoration: none;\n}\n\n.c-breadcrumb__current {\n color: #959595;\n}\n\n.c-button--reset {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n background: none;\n border: none;\n border-radius: 0;\n padding: 0;\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n}\n\n::-webkit-file-upload-button, .mp.c-button, .c-button {\n box-shadow: none;\n appearance: none;\n cursor: pointer;\n color: inherit;\n font: inherit;\n text-align: center;\n letter-spacing: -.01em;\n color: #fff;\n background: #13aa13;\n border: none;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n padding: .777em 1.5em;\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-size: 1.125rem;\n font-weight: 700;\n transition: background-color .3s, color .3s, box-shadow .3s;\n display: flex;\n}\n\n:focus::-webkit-file-upload-button, .c-button:focus, :hover::-webkit-file-upload-button, .c-button:hover {\n color: #fff;\n background-color: #0e7a0e;\n text-decoration: none;\n}\n\n[disabled]::-webkit-file-upload-button, [disabled].c-button, [disabled] ::-webkit-file-upload-button, [disabled] .c-button {\n filter: saturate(.4);\n cursor: not-allowed;\n opacity: .6;\n}\n\n.mp.c-button--wide, .c-button--wide {\n width: 100%;\n}\n\n.mp.c-button--tight, .c-button--tight {\n padding-left: .75em;\n padding-right: .75em;\n}\n\n.mp.c-button--inline, .c-button--inline {\n vertical-align: top;\n margin-bottom: .5em;\n margin-right: .5em;\n display: inline-flex;\n}\n\n.mp.c-button--petrol, .c-button--petrol {\n background-color: #005461;\n}\n\n.mp.c-button--petrol:focus, .mp.c-button--petrol:hover, .c-button--petrol:focus, .c-button--petrol:hover {\n background-color: #3d7b87;\n}\n\n.mp.c-button--blue, .mp::-webkit-file-upload-button, .c-button--blue, ::-webkit-file-upload-button {\n background-color: #00a2c2;\n}\n\n.mp.c-button--blue:focus, .mp:focus::-webkit-file-upload-button, .mp.c-button--blue:hover, .mp:hover::-webkit-file-upload-button, .c-button--blue:focus, :focus::-webkit-file-upload-button, .c-button--blue:hover, :hover::-webkit-file-upload-button {\n background-color: #00758c;\n}\n\n.mp.c-button--red, .c-button--red {\n background-color: #ce0058;\n}\n\n.mp.c-button--red:focus, .mp.c-button--red:hover, .c-button--red:focus, .c-button--red:hover {\n background-color: #9b0042;\n}\n\n.mp.c-button--white, .c-button--white {\n color: #006daf;\n background-color: #fff;\n padding: .777em 1em;\n font-weight: 400;\n}\n\n.mp.c-button--white:focus, .mp.c-button--white:hover, .c-button--white:focus, .c-button--white:hover {\n color: #004e7e;\n background-color: #ebf1f2;\n}\n\n.mp.c-button--utility-blue, .c-button--utility-blue {\n background-color: #006daf;\n}\n\n.mp.c-button--utility-blue:focus, .mp.c-button--utility-blue:hover, .c-button--utility-blue:focus, .c-button--utility-blue:hover {\n background-color: #004e7e;\n}\n\n.mp.c-button--outline-white, .c-button--outline-white {\n color: #fff;\n background: none;\n box-shadow: inset 0 0 0 1px #fff;\n}\n\n.mp.c-button--outline-white:focus, .mp.c-button--outline-white:hover, .c-button--outline-white:focus, .c-button--outline-white:hover {\n color: #005461;\n background-color: #fff;\n}\n\n.mp.c-button--outline-green, .c-button--outline-green {\n color: #13aa13;\n background: none;\n box-shadow: inset 0 0 0 1px #13aa13;\n}\n\n.mp.c-button--outline-green:focus, .mp.c-button--outline-green:hover, .c-button--outline-green:focus, .c-button--outline-green:hover {\n color: #fff;\n background-color: #0e7a0e;\n box-shadow: inset 0 0 0 1px #0e7a0e;\n}\n\n.mp.c-button--small, .c-button--small {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n padding: .5em 1em;\n}\n\n.mp.c-button--loading, .c-button--loading {\n color: #0000;\n transition: color .3s;\n}\n\n.mp.c-button--loading:after, .c-button--loading:after {\n content: \"⌛\";\n color: #fff;\n position: absolute;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .mp.c-button--loading:after, .c-button--loading:after {\n content: \"\";\n height: 1em;\n width: 1em;\n border: 3px solid #3336;\n border-top-color: #fff;\n border-radius: 50%;\n animation: spin 1.2s infinite;\n display: block;\n }\n}\n\n.c-campaign {\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n position: relative;\n max-width: 78.75rem !important;\n padding: 0 !important;\n}\n\n.c-campaign__content {\n color: #fff;\n width: 100%;\n padding: 27px;\n padding: var(--space-m-l);\n background: linear-gradient(225deg, #0a0a0a, #333);\n align-self: center;\n}\n\n.c-campaign__video {\n z-index: 1;\n align-self: center;\n}\n\n.c-campaign__image {\n z-index: 0;\n}\n\n.c-campaign__image img {\n width: 100%;\n}\n\n.c-campaign.mp .u-link, .c-campaign.mp .c-off-canvas__close, .c-campaign.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign.mp a {\n color: #47bcd3;\n}\n\n.c-campaign--petrol .c-campaign__content {\n color: #333;\n background: linear-gradient(225deg, #bfd3d6, #ebf1f2);\n}\n\n.c-campaign--petrol.mp .u-link, .c-campaign--petrol.mp .c-off-canvas__close, .c-campaign--petrol.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--petrol.mp a {\n color: #005461;\n}\n\n.c-campaign--blue .c-campaign__content {\n color: #333;\n background: linear-gradient(225deg, #c2e9f0, #ebf8fa);\n}\n\n.c-campaign--blue.mp .u-link, .c-campaign--blue.mp .c-off-canvas__close, .c-campaign--blue.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--blue.mp a {\n color: #00758c;\n}\n\n.c-campaign--orange .c-campaign__content {\n color: #1c1c1c;\n background: linear-gradient(225deg, #fceac5, #fef8ec);\n}\n\n.c-campaign--orange.mp .u-link, .c-campaign--orange.mp .c-off-canvas__close, .c-campaign--orange.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-campaign--orange.mp a {\n color: #ae7809;\n}\n\n@media (min-width: 35em) {\n .c-campaign {\n display: flex;\n }\n\n .c-campaign--switch .c-campaign__content {\n order: -1;\n }\n\n .c-campaign__video, .c-campaign__image {\n width: 50%;\n position: relative;\n }\n\n .c-campaign__video + .c-campaign__content, .c-campaign__image + .c-campaign__content {\n width: 50%;\n }\n\n .c-campaign__image img {\n height: 100%;\n width: 100%;\n z-index: 1;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n\n.c-card {\n background: #fff;\n flex-direction: column;\n align-items: stretch;\n display: flex;\n position: relative;\n}\n\n.c-card--alt, .c-card--event {\n background: #ebf1f2;\n}\n\n.c-card--alt__specs, .c-card--event__specs {\n color: #959595;\n}\n\n.c-card--featured {\n color: #bfd3d6;\n background: #005461;\n}\n\n.c-card--featured .c-card__meta, .c-card--featured .mp {\n color: inherit;\n}\n\n.c-card--featured .c-button, .c-card--featured .c-card__title {\n color: #fff;\n}\n\n.c-card--featured .c-card__day {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n color: #fff;\n font-weight: 700;\n}\n\n.c-card--featured .c-card__month {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n color: #bfd3d6;\n font-weight: 700;\n}\n\n.c-card--featured .c-card__wrapper, .c-card--featured .c-card__primary {\n flex-grow: 1;\n}\n\n.c-card--featured .c-button {\n width: 100%;\n margin: 0;\n}\n\n.c-card--featured .c-card__footer {\n padding-top: 18px;\n padding-top: var(--space-s);\n margin-top: auto;\n}\n\n.c-card__wrapper, .c-card__primary {\n flex-direction: column;\n display: flex;\n}\n\n.c-card--layout-multi .c-card__wrapper, .c-card__primary {\n width: 100%;\n flex-shrink: 0;\n}\n\n.c-card--layout-multi .c-card__wrapper {\n gap: 18px;\n gap: var(--space-s-l);\n}\n\n.c-card--layout-multi.c-card--featured.c-card--size-large.c-card--has-image .c-card__wrapper {\n padding: 0;\n}\n\n.c-card--layout-multi.c-card--featured.c-card--size-large.c-card--has-image .c-card__primary {\n padding: 18px;\n padding: var(--space-s-m);\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi .c-card__wrapper {\n flex-direction: row;\n }\n\n .c-card--layout-multi .c-card__image, .c-card--layout-multi .c-card__primary:nth-child(2) {\n width: calc(50% - 18px);\n }\n\n .c-card--layout-multi.c-card--small .c-card__image, .c-card--layout-multi.c-card--size-medium .c-card__image {\n max-width: 152px;\n width: 30%;\n }\n\n .c-card--layout-multi.c-card--small .c-card__primary:nth-child(2), .c-card--layout-multi.c-card--size-medium .c-card__primary:nth-child(2) {\n flex-grow: 1;\n }\n\n .c-card--layout-multi.c-card--size-large.c-card--featured img {\n height: 100%;\n object-fit: cover;\n }\n}\n\n@media only screen and (min-width: 55em) and (min-width: 55em) {\n .c-card--layout-multi.c-card--size-large.c-card--featured:not(.c-card--switch):not(.c-card--event.c-card--has-image) .c-card__primary {\n padding-left: 0 !important;\n }\n\n .c-card--layout-multi.c-card--size-large.c-card--featured.c-card--switch .c-card__primary, .c-card--layout-multi.c-card--size-large.c-card--featured.c-card--event.c-card--has-image .c-card__primary {\n padding-right: 0 !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi .c-card__shop-footer > :first-child {\n width: 30%;\n max-width: 152px;\n margin-right: 36px;\n margin-right: var(--space-l);\n display: block;\n }\n}\n\n.c-card--layout-multi-30-70 .c-card__image {\n width: calc(30% - 18px) !important;\n width: calc(30% - var(--space-s-m) ) !important;\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi-30-70 .c-card__primary:nth-child(2) {\n width: calc(70% - 18px) !important;\n width: calc(70% - var(--space-s-m) ) !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--layout-multi-40-60 .c-card__image {\n width: calc(60% - 18px) !important;\n width: calc(60% - var(--space-s-m) ) !important;\n }\n\n .c-card--layout-multi-40-60 .c-card__primary {\n width: calc(40% - 18px) !important;\n width: calc(40% - var(--space-s-m) ) !important;\n }\n}\n\n@media (min-width: 55em) {\n .c-card--switch .c-card__wrapper, .c-card--event.c-card--has-image .c-card__wrapper {\n flex-direction: row-reverse;\n }\n}\n\n.c-card__primary > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-card--layout-single .c-card__primary, .c-card--layout-multi .c-card__wrapper {\n padding: 18px;\n padding: var(--space-s-m);\n width: 100%;\n justify-content: space-between;\n}\n\n.c-card--layout-single.c-card--has-tag:not(.c-card--has-image) .c-card__primary {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\n.c-card__datetime {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-weight: 700;\n font-size: var(--step-1);\n color: #3d7b87;\n display: block;\n}\n\n.c-card__content {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-card__title {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\n.c-card img {\n width: 100%;\n}\n\n.c-card--size-small .c-card__title, .c-card--size-medium .c-card__title {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-card--size-medium .c-twi {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-card--bordered {\n border: 1px solid #bfd3d6;\n}\n\n.c-card--float-right {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n .c-card--float-right {\n margin-left: 13.5px;\n margin-left: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\n.c-card__tag {\n padding: 4.5px 9px;\n padding: var(--space-3xs) var(--space-2xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #005461;\n background: #c2e9f0;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-card__tag + .c-card__wrapper > .c-card__primary {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-card__tag + .c-card__wrapper > .c-card__image + .c-card__primary {\n margin-top: 0;\n}\n\n.c-card--no-height-match {\n align-self: flex-start;\n}\n\n.c-card__specs > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-card__specs dt {\n font-weight: 700;\n}\n\n.c-card__specs dt, .c-card__specs dd {\n margin: 0;\n padding: 0;\n display: block;\n}\n\n.c-card__specs dl > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card--inline-specs .c-card__specs dt, .c-card--inline-specs .c-card__specs dd {\n display: inline;\n}\n\n.c-card--inline-specs .c-card__specs dd:not(:last-child):after {\n content: \", \";\n}\n\n.c-card--2-column-specs .c-card__specs dl {\n gap: 4.5px 9px;\n gap: var(--space-3xs) var(--space-2xs);\n grid-template-columns: repeat(2, minmax(min-content, max-content));\n display: grid;\n}\n\n.c-card--2-column-specs .c-card__specs dt, .c-card--2-column-specs .c-card__specs dd {\n margin: 0;\n}\n\n.c-card--2-column-specs .c-card__specs dt {\n grid-column: 1;\n}\n\n.c-card--2-column-specs .c-card__specs dd {\n grid-column: 2;\n}\n\n.c-card .o-prose li + li {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card__meta {\n color: #3d7b87;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n flex-wrap: wrap;\n align-items: center;\n display: flex;\n}\n\n.c-card__meta > :not(:last-child) {\n padding-right: 1.5em;\n position: relative;\n}\n\n.c-card__meta > :not(:last-child):after {\n content: \"\";\n height: 18px;\n width: 1px;\n background: #3d7b87;\n position: absolute;\n top: 50%;\n right: 9px;\n transform: translateY(-50%);\n}\n\n.c-card__meta .mp {\n font-size: inherit;\n}\n\n.c-card__meta .c-icon {\n font-size: .875em;\n}\n\n.c-card__meta + .c-card__title {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-card__corner {\n color: #fff;\n border-width: 36px;\n border-width: var(--space-l);\n width: 0;\n height: 0;\n text-align: right;\n z-index: 1;\n border-style: solid;\n border-color: #13aa13 #13aa13 #0000 #0000;\n font-size: 1.5rem;\n transition: color .3s;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-card__corner .c-icon {\n position: relative;\n top: -27px;\n}\n\n.c-card:hover .c-card__corner {\n color: #ffffffbf;\n}\n\n.c-card__series {\n padding: 18px 27px;\n padding: var(--space-s) var(--space-m);\n z-index: 2;\n border-top: 1px solid #bfd3d6;\n position: relative;\n}\n\n.c-card__shop-footer {\n padding: 18px;\n padding: var(--space-s) var(--space-s-m);\n background-color: #ebf1f2;\n display: flex;\n}\n\n.c-card__shop-footer-space > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-card__shop-footer-space > * {\n display: block;\n}\n\n.c-card__shop-footer-form {\n align-items: flex-end;\n}\n\n.c-card__shop-footer input {\n width: 72px;\n}\n\n.c-card__small {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #3d7b87;\n}\n\n.c-card__flex {\n gap: 18px;\n gap: var(--space-s-l);\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-card--event.c-card--has-image.c-card--has-tag .c-card__tag {\n z-index: 1;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper {\n padding: 0;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__primary {\n padding: 18px;\n padding: var(--space-s-m);\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__image {\n width: 100%;\n position: relative;\n}\n\n.c-card--event.c-card--has-image .c-card__wrapper .c-card__image img {\n max-height: 200px;\n height: 100%;\n object-fit: cover;\n aspect-ratio: 16 / 9;\n}\n\n@media (min-width: 55em) {\n .c-card--event.c-card--has-image .c-card__primary {\n width: calc(70% - 18px);\n width: calc(70% - var(--space-s-m) );\n }\n\n .c-card--event.c-card--has-image .c-card__image {\n width: calc(30% - 18px);\n width: calc(30% - var(--space-s-m) );\n }\n\n .c-card--event.c-card--has-image .c-card__image img {\n max-height: none !important;\n }\n}\n\n.c-card--event-series {\n box-shadow: 0 12px 24px #0003;\n}\n\n.c-card--event-series .c-card__image img {\n max-height: 252px;\n aspect-ratio: 2 / 1;\n object-fit: cover;\n}\n\n.c-card--event-series .c-card__wrapper, .c-card--event-series .c-card__primary {\n height: 100%;\n}\n\n.c-card--event-series .c-card__primary {\n flex-shrink: 1;\n}\n\n.c-card--event-series .c-card__header > * + * {\n margin: 18px 0 0;\n margin: var(--space-s) 0 0 0;\n}\n\n.c-card--event-series .c-card__datetime {\n font-size: var(--step--1);\n font-weight: normal;\n}\n\n.c-card--event-series .c-card__title {\n font-size: var(--step-0);\n}\n\n.c-card--event-series .c-card__footer .u-link, .c-card--event-series .c-card__footer .c-off-canvas__close, .c-card--event-series .c-card__footer .c-internal-nav__list li a, .c-internal-nav__list li .c-card--event-series .c-card__footer a, .c-card--event-series .c-card__footer .u-link svg, .c-card--event-series .c-card__footer .c-off-canvas__close svg, .c-card--event-series .c-card__footer .c-internal-nav__list li a svg, .c-internal-nav__list li .c-card--event-series .c-card__footer a svg {\n color: #4796c5;\n font-size: var(--step--1);\n}\n\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper {\n gap: 18px;\n gap: var(--space-s);\n flex-direction: column;\n}\n\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper .c-card__primary, .grid-view > .c-card--event.c-card--has-image .c-card__wrapper .c-card__image {\n width: 100%;\n}\n\n_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper {\n display: block;\n}\n\n.c-industry-card {\n color: #006daf;\n}\n\n.c-industry-card__link {\n display: block;\n}\n\n.c-industry-card:hover .c-h--reset {\n text-decoration: underline;\n}\n\n.c-industry-card img {\n width: 100%;\n}\n\n.c-product-comparison-card {\n background: #fff;\n border: 1px solid #bfd3d6;\n flex-flow: column;\n flex-grow: 1;\n display: flex;\n}\n\n.c-product-comparison-card > * + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-product-comparison-card__body {\n padding: 18px;\n padding: var(--space-s-m);\n flex-flow: column;\n flex-grow: 1;\n display: flex;\n}\n\n.c-product-comparison-card__body > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-product-comparison-card__features-list {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n list-style: none;\n}\n\n.c-product-comparison-card__features-list-heading {\n margin-top: 18px;\n margin-top: var(--space-s);\n font-weight: 700;\n}\n\n.c-product-comparison-card__features-list > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-product-comparison-card__feature--tick svg {\n color: #13aa13;\n}\n\n.c-product-comparison-card__feature--cross {\n color: #cecece;\n}\n\n.c-product-comparison-card__footer {\n padding-top: 18px;\n padding-top: var(--space-s);\n gap: var(--space-2xs);\n flex-flow: wrap;\n margin-top: auto;\n display: flex;\n}\n\n.c-product-comparison-card__footer > * {\n flex-grow: 1;\n}\n\n.c-product-comparison-card__image {\n height: 10em;\n aspect-ratio: 16 / 9;\n order: -1;\n}\n\n.c-product-comparison-card__image img {\n height: 100%;\n width: 100%;\n object-fit: contain;\n}\n\n.c-comparison-table__desktop {\n width: 100%;\n overflow: auto;\n}\n\n.c-comparison-table__desktop .c-comparison-table {\n width: calc(100% - 1px);\n}\n\n@media (min-width: 60em) {\n .c-comparison-table__desktop .c-comparison-table tbody > tr > :first-child {\n min-width: 300px;\n }\n}\n\n.c-comparison-table__mobile {\n display: none;\n}\n\n.c-comparison-table__mobile > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\n.c-comparison-table__mobile .c-comparison-table {\n width: 100%;\n table-layout: fixed;\n}\n\n.c-comparison-table__mobile .c-comparison-table__product img {\n margin: 0;\n}\n\n.c-comparison-table {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n border-collapse: collapse;\n}\n\n.c-comparison-table thead th {\n padding: 0 9px;\n padding: 0 var(--space-2xs);\n text-align: center;\n vertical-align: top;\n border: none;\n}\n\n.c-comparison-table__product img {\n max-height: 108px;\n max-height: var(--space-3xl);\n object-fit: contain;\n mix-blend-mode: multiply;\n margin: 0 auto;\n}\n\n.c-comparison-table__product p {\n font-weight: 400;\n}\n\n.c-comparison-table__buttons {\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n flex-direction: column;\n margin: 0 auto;\n display: inline-flex;\n margin-top: 1.25rem !important;\n}\n\n.c-comparison-table__buttons * + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-comparison-table__title th {\n padding-top: 13.5px;\n padding-top: var(--space-xs);\n text-align: left;\n}\n\n.c-comparison-table__title th span {\n padding: 9px;\n padding: var(--space-2xs);\n color: #fff;\n max-width: 20em;\n width: 100%;\n text-align: center;\n background-color: #333;\n font-weight: 600;\n display: inline-block;\n position: relative;\n}\n\n.c-comparison-table__title th span:after {\n border-width: 13.5px 0 0 13.5px;\n border-width: var(--space-xs) 0 0 var(--space-xs);\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-color: #efefef #0000 #0000;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.c-comparison-table tbody tr:first-child th {\n vertical-align: bottom;\n padding: 0;\n}\n\n.c-comparison-table tbody tr:not(.c-comparison-table__title) {\n height: 48px;\n}\n\n.c-comparison-table tbody tr td:first-child {\n text-align: left;\n font-weight: 600;\n}\n\n.c-comparison-table tbody tr td {\n padding: 9px;\n padding: var(--space-2xs);\n text-align: center;\n vertical-align: middle;\n background-color: #fff;\n border: 2px solid #efefef;\n border-left: none;\n border-right: none;\n}\n\n.c-comparison-table tbody tr td .c-icon {\n font-size: 1.5rem;\n}\n\n.c-comparison-table tbody tr td .c-icon--tick {\n color: #13aa13;\n}\n\n.c-comparison-table tbody tr td .c-icon--cross {\n color: #cecece;\n}\n\n@media (max-width: 40em) {\n .c-comparison-table__mobile {\n display: block;\n }\n\n .c-comparison-table__desktop {\n display: none;\n }\n}\n\n@media only screen and (min-width: 640px) {\n .c-comparison-table thead th:nth-last-child(1):nth-child(2), .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {\n width: 85%;\n }\n\n .c-comparison-table thead th:nth-last-child(2):nth-child(2), .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {\n width: 42.5%;\n }\n\n .c-comparison-table thead th:nth-last-child(3):nth-child(2), .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {\n width: 28.3333%;\n }\n\n .c-comparison-table thead th:nth-last-child(4):nth-child(2), .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {\n width: 21.25%;\n }\n\n .c-comparison-table thead th:nth-last-child(5):nth-child(2), .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {\n width: 17%;\n }\n\n .c-comparison-table thead th:nth-last-child(6):nth-child(2), .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {\n width: 14.1667%;\n }\n}\n\n.c-embed {\n position: relative;\n}\n\n.c-embed__wrapper {\n height: 0;\n padding-bottom: 56.625%;\n position: relative;\n}\n\n.c-embed__wrapper > * {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.c-featured-article-card {\n background: #ebf1f2;\n position: relative;\n}\n\n.c-featured-article-card__content {\n padding: 18px;\n padding: var(--space-s-l);\n}\n\n.c-featured-article-card .c-post-meta {\n margin: 18px 0;\n margin: var(--space-s) 0;\n}\n\n@media (min-width: 45em) {\n .c-featured-article-card {\n display: flex;\n }\n\n .c-featured-article-card__content {\n flex-basis: 50%;\n }\n\n .c-featured-article-card__image {\n flex-basis: 50%;\n position: relative;\n }\n\n .c-featured-article-card__image img {\n height: 100%;\n width: 100%;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n\n.c-features {\n max-width: 78.75rem;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-features__wrapper {\n width: 100%;\n overflow: auto;\n}\n\n.c-features__wrapper .c-table, .c-features__wrapper .o-prose table, .o-prose .c-features__wrapper table {\n width: 100%;\n table-layout: fixed;\n}\n\n@media (min-width: 60em) {\n .c-features__wrapper .c-table, .c-features__wrapper .o-prose table, .o-prose .c-features__wrapper table {\n min-width: 78.75rem;\n }\n}\n\n.c-features__title {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-features__product {\n padding-bottom: 0 !important;\n}\n\n.c-features__introduction td {\n color: #13aa13;\n padding-top: 9px;\n padding-top: var(--space-2xs);\n font-weight: 700;\n}\n\n.c-features__label-text td > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\n.c-features__label-text td span {\n display: block;\n}\n\n.c-features__checklist-title th {\n color: #333 !important;\n background: none !important;\n padding-bottom: 0 !important;\n}\n\n.c-features__checklist td {\n vertical-align: middle;\n line-height: 20px;\n padding-top: var(--space-3xs) !important;\n padding-bottom: 0 !important;\n}\n\n.c-features__checklist td svg {\n height: 16px;\n width: 16px;\n vertical-align: middle;\n margin-bottom: 2px;\n display: inline-block;\n}\n\n.c-features__checklist--last td {\n padding-bottom: var(--space-s) !important;\n}\n\n.c-features__mobile {\n display: none;\n}\n\n.c-features__mobile > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\n.c-features__mobile .c-table, .c-features__mobile .o-prose table, .o-prose .c-features__mobile table {\n table-layout: fixed;\n}\n\n@media (max-width: 40em) {\n .c-features__mobile {\n display: block;\n }\n\n .c-features__wrapper {\n display: none;\n }\n}\n\n.c-features thead img {\n max-height: 108px;\n max-height: var(--space-3xl);\n object-fit: contain;\n}\n\n.c-filter-search {\n padding: 27px;\n padding: var(--space-m-l);\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n gap: var(--space-s);\n background: #c2e9f0;\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-filter-search > * {\n flex-grow: 1;\n}\n\n.c-filter-search__fields {\n max-width: 792px;\n background-color: #fff;\n flex-grow: 8;\n display: flex;\n}\n\n.c-filter-search__fields fieldset {\n border: none;\n font-size: 0;\n}\n\n.c-filter-search__fields .c-icon {\n font-size: 1.375rem;\n}\n\n@media only screen and (min-width: 30em) {\n .c-filter-search__fields {\n min-width: 360px;\n }\n}\n\n.c-footer {\n color: #fff;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #003039;\n margin-top: auto;\n}\n\n.c-footer a:hover {\n color: #47bcd3;\n}\n\n.c-footer__primary {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n padding-top: 18px;\n padding-top: var(--space-s-l);\n}\n\n.c-footer.mp .c-footer__h-links, .c-footer.mp .c-footer__sections, .c-footer.mp .c-footer__sections ul, .c-footer.mp .c-footer__sections h4 {\n line-height: 1.6;\n}\n\n.c-footer__sections {\n margin-bottom: 0;\n}\n\n.c-footer__sections > li {\n margin-bottom: 18px;\n margin-bottom: var(--gutter);\n}\n\n.c-footer__sections ul li {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\n.c-footer__subtitle {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n position: relative;\n}\n\n.c-footer__subtitle:after {\n content: \"\";\n width: 15px;\n height: 1px;\n background: #3d7b87;\n position: absolute;\n bottom: 4px;\n left: 0;\n}\n\n.c-footer__identity {\n flex-wrap: wrap;\n align-items: center;\n display: flex;\n}\n\n.c-footer__logo {\n max-width: 216px;\n width: 60%;\n display: block;\n}\n\n.c-footer__logo img {\n margin-right: 18px;\n margin-right: var(--gutter);\n filter: saturate(0) brightness(10);\n}\n\n.c-footer__social {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n display: flex;\n}\n\n.c-footer__social li + li {\n margin-left: 18px;\n margin-left: var(--space-s-m);\n}\n\n.c-footer__social .c-icon {\n font-size: 1.5rem;\n}\n\n.c-footer__secondary {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n background: #002126;\n}\n\n.c-footer__secondary span a {\n color: #47bcd3;\n text-decoration: underline;\n}\n\n.c-footer .o-prose li a {\n color: #47bcd3;\n}\n\n.c-footer__h-links {\n margin-bottom: .5rem;\n}\n\n@media (min-width: 43em) {\n .c-footer__secondary .u-wrap, .c-footer__secondary .c-internal-nav__wrap {\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n display: flex;\n }\n\n .c-footer__h-links {\n margin: .5rem 18px .5rem 0;\n margin: .5rem var(--space-s-m) .5rem 0;\n display: flex;\n }\n\n .c-footer__h-links li + li {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n}\n\n@media (min-width: 1410px) {\n .c-footer__secondary {\n clip-path: polygon(0% 100%, 68px 0%, 100% 0%, 100% 100%, 68px 100%);\n }\n}\n\n.rich-text-region:has( + .c-footer) {\n margin-bottom: 36px;\n margin-bottom: var(--space-l-xl);\n}\n\n.c-gallery {\n max-height: 95vh;\n}\n\n.c-gallery img {\n cursor: pointer;\n}\n\n.c-gallery__main {\n position: relative;\n}\n\n.c-gallery__main > * {\n width: 100%;\n}\n\n.c-gallery__main > * img {\n aspect-ratio: 16 / 9;\n max-height: calc(95vh - 90px);\n object-fit: contain;\n margin: 0 auto;\n display: block;\n}\n\n.c-gallery__main > :not(.active) {\n display: none;\n}\n\n.c-gallery__thumbnails {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n flex-flow: wrap;\n gap: max(8px, 2%);\n display: flex;\n}\n\n.c-gallery__thumbnails > * {\n max-width: 10.75%;\n max-width: max(var(--space-xl), 10.75%);\n aspect-ratio: 16 / 9;\n background: #efefef;\n}\n\n.c-gallery__thumbnails > * img {\n height: 100%;\n opacity: .8;\n object-fit: cover;\n width: 100%;\n}\n\n.c-gallery__thumbnails > .active img {\n opacity: .25;\n}\n\n.c-header {\n background-color: #fff;\n}\n\n.c-header__wrap {\n padding-top: 18px;\n padding-top: var(--gutter);\n position: relative;\n}\n\n.c-header__logo {\n z-index: 50;\n max-width: 216px;\n width: 60%;\n display: block;\n position: relative;\n}\n\n.c-header__logo img {\n width: 100%;\n}\n\n.c-header__search {\n position: relative;\n}\n\n.c-header__search button:hover, .c-header__search button:focus {\n background-color: #bfd3d6;\n}\n\n@media (min-width: 500px) {\n .c-header__corporate ul {\n justify-content: center;\n }\n}\n\n@media (max-width: 767px) {\n .c-header__wrap {\n padding-bottom: 18px;\n padding-bottom: var(--gutter);\n }\n\n .c-header__primary {\n color: #fff;\n padding: 18px;\n padding: var(--space-s-m);\n z-index: 100;\n height: 100%;\n width: 100%;\n padding-top: 80px;\n padding-top: calc(60px + var(--space-s-m) );\n opacity: 0;\n visibility: hidden;\n background: #005461;\n flex-direction: column;\n align-items: stretch;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n }\n\n .c-header__primary:target {\n opacity: 1;\n visibility: visible;\n transition: opacity .3s, visibility .3s;\n }\n\n .c-header__primary .c-navicon i {\n background: #fff;\n }\n\n .c-header__corporate {\n margin: 18px 0;\n margin: var(--space-s) 0;\n letter-spacing: -.01em;\n font-size: 12.5px;\n font-size: var(--step--2);\n order: 1;\n font-weight: 600;\n }\n\n .c-header__corporate ul {\n flex-wrap: wrap;\n align-items: center;\n margin-left: -6px;\n margin-right: -6px;\n display: flex;\n }\n\n .c-header__corporate li {\n margin: 13.5px 4.5px;\n margin: var(--space-xs-s) var(--space-3xs-m);\n }\n\n .c-header__corporate .c-input--select {\n width: auto;\n color: inherit;\n padding: 0 27px 4.5px 0;\n padding: 0 var(--space-m) var(--space-3xs) 0;\n font-size: inherit;\n background-color: #0000;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%23ffffff\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n background-position: right .4em center;\n border: none;\n border-bottom: 1px solid #3d7b87;\n margin-bottom: -4.5px;\n display: inline-block;\n }\n\n .c-header__corporate .c-input--select option {\n color: #333;\n }\n\n .c-header__search {\n color: #333;\n order: 2;\n }\n\n .c-header__site {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n flex: 1;\n order: -1;\n }\n\n .c-header__site li + li {\n margin-top: 18px;\n margin-top: var(--space-s);\n }\n}\n\n@media (min-width: 768px) {\n .c-header {\n overflow: hidden;\n }\n\n .c-header .c-navicon {\n display: none;\n }\n\n .c-header__primary {\n flex-direction: column;\n align-items: flex-end;\n margin-top: -71px;\n display: flex;\n }\n\n .c-header__search {\n margin-bottom: 8px;\n margin-bottom: calc(var(--gutter) - 10px);\n width: 288px;\n }\n\n .c-header__corporate {\n color: #005461;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n margin-bottom: 8px;\n margin-bottom: calc(var(--space-xs) + 3px);\n }\n\n .c-header__corporate a:hover {\n text-decoration: underline;\n }\n\n .c-header__corporate ul {\n display: flex;\n }\n\n .c-header__corporate li + li {\n margin-left: 18px;\n margin-left: var(--space-s);\n }\n\n .c-header__corporate .c-input--select {\n width: auto;\n color: inherit;\n padding: 0 36px 0 0;\n padding: 0 var(--space-l) 0 0;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background-color: #0000;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%2300768d\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n border: none;\n display: inline-block;\n }\n\n .c-header__site {\n color: #fff;\n z-index: 1;\n padding: 14px 0;\n padding: calc(var(--space-xs) + 2px) 0;\n letter-spacing: -.01em;\n font-size: 15px;\n font-weight: 600;\n font-size: var(--step--1);\n width: 100%;\n align-self: flex-start;\n position: relative;\n }\n\n .c-header__site:after {\n content: \"\";\n width: 100vw;\n height: 100%;\n z-index: -2;\n background: linear-gradient(270deg, #13aa13 -12%, #00a2c2 11%, #005461 43% 70%, #003039 100%);\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n}\n\n@media screen and (min-width: 768px) and (-ms-high-contrast: active), (min-width: 768px) and (-ms-high-contrast: none) {\n .c-header__site:after {\n background: linear-gradient(270deg, #13aa13 -12%, #00a2c2 11%, #005461 43%, #003039 100%);\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site ul {\n display: flex;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site li + li {\n margin-left: 18px;\n margin-left: var(--space-s-m);\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site--with-home > ul > li:first-child {\n padding-right: 18px;\n padding-right: var(--space-s);\n border-right: 1px solid #ffffff40;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site a {\n padding: 13.5px 0;\n padding: var(--space-xs) 0;\n display: block;\n }\n\n .c-header__site a:hover, .c-header__site a:focus {\n opacity: .75;\n }\n}\n\n@media (min-width: 768px) {\n .c-header__site li + .c-header__push {\n margin-left: auto;\n }\n}\n\n@media (min-width: 1500px) {\n .c-header__site:after {\n clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);\n }\n}\n\n.c-navicon {\n right: 18px;\n right: var(--space-s-m);\n top: 18px;\n top: var(--space-s-m);\n height: 60px;\n width: 60px;\n position: absolute;\n transform: translateX(25%);\n}\n\n.c-navicon i {\n height: 2px;\n width: 22px;\n background: #00758c;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n}\n\n.c-navicon i:nth-child(1) {\n transform: translate3d(-50%, -50%, 0)translateY(-7px);\n}\n\n.c-navicon i:nth-child(3) {\n transform: translate3d(-50%, -50%, 0)translateY(7px);\n}\n\n:root {\n --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );\n --gutter-width: calc( (100vw - var(--body-width) ) / 2 );\n --text-width: min(100vw, 51.75rem);\n --hero-gap: calc( var(--body-width) - var(--text-width) );\n --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) * .8 );\n}\n\n.c-hero {\n color: #005461;\n isolation: isolate;\n background: linear-gradient(to top right, #ebf1f2, #c2e9f0);\n position: relative;\n overflow: hidden;\n}\n\n.c-hero.mp .u-link, .c-hero.mp .c-off-canvas__close, .c-hero.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-hero.mp a {\n color: #006daf;\n}\n\n.c-hero .u-wrap, .c-hero .c-internal-nav__wrap {\n padding-top: 27px;\n padding-top: var(--space-m-xl);\n padding-bottom: 54px;\n padding-bottom: var(--space-xl-3xl);\n z-index: 2;\n position: relative;\n}\n\n.c-hero .u-wrap:before, .c-hero .c-internal-nav__wrap:before {\n content: \"\";\n height: 18px;\n height: var(--gutter);\n width: 100vw;\n bottom: 0;\n right: 18px;\n right: var(--gutter);\n z-index: 2;\n background: #fff;\n position: absolute;\n box-shadow: 1px 1px #fff;\n}\n\n.c-hero .u-wrap:after, .c-hero .c-internal-nav__wrap:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 18px 0 0 18px;\n border-width: var(--gutter) 0 0 var(--gutter);\n border-color: #0000 #0000 #0000 #fff;\n position: absolute;\n bottom: 0;\n right: 0;\n box-shadow: -1px 0 #fff;\n}\n\n.c-hero__content {\n z-index: 5;\n max-width: 828px;\n position: relative;\n}\n\n.c-hero__content > * + * {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\n.c-hero__content .c-h, .c-hero__content .o-prose h2, .o-prose .c-hero__content h2, .c-hero__content .o-prose h3, .o-prose .c-hero__content h3, .c-hero__content .o-prose h4, .o-prose .c-hero__content h4, .c-hero__content .c-product-comparison-card__heading {\n color: inherit;\n margin: inherit;\n}\n\n.c-hero__content p {\n line-height: 1.6;\n}\n\n.c-hero__content .c-hero__button-wrap {\n gap: var(--space-s);\n flex-wrap: wrap;\n display: flex;\n}\n\n.c-hero__content .c-hero__button-wrap > .c-button {\n margin: 0 !important;\n}\n\n.c-hero--image {\n color: #fff;\n background: #1c1c1c;\n}\n\n.c-hero--image.mp .u-link, .c-hero--image.mp .c-off-canvas__close, .c-hero--image.mp .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--image.mp a {\n color: #4796c5;\n}\n\n.c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: radial-gradient(farthest-side at 100% 100%, #3339, #1c1c1ce6);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 55em) {\n .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n left: 33.33%;\n }\n\n .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n background: radial-gradient(circle farthest-side at 100% 0, #1c1c1c4d, #1c1c1c);\n }\n}\n\n@media (min-width: 70em) {\n .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n background: linear-gradient(270deg, #1c1c1c00 var(--gutter-width), #1c1c1c9e var(--stop), #1c1c1c);\n }\n}\n\n.c-hero--homepage, .c-hero--homepage-light {\n background: linear-gradient(79.62deg, #003039 0%, #005461 100%);\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage, .c-hero--homepage-light {\n background: linear-gradient(84.46deg, #003039 7.52%, #005461 44.84%, #235057cc 51.02%, #3452579e 54.99%, #4e565738 59.54%, #57575700 65.59%);\n }\n}\n\n.c-hero--homepage:after, .c-hero--homepage-light:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: #00000054;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage:after, .c-hero--homepage-light:after {\n background: radial-gradient(circle farthest-side at 100% 0, #2e323300 0% 15.16%, #2e323333 27.66%, #2936388c 39.61%, #234247cc 49.78%, #005461 59.87%, #003039 100%);\n }\n}\n\n.c-hero--homepage .u-wrap, .c-hero--homepage .c-internal-nav__wrap, .c-hero--homepage-light .u-wrap, .c-hero--homepage-light .c-internal-nav__wrap {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-3xl);\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage .c-hero__content, .c-hero--homepage-light .c-hero__content {\n width: calc(41.666% - 2 * var(--gutter) / 5 - .1px);\n }\n}\n\n.c-hero--homepage .c-hero__content .c-h, .c-hero--homepage-light .c-hero__content .c-h, .c-hero--homepage .c-hero__content .o-prose h2, .c-hero--homepage-light .c-hero__content .o-prose h2, .o-prose .c-hero--homepage .c-hero__content h2, .o-prose .c-hero--homepage-light .c-hero__content h2, .c-hero--homepage .c-hero__content .o-prose h3, .c-hero--homepage-light .c-hero__content .o-prose h3, .o-prose .c-hero--homepage .c-hero__content h3, .o-prose .c-hero--homepage-light .c-hero__content h3, .c-hero--homepage .c-hero__content .o-prose h4, .c-hero--homepage-light .c-hero__content .o-prose h4, .o-prose .c-hero--homepage .c-hero__content h4, .o-prose .c-hero--homepage-light .c-hero__content h4, .c-hero--homepage .c-hero__content .c-product-comparison-card__heading, .c-hero--homepage-light .c-hero__content .c-product-comparison-card__heading {\n color: #fff;\n}\n\n.c-hero--homepage .c-hero__content p, .c-hero--homepage-light .c-hero__content p {\n color: #bfd3d6;\n}\n\n.c-hero--homepage .c-hero__content .u-link, .c-hero--homepage .c-hero__content .c-off-canvas__close, .c-hero--homepage .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage .c-hero__content a, .c-hero--homepage-light .c-hero__content .u-link, .c-hero--homepage-light .c-hero__content .c-off-canvas__close, .c-hero--homepage-light .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage-light .c-hero__content a {\n color: #47bcd3;\n}\n\n.c-hero--homepage .c-hero__image-bg, .c-hero--homepage-light .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n display: none;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage .c-hero__image-bg, .c-hero--homepage-light .c-hero__image-bg, .c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n max-width: 65%;\n z-index: -1;\n background-position: 60% 40%;\n transition: opacity 3s;\n display: block;\n left: 35%;\n }\n\n .c-hero--homepage .c-hero__image-bg:after, .c-hero--homepage-light .c-hero__image-bg:after, .c-hero--homepage .c-hero__image-fg:after, .c-hero--homepage-light .c-hero__image-fg:after {\n display: none;\n }\n\n .c-hero--homepage .c-hero__image-bg + [class^=\"c-hero__image-\"], .c-hero--homepage-light .c-hero__image-bg + [class^=\"c-hero__image-\"], .c-hero--homepage .c-hero__image-fg + [class^=\"c-hero__image-\"], .c-hero--homepage-light .c-hero__image-fg + [class^=\"c-hero__image-\"] {\n opacity: 0;\n }\n}\n\n.c-hero--homepage .c-hero__image-fg, .c-hero--homepage-light .c-hero__image-fg {\n z-index: 1;\n}\n\n.c-hero--homepage-video {\n position: relative;\n}\n\n.c-hero--homepage-video:after {\n content: \"\";\n width: 100%;\n height: 100%;\n background: #00000054;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video:after {\n background: radial-gradient(circle farthest-side at 100% 0, #2e323300 0% 15.16%, #2e323333 27.66%, #2936388c 39.61%, #234247cc 49.78%, #005461 59.87%, #003039 100%);\n }\n}\n\n.c-hero--homepage-video .u-wrap:before, .c-hero--homepage-video .c-internal-nav__wrap:before, .c-hero--homepage-video .u-wrap:after, .c-hero--homepage-video .c-internal-nav__wrap:after {\n display: none;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .u-wrap:before, .c-hero--homepage-video .c-internal-nav__wrap:before, .c-hero--homepage-video .u-wrap:after, .c-hero--homepage-video .c-internal-nav__wrap:after {\n display: inline;\n }\n}\n\n.c-hero--homepage-video .c-hero__video-bg {\n width: 100%;\n height: auto;\n background-size: cover;\n margin-bottom: -6px;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .c-hero__video-bg {\n max-width: 60%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 40%;\n right: 0;\n transform: translateY(-50%);\n }\n}\n\n.c-hero--homepage-video .c-hero__video-bg video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap {\n z-index: 2;\n justify-content: center;\n margin: 0 auto;\n display: flex;\n position: absolute;\n bottom: calc(28.125% - 25px);\n left: 0;\n right: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-video .c-hero__video-button-wrap {\n top: 45%;\n right: 20%;\n bottom: unset;\n left: unset;\n position: absolute;\n }\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap .c-button {\n position: relative;\n}\n\n.c-hero--homepage-video .c-hero__video-button-wrap .c-button:before {\n content: \"\";\n height: 100%;\n width: 100%;\n border-radius: inherit;\n background: #0003;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.c-hero--homepage-light {\n background: linear-gradient(79.62deg, #ebf1f2 0%, #c2e9f0 100%), #ebf1f2;\n}\n\n@media (min-width: 38em) {\n .c-hero--homepage-light {\n background: linear-gradient(86.37deg, #ebf1f2 7.52% 44.84%, #ebf1f2cc 51.02%, #ebf1f299 52.38%, #ebf1f200 65.41%), #ebf1f2;\n }\n}\n\n.c-hero--homepage-light .c-hero__content .c-h, .c-hero--homepage-light .c-hero__content .o-prose h2, .o-prose .c-hero--homepage-light .c-hero__content h2, .c-hero--homepage-light .c-hero__content .o-prose h3, .o-prose .c-hero--homepage-light .c-hero__content h3, .c-hero--homepage-light .c-hero__content .o-prose h4, .o-prose .c-hero--homepage-light .c-hero__content h4, .c-hero--homepage-light .c-hero__content .c-product-comparison-card__heading {\n color: #1c1c1c;\n}\n\n.c-hero--homepage-light .c-hero__content p {\n color: #333;\n}\n\n.c-hero--homepage-light .c-hero__content .u-link, .c-hero--homepage-light .c-hero__content .c-off-canvas__close, .c-hero--homepage-light .c-hero__content .c-internal-nav__list li a, .c-internal-nav__list li .c-hero--homepage-light .c-hero__content a {\n color: #00a2c2;\n}\n\n.c-hero__canvas {\n z-index: -1;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n@media (min-width: 38em) {\n .c-hero__canvas {\n z-index: 1;\n }\n}\n\n.c-icon {\n width: 1em;\n height: 1em;\n color: inherit;\n font-size: inherit;\n}\n\n.c-input {\n appearance: none;\n font: inherit;\n padding: 13.5px;\n padding: var(--space-xs);\n color: inherit;\n width: 100%;\n background: #fff;\n border: 1px solid #bfd3d6;\n border-radius: 0;\n font-size: 1rem;\n display: block;\n}\n\n.c-input:focus {\n border-color: #005461;\n outline: none;\n}\n\n.c-input::-webkit-calendar-picker-indicator {\n display: none !important;\n}\n\n.c-input--alt {\n background: #ebf1f2;\n border: none;\n}\n\n.c-input--large {\n min-height: 56px;\n}\n\n.c-input--select {\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"18\\\" height=\\\"10\\\"><path fill=\\\"%23006DAF\\\" fill-rule=\\\"nonzero\\\" d=\\\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\\\"/></svg>\");\n background-position: right 1rem center;\n background-repeat: no-repeat;\n background-size: .875em;\n}\n\n.c-input--textarea {\n resize: vertical;\n min-height: 10rem;\n}\n\n.c-input--file {\n cursor: pointer;\n border: none;\n padding: 0;\n}\n\n::-webkit-file-upload-button {\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n display: inline-flex;\n}\n\n.c-input-error {\n --error-state: #ce0058;\n position: relative;\n}\n\n.c-input-error .c-input {\n width: calc(100% - (27px + var(--space-xs) ) );\n}\n\n.c-input-error:after {\n content: \"\";\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n padding: 13.5px;\n padding: var(--space-xs);\n background: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" fill=\\\"none\\\" viewBox=\\\"0 0 24 24\\\"><circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"12\\\" fill=\\\"%23CE0058\\\"/><path stroke=\\\"%23fff\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2\\\" d=\\\"M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334\\\"/></svg>\") center / 100% 100% no-repeat;\n position: absolute;\n top: 2.3em;\n right: 0;\n}\n\n.c-input-error .c-input {\n border-color: #ce0058;\n}\n\n.c-input-error .c-input:focus {\n border-color: #9b0042;\n}\n\n.c-input-message {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: var(--error-state);\n}\n\n.c-input[disabled], .c-input [disabled], .c-input--disabled, .u-disabled > .c-input {\n background-color: #bfd3d6;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" id=\\\"lock\\\" viewBox=\\\"0 0 25 24\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z\\\"/></svg>\");\n background-position: right var(--space-2xs) center;\n background-repeat: no-repeat;\n background-size: 18px;\n background-size: var(--space-s);\n cursor: not-allowed;\n opacity: .6;\n}\n\n.c-input--with-button {\n border: none;\n}\n\n.c-input--with-button + [type] {\n padding: 13.5px;\n padding: var(--space-xs);\n color: #006daf;\n}\n\n.c-input--with-button + [type] svg {\n display: block;\n}\n\n.c-label {\n margin-bottom: 9px;\n margin-bottom: var(--space-2xs);\n font-weight: 700;\n display: block;\n}\n\n.c-fieldset {\n min-width: 0;\n border: none;\n margin: 0;\n padding: .01em 0 0;\n}\n\n.c-fieldset legend {\n letter-spacing: -.03em;\n float: left;\n margin: 13.5px 0 36px;\n margin: var(--space-xs) 0 var(--space-l);\n width: 100%;\n padding: 0;\n font-weight: 700;\n display: table;\n}\n\n.c-fieldset legend + * {\n clear: both;\n}\n\n.c-fieldset + .c-fieldset {\n margin-top: 36px;\n margin-top: var(--space-l-xl);\n padding-top: 36px;\n padding-top: var(--space-l);\n border-top: 1px solid #bfd3d6;\n}\n\n.c-radio + label, .c-radio + input[type=\"hidden\"] + label, .c-checkbox + label, .c-checkbox + input[type=\"hidden\"] + label {\n padding-left: 36px;\n padding-left: var(--space-l);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n box-decoration-break: clone;\n -webkit-box-decoration-break: clone;\n position: relative;\n}\n\n.c-radio + label:before, .c-radio + input[type=\"hidden\"] + label:before, .c-checkbox + label:before, .c-checkbox + input[type=\"hidden\"] + label:before {\n content: \"\";\n height: 1.25rem;\n width: 1.25rem;\n border: 1px solid #bfd3d6;\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.c-radio:focus + label:before, .c-radio:focus + input[type=\"hidden\"] + label:before, .c-checkbox:focus + label:before, .c-checkbox:focus + input[type=\"hidden\"] + label:before {\n outline: 2px solid ;\n}\n\n.c-radio[disabled] + label:before, [disabled] .c-radio + label:before, .c-checkbox[disabled] + label:before, [disabled] .c-checkbox + label:before {\n cursor: not-allowed;\n opacity: .6;\n background-color: #bfd3d6;\n}\n\n.c-radio[disabled]:hover + label:before, [disabled] .c-radio:hover + label:before, .c-checkbox[disabled]:hover + label:before, [disabled] .c-checkbox:hover + label:before {\n background-color: #bfd3d6;\n}\n\n.c-radio--box + label, .c-checkbox--box + label {\n padding: 18px;\n padding: var(--space-s);\n height: 100%;\n width: 100%;\n text-align: center;\n word-break: break-word;\n background: #fff;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n font-weight: 700;\n display: flex;\n}\n\n.c-radio--box + label:before, .c-radio--box + label:after, .c-checkbox--box + label:before, .c-checkbox--box + label:after {\n display: none;\n}\n\n.c-radio--box:checked + label, .c-checkbox--box:checked + label {\n color: #fff;\n background: #00a2c2;\n}\n\n.c-radio--box[disabled] + label, .c-checkbox--box[disabled] + label {\n color: #959595;\n cursor: not-allowed;\n background: #efefef;\n border: 1px solid #cecece;\n}\n\n.c-checkbox:checked + label:before, .c-checkbox:checked + input[type=\"hidden\"] + label:before {\n background: #006daf;\n}\n\n.c-checkbox:checked + label:after, .c-checkbox:checked + input[type=\"hidden\"] + label:after {\n content: \"\";\n width: 7px;\n height: 11px;\n border-bottom: 3px solid #fff;\n border-right: 3px solid #fff;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateX(6.5px)translateY(-1.5px)translateY(-50%)rotate(45deg);\n}\n\n.c-radio + label:hover:before, .c-radio + input[type=\"hidden\"] + label:hover:before, .c-checkbox + label:hover:before, .c-checkbox + input[type=\"hidden\"] + label:hover:before {\n background-color: #ebf3f9;\n}\n\n.c-checkbox:checked + label:hover:before, .c-checkbox:checked + input[type=\"hidden\"] + label:hover:before {\n background: #004e7e;\n}\n\n.c-radio + label:before, .c-radio + input[type=\"hidden\"] + label:before {\n border-radius: 100%;\n}\n\n.c-radio:checked + label:before, .c-radio:checked + input[type=\"hidden\"] + label:before {\n box-shadow: inset 0 0 0 5px #006daf;\n}\n\n.c-radio:checked + label:hover:before, .c-radio:checked + input[type=\"hidden\"] + label:hover:before {\n box-shadow: inset 0 0 0 5px #004e7e;\n}\n\n.c-off-canvas .c-checkbox-group > * {\n width: 100%;\n margin-left: 0;\n}\n\n.c-toggle {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n white-space: nowrap;\n display: inline-block;\n position: relative;\n}\n\n.c-toggle__slider {\n margin-right: 9px;\n margin-right: var(--space-2xs);\n margin-left: 9px;\n margin-left: var(--space-2xs);\n height: 1.25rem;\n width: 2.25rem;\n vertical-align: text-bottom;\n border: 1px solid #bfd3d6;\n border-radius: 1.25rem;\n display: inline-block;\n position: relative;\n}\n\n.c-toggle__slider:before {\n content: \"\";\n height: .75rem;\n width: .75rem;\n background-color: #fff;\n border: 1px solid #bfd3d6;\n border-radius: 50%;\n margin: auto 0;\n transition: all .1s;\n position: absolute;\n top: 0;\n bottom: 0;\n left: .25rem;\n}\n\n.c-toggle:hover .c-toggle__slider, .c-toggle:focus-within .c-toggle__slider {\n background-color: #ebf1f2;\n}\n\n.c-toggle:focus-within .c-toggle__slider {\n outline: 2px solid ;\n}\n\n.c-toggle__checkbox:checked + .c-toggle__slider {\n background-color: #006daf;\n}\n\n.c-toggle:hover .c-toggle__checkbox:checked + .c-toggle__slider, .c-toggle:focus-within .c-toggle__checkbox:checked + .c-toggle__slider {\n background-color: #004e7e;\n}\n\n.c-toggle__checkbox:checked + .c-toggle__slider:before {\n transform: translateX(1rem);\n}\n\n.c-toggle input[disabled] + .c-toggle__slider {\n cursor: not-allowed;\n opacity: .6;\n background-color: #bfd3d6;\n}\n\n.c-toggle input[disabled] + .c-toggle__slider:before {\n background-color: #ebf1f2;\n}\n\n.c-toggle input[disabled] ~ .c-toggle__label {\n cursor: not-allowed;\n opacity: .6;\n}\n\n.c-internal-nav {\n background-color: #0000;\n border-bottom: 1px solid #0000;\n transition: all .2s;\n}\n\n.c-internal-nav--stuck {\n z-index: 9999;\n border-bottom-color: #cecece;\n}\n\n.c-internal-nav--stuck .c-internal-nav__title {\n opacity: 1;\n}\n\n.c-internal-nav__wrap {\n gap: var(--space-l);\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\n.c-internal-nav__title {\n padding: 18px 0;\n padding: var(--space-s) 0;\n opacity: 0;\n flex-shrink: 0;\n font-weight: bold;\n transition: opacity .2s;\n}\n\n.c-internal-nav__list {\n padding: 18px 0;\n padding: var(--space-s) 0;\n color: #006daf;\n white-space: nowrap;\n font-size: var(--step--1);\n align-items: center;\n display: flex;\n overflow-x: auto;\n}\n\n.c-internal-nav__list > * + * {\n margin-left: 36px;\n margin-left: var(--space-l);\n}\n\n@media (max-width: 44em) {\n .c-internal-nav__title, .c-internal-nav .c-button {\n display: none;\n }\n\n .c-internal-nav__list {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n }\n}\n\n.c-hero + .c-internal-nav {\n margin-top: calc(var(--gutter) * -1);\n}\n\n.c-internal-nav.u-sticky {\n top: -1px;\n}\n\n.c-meta-box {\n padding: 18px;\n padding: var(--space-s-m);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: #ebf1f2;\n}\n\n.c-meta-box > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-meta-box .u-wrap--fields {\n padding-right: 0;\n}\n\n.c-off-canvas {\n width: 100%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n z-index: 9999;\n background-color: #0000;\n transition: opacity .3s, visibility 0s linear .3s;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.c-off-canvas > * + * {\n margin: 0 !important;\n}\n\n.c-off-canvas__backdrop {\n width: 100%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n background-color: #33333380;\n transition: opacity .3s;\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.c-off-canvas__content {\n width: calc(100% - var(--space-m) );\n height: 100%;\n background-color: #fff;\n flex-direction: column;\n transition: right .3s;\n display: flex;\n position: fixed;\n top: 0;\n right: -100%;\n}\n\n.c-off-canvas__header {\n padding: 18px 18px 0;\n padding: var(--space-s) var(--space-s) 0;\n}\n\n.c-off-canvas__header > * {\n margin-bottom: 0 !important;\n}\n\n.c-off-canvas__header + .c-off-canvas__main {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\n.c-off-canvas__main {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n padding: 4.5px 18px;\n padding: var(--space-3xs) var(--space-s);\n overflow-y: scroll;\n}\n\n.c-off-canvas__footer {\n padding: 0 18px 18px;\n padding: 0 var(--space-s) var(--space-s);\n flex-direction: column;\n align-items: stretch;\n margin-top: auto;\n display: flex;\n}\n\n.c-off-canvas__close {\n padding: 18px;\n padding: var(--space-s);\n margin: 0 auto;\n}\n\n.c-off-canvas--active {\n opacity: 1;\n visibility: visible;\n transition: opacity .3s;\n}\n\n.c-off-canvas--active .c-off-canvas__backdrop {\n opacity: 1;\n visibility: visible;\n}\n\n.c-off-canvas--active .c-off-canvas__content {\n right: 0;\n}\n\n@media only screen and (min-width: 40em) {\n .c-off-canvas--mobile {\n display: none !important;\n }\n\n .c-checkbox-group [data-off-canvas=\"header\"], .c-checkbox-group [data-off-canvas=\"footer\"] {\n display: none;\n }\n}\n\n.mp .c-option-list {\n line-height: 1.6;\n}\n\n.c-option-list a {\n color: #006daf;\n}\n\n.c-option-list a:hover {\n text-decoration: underline;\n}\n\n.c-option-list li {\n margin-bottom: 9px;\n margin-bottom: var(--space-2xs);\n break-inside: avoid;\n}\n\n.c-option-list--columns {\n column-gap: 18px;\n column-gap: var(--gutter);\n column-width: 200px;\n}\n\n@media (min-width: 60em) {\n .c-option-list--columns {\n column-width: 260px;\n }\n}\n\n.c-option-list__title a {\n color: #006daf;\n margin-left: 9px;\n margin-left: var(--space-2xs);\n font-weight: 400;\n}\n\n.c-option-list__title a:hover {\n text-decoration: underline;\n}\n\n.c-post-meta {\n color: #959595;\n border-top: 1px solid #bfd3d6;\n border-bottom: 1px solid #bfd3d6;\n padding: 1.25rem 0;\n}\n\n.c-post-meta > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\n.c-product-signpost {\n max-width: 440px;\n padding: 9px;\n padding: var(--space-2xs);\n word-break: break-word;\n justify-content: flex-start;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.c-product-signpost:hover .c-h, .c-product-signpost:hover .o-prose h2, .o-prose .c-product-signpost:hover h2, .c-product-signpost:hover .o-prose h3, .o-prose .c-product-signpost:hover h3, .c-product-signpost:hover .o-prose h4, .o-prose .c-product-signpost:hover h4, .c-product-signpost:hover .c-product-comparison-card__heading {\n text-decoration: underline;\n}\n\n.c-product-signpost__image {\n flex-shrink: 0;\n margin-bottom: 0;\n}\n\n.c-product-signpost__content {\n flex-grow: 1;\n}\n\n.c-product-signpost__wrapper {\n gap: 13.5px;\n gap: var(--space-xs-s);\n flex-direction: column;\n display: flex;\n}\n\n.c-product-signpost .o-prose p {\n letter-spacing: -.01em;\n font-size: 15px;\n line-height: 1.2;\n font-size: var(--step--1);\n}\n\n.c-product-signpost--bordered {\n padding: 13.5px;\n padding: var(--space-xs);\n border: 1px solid #bfd3d6;\n}\n\n.c-product-signpost--float-right {\n margin: 0 0 13.5px 13.5px;\n margin: 0 0 var(--space-xs-l) var(--space-xs-l);\n min-width: 9rem;\n width: 30%;\n}\n\n@media (min-width: 55em) {\n .c-product-signpost--float-right, .c-product-signpost__image {\n width: 40%;\n }\n\n .c-product-signpost__wrapper {\n flex-direction: row;\n }\n}\n\n.c-quote, .o-prose blockquote {\n color: #3d7b87;\n padding: 72px 0 36px 54px;\n padding: var(--space-2xl) 0 var(--space-l) var(--space-xl);\n position: relative;\n}\n\n.c-quote:before, .o-prose blockquote:before {\n content: \"“\";\n color: #ebf1f2;\n height: 57px;\n width: 45px;\n z-index: -1;\n margin-left: -.025em;\n font-family: Arial, sans-serif;\n font-size: 10em;\n font-weight: 900;\n line-height: .9;\n position: absolute;\n top: .1em;\n left: 0;\n}\n\n.c-quote p, .o-prose blockquote p {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n line-height: 1.6;\n}\n\n.c-quote p + p, .o-prose blockquote p + p {\n margin-top: 1em;\n}\n\n.c-quote cite, .o-prose blockquote cite {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n margin-top: 18px;\n margin-top: var(--space-s);\n display: block;\n}\n\n.c-quote__image {\n max-height: 3em;\n}\n\n.c-quote--bordered {\n padding: 54px 54px 54px 144px;\n padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-4xl);\n border: 1px solid #bfd3d6;\n}\n\n.c-quote--bordered:before {\n left: 54px;\n left: var(--space-xl);\n top: 36px;\n top: var(--space-l);\n}\n\n.c-scroll-spy {\n top: 18px;\n top: var(--gutter);\n position: sticky;\n overflow: hidden;\n}\n\n.c-scroll-spy a:not(.c-button) {\n color: #006daf;\n transition: transform .3s;\n display: block;\n position: relative;\n}\n\n.c-scroll-spy a:not(.c-button):hover {\n color: #333;\n}\n\n.c-scroll-spy a:not(.c-button):before {\n content: \"▸ \";\n position: absolute;\n top: 0;\n left: -17px;\n}\n\n.c-scroll-spy-active {\n transform: translateX(17px);\n}\n\n.c-scroll-spy-buttons a:before {\n content: \"\" !important;\n}\n\n@media only screen and (min-width: 880px) {\n .c-scroll-spy-buttons {\n margin-right: 54px;\n margin-right: var(--space-xl);\n }\n\n .c-scroll-spy-buttons .c-button {\n width: 100%;\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n }\n}\n\n@media only screen and (max-width: 879px) {\n .c-scroll-spy-buttons .c-button {\n vertical-align: top;\n margin-bottom: .5em;\n margin-right: .5em;\n display: inline-flex;\n }\n}\n\n.c-series {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n gap: 9px 18px;\n gap: var(--space-2xs) var(--space-s);\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n display: flex;\n}\n\n.c-series .mp {\n font-size: inherit;\n}\n\n.c-series li {\n padding-right: 1rem;\n}\n\n@supports (gap: 1rem) {\n .c-series li {\n padding-right: 0;\n }\n}\n\n.c-signpost__link {\n align-items: center;\n display: flex;\n}\n\n.c-signpost__image {\n margin-right: 18px;\n margin-right: var(--space-s-m);\n width: 20%;\n max-width: 72px;\n flex-grow: 1;\n flex-shrink: 0;\n}\n\n.c-signpost__content {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-signpost__content p {\n color: #006daf;\n text-decoration: underline;\n}\n\n.c-signpost:hover .c-signpost__content p {\n text-decoration: none;\n}\n\n.c-slat {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\n.c-slat--grey {\n background-color: #ebf1f2;\n}\n\n.c-slat--white {\n background-color: #fff;\n}\n\n.c-slat--concentric {\n background-image: url(\"../concentric.465e6b4d.svg\");\n background-position: 100% 0;\n background-repeat: no-repeat;\n background-size: auto 50%;\n}\n\n@media (min-width: 40em) {\n .c-slat--concentric {\n background-size: auto 100%;\n }\n}\n\n.c-slat--dots {\n background-image: url(\"../dots-pattern.1bae0e23.svg\");\n background-position: 0 0;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--crystal {\n background-image: url(\"../crystal.8300dbe3.svg\");\n background-position: 100% 100%;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--arc {\n background-image: url(\"../arc.abe174a6.svg\");\n background-position: 100% 100%;\n background-repeat: no-repeat;\n background-size: auto 100%;\n}\n\n.c-slat--padded {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-2xl);\n padding-top: 36px;\n padding-top: var(--space-l-2xl);\n}\n\n.c-slat__title {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\n.c-table, .o-prose table {\n text-align: left;\n width: 100%;\n border-collapse: collapse;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n background: none;\n border: none;\n}\n\n.c-table th, .o-prose table th {\n font-weight: 600;\n}\n\n.c-table td, .o-prose table td, .c-table th, .o-prose table th {\n vertical-align: top;\n color: inherit;\n background: #ebf1f2;\n border: 2px solid #fff;\n border-left: none;\n border-right: none;\n padding: 12px;\n}\n\n.c-table tr[class=\"u-bg\"] td, .o-prose table tr[class=\"u-bg\"] td, .c-table tr[class=\"u-bg\"] th, .o-prose table tr[class=\"u-bg\"] th {\n background-color: inherit;\n}\n\n.c-table th, .o-prose table th {\n color: #fff;\n background: #005461;\n}\n\n.c-table img, .o-prose table img {\n height: auto !important;\n}\n\n.c-table--center td, .c-table--center th {\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .c-table--ellipsis td {\n width: auto;\n }\n\n .c-table--ellipsis td.u-ellipsis {\n width: 100%;\n }\n}\n\n.c-table--wide {\n width: 100%;\n}\n\n.c-table .c-icon--dash, .o-prose table .c-icon--dash {\n color: #bfd3d6;\n}\n\n.c-table .c-icon--tick, .o-prose table .c-icon--tick {\n color: #13aa13;\n}\n\n.c-table__title th, .c-table__title td {\n color: inherit;\n background: #fff;\n}\n\n.c-table a:hover, .o-prose table a:hover {\n text-decoration: none;\n}\n\n.c-table--comparison thead th {\n color: inherit;\n background: none;\n font-weight: 400;\n}\n\n.c-table--comparison tbody td:nth-child(n+2) {\n text-align: center;\n}\n\n.c-table--features thead th, .c-table--features tbody td, .c-table--features tfoot td {\n background: none;\n}\n\n.c-table--features thead th {\n color: inherit;\n font-weight: 400;\n}\n\n@media (min-width: 30em) {\n .c-table .c-icon, .o-prose table .c-icon {\n font-size: 1.5rem;\n }\n}\n\n.c-table--fixed {\n table-layout: fixed;\n}\n\n@media (min-width: 40em) {\n .c-table--fixed th {\n width: 40%;\n }\n}\n\n@media (max-width: 40em) {\n .c-table--responsive tbody, .c-table--responsive tfoot, .c-table--responsive tr, .c-table--responsive td, .c-table--responsive th {\n display: block;\n }\n\n .c-table--responsive thead {\n display: none;\n }\n\n .c-table--responsive tr + tr {\n padding-top: 18px;\n padding-top: var(--space-s);\n margin-top: 18px;\n margin-top: var(--space-s);\n border-top: 2px solid #bfd3d6;\n }\n\n .c-table--responsive tbody [data-responsive-title] {\n grid-gap: 18px;\n grid-gap: var(--space-s);\n grid-template-columns: 1fr 1fr;\n display: grid;\n }\n\n .c-table--responsive tbody [data-responsive-title]:before {\n content: attr(data-responsive-title);\n font-weight: 700;\n }\n}\n\n.no-js .c-tabs__content > * {\n display: none;\n}\n\n.no-js .c-tabs__content > :target {\n display: block;\n}\n\n.c-tabs__content > * {\n display: none;\n}\n\n.c-tabs__content > .c-tab--active {\n display: block;\n}\n\n.no-js .c-tabs--flex .c-tabs__content > * {\n display: none;\n}\n\n.no-js .c-tabs--flex .c-tabs__content > :target {\n display: flex;\n}\n\n.c-tabs--flex .c-tabs__content > * {\n display: none;\n}\n\n.c-tabs--flex .c-tabs__content > .c-tab--active {\n justify-content: stretch;\n display: flex;\n}\n\n.c-tabs__controls {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n overflow-x: auto;\n}\n\n.c-tabs__controls-list {\n width: 100%;\n min-width: min-content;\n border-bottom: 4px solid #ebf3f9;\n display: flex;\n}\n\n.c-tabs__controls-list li {\n display: flex;\n}\n\n.c-tabs__control {\n letter-spacing: -.01em;\n font-size: 15px;\n font-weight: 700;\n font-size: var(--step--1);\n padding: 0 0 18px;\n padding: 0 0 var(--space-s-m);\n margin-right: 27px;\n margin-right: var(--space-m);\n z-index: 1;\n border-bottom: 4px solid #ebf3f9;\n margin-bottom: -4px;\n display: block;\n position: relative;\n}\n\n.mp .c-tabs__control {\n color: #006daf;\n}\n\n@media screen and (max-width: 55em) {\n .c-tabs__control {\n white-space: nowrap;\n }\n}\n\n.c-tabs__controls-list > li:last-child .c-tabs__control {\n margin-right: 0;\n}\n\n.c-tabs__control.c-twi {\n padding-right: 1.875rem;\n display: flex;\n}\n\n.c-tabs__control.c-twi svg {\n position: absolute;\n right: 0;\n}\n\n:checked + .c-tabs__control, .c-tabs__control--active {\n border-bottom-color: #006daf;\n}\n\n:focus + .c-tabs__control {\n outline: 2px solid ;\n}\n\n.c-tabs .c-tab {\n width: 100%;\n}\n\n.c-tabs .c-tab:focus {\n outline: none;\n}\n\n.c-twi {\n color: inherit;\n justify-content: flex-start;\n align-items: center;\n text-decoration: none;\n display: inline-flex;\n}\n\n.c-twi:hover, .c-twi:focus {\n text-decoration: inherit;\n}\n\n.c-twi svg {\n margin-left: .5em;\n font-size: 1.25em;\n position: static !important;\n}\n\n.c-twi--left svg {\n order: -1;\n margin-left: 0;\n margin-right: .5em;\n}\n\n.c-usp {\n padding-top: 18px;\n padding-top: var(--space-s-m);\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n position: relative;\n}\n\n.c-usp--bordered {\n padding: 18px;\n padding: var(--space-s-m);\n border: 1px solid ;\n border-image-source: linear-gradient(to right, #00a2c280, #13aa1380);\n border-image-slice: 1;\n}\n\n.c-usp--center .c-usp__icon, .c-usp--center .c-usp__title {\n margin-left: auto;\n margin-right: auto;\n}\n\n.c-usp__title {\n max-width: 300px;\n color: #005461;\n}\n\n@supports (-webkit-text-fill-color: transparent) {\n .c-usp__title {\n background-image: linear-gradient(to right, #005461, #00a2c2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .c-usp__title::selection {\n -webkit-background-clip: none;\n }\n}\n\n.c-usp__link {\n margin-top: 0;\n}\n\n.c-usp__icon {\n height: 36px;\n height: var(--space-l);\n width: 36px;\n width: var(--space-l);\n}\n\n.c-usp--center .c-usp__icon {\n height: 72px;\n height: var(--space-2xl);\n width: 72px;\n width: var(--space-2xl);\n}\n\n.c-usp__eyebrow {\n padding: 4.5px 13.5px;\n padding: var(--space-3xs) var(--space-xs);\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n color: #005461;\n background: #c2e9f0;\n border-radius: 2em;\n display: inline-block;\n}\n\n.mp-dynamicform .c-form__section {\n padding: 36px;\n padding: var(--space-l);\n background: #ebf1f2;\n}\n\n.mp-dynamicform .c-form__section + .c-form__section {\n border-top: 2px solid #fff;\n}\n\n.mp-dynamicform .c-form__section-title {\n letter-spacing: -.02em;\n font-size: var(--step-3);\n}\n\n.mp-dynamicform .c-form .c-label--required:after {\n content: \"\";\n color: #ce0058;\n padding: 0 2px;\n position: relative;\n top: -2px;\n}\n\n.mp-dynamicform .c-input__wrap {\n align-items: center;\n gap: var(--space-s);\n flex-wrap: wrap;\n display: flex;\n}\n\n.mp-dynamicform .c-input__wrap .c-label {\n flex-basis: 148px;\n margin-bottom: 0;\n}\n\n.mp-dynamicform .c-input__wrap .c-label + {\n flex: 1 0 148px;\n}\n\n.mp-dynamicform .c-input__wrap--messages {\n row-gap: 0;\n margin-top: 0;\n}\n\n.mp-dynamicform .c-input__wrap--messages p {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n letter-spacing: -.01em;\n font-size: var(--step--1);\n}\n\n.mp-dynamicform .c-input__spacer {\n height: 0;\n flex-basis: 148px;\n}\n\n.mp-dynamicform .c-input--select {\n cursor: pointer;\n}\n\n.mp-dynamicform .c-checkbox + label, .mp-dynamicform .c-radio + label {\n display: inline-block;\n}\n\n.c-h, .o-prose h2, .o-prose h3, .o-prose h4, .c-product-comparison-card__heading {\n font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n font-weight: 700;\n line-height: 1.2;\n}\n\n.c-h--page-subtitle {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #13aa13;\n font-weight: 600;\n}\n\n.c-h--step-6, .c-h--page-title {\n letter-spacing: -.03em;\n font-size: 53.75px;\n font-size: var(--step-6);\n}\n\n@media only screen and (max-width: 28rem) {\n .c-h--step-6, .c-h--page-title {\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n}\n\n@media only screen and (max-width: 70rem) {\n [lang=\"de-DE\"] .c-h--step-6, [lang=\"de-DE\"] .c-h--page-title {\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n}\n\n.c-h--step-5 {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\n@media only screen and (max-width: 28rem) {\n .c-h--step-5 {\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n}\n\n@media only screen and (max-width: 70rem) {\n [lang=\"de-DE\"] .c-h--step-5 {\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n}\n\n.c-h--step-4 {\n letter-spacing: -.03em;\n font-size: 37.32px;\n font-size: var(--step-4);\n}\n\n.c-h--step-3, .o-prose h2, .c-fieldset legend, .c-off-canvas__header {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n}\n\n.c-h--step-2, .o-prose h3 {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\n.c-h--step-1, .o-prose h4, .c-product-comparison-card__heading {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n}\n\n.c-h--step-0 {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\n.c-h--step--1 {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\n.c-h--reset {\n letter-spacing: -.01em;\n font-size: 18px;\n font-weight: 400;\n font-size: var(--step-0);\n}\n\n.c-h--upper {\n text-transform: uppercase;\n color: #005461;\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n letter-spacing: .02em;\n}\n\n.c-h--event-date {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #3d7b87;\n}\n\n.c-h--tagline {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n color: #13aa13;\n}\n\n.c-lightbox {\n z-index: 1000;\n width: 100%;\n height: 100%;\n background-color: #1c1c1ce6;\n justify-content: center;\n align-items: center;\n display: flex;\n position: fixed;\n top: 0;\n}\n\n.c-lightbox__slide {\n max-width: 90vw;\n margin: auto;\n display: none;\n}\n\n.c-lightbox__slide.active {\n display: block;\n}\n\n.c-lightbox__slide.active img {\n max-width: 85vw;\n max-height: 90vh;\n object-fit: contain;\n margin: auto;\n display: block;\n}\n\n.c-lightbox__prev, .c-lightbox__next {\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n background-position: center;\n background-repeat: no-repeat;\n padding: .5rem;\n position: absolute;\n}\n\n.c-lightbox__prev {\n background-image: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"arrow-left\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M22 12H2M2 12L9 5M2 12L9 19\\\" stroke=\\\"white\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"></path></svg>\");\n left: .5rem;\n}\n\n.c-lightbox__next {\n background-image: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"arrow-right\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"><path d=\\\"M2 12H22M22 12L15 5M22 12L15 19\\\" stroke=\\\"white\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"></path></svg>\");\n right: .5rem;\n}\n\n.c-lightbox__close {\n color: #fff;\n cursor: pointer;\n font-size: 1.6rem;\n position: absolute;\n top: .6rem;\n right: .6rem;\n}\n\n.c-lightbox__video {\n width: 100%;\n max-height: 80vh;\n}\n\n.c-product-finder__panel {\n padding: 54px 27px;\n padding: var(--space-xl-2xl) var(--space-m-xl);\n background: #ebf1f2;\n position: relative;\n}\n\n.c-product-finder__panel--intro {\n background: radial-gradient(circle at 100% 0, #ebf1f2 0% 30%, #c2e9f0 100%);\n}\n\n.c-product-finder__panel--intro .c-h, .c-product-finder__panel--intro .o-prose h2, .o-prose .c-product-finder__panel--intro h2, .c-product-finder__panel--intro .o-prose h3, .o-prose .c-product-finder__panel--intro h3, .c-product-finder__panel--intro .o-prose h4, .o-prose .c-product-finder__panel--intro h4, .c-product-finder__panel--intro .c-product-comparison-card__heading {\n font-size: var(--step-5);\n}\n\n.c-product-finder__panel:after {\n content: \"\";\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 54px 54px 0 0;\n border-width: var(--space-xl) var(--space-xl) 0 0;\n border-color: #0000 #fff #0000 #0000;\n display: none;\n position: absolute;\n bottom: 0;\n right: 0;\n}\n\n@media (min-width: 48em) {\n .c-product-finder__panel:after {\n display: block;\n }\n}\n\n.c-product-finder__panel .c-h, .c-product-finder__panel .o-prose h2, .o-prose .c-product-finder__panel h2, .c-product-finder__panel .o-prose h3, .o-prose .c-product-finder__panel h3, .c-product-finder__panel .o-prose h4, .o-prose .c-product-finder__panel h4, .c-product-finder__panel .c-product-comparison-card__heading, .c-product-finder__panel figure {\n margin-bottom: 0;\n}\n\n.c-product-finder__result {\n flex-flow: column;\n flex: 1;\n display: flex;\n}\n\n.c-product-finder__result > * + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\n.c-product-finder__result > .c-h, .o-prose .c-product-finder__result > h2, .o-prose .c-product-finder__result > h3, .o-prose .c-product-finder__result > h4, .c-product-finder__result > .c-product-comparison-card__heading {\n font-size: var(--step--1);\n text-transform: uppercase;\n}\n\n.c-product-finder__result--upgrade > .c-h, .o-prose .c-product-finder__result--upgrade > h2, .o-prose .c-product-finder__result--upgrade > h3, .o-prose .c-product-finder__result--upgrade > h4, .c-product-finder__result--upgrade > .c-product-comparison-card__heading {\n color: #005461;\n}\n\n@supports (-webkit-text-fill-color: transparent) {\n .c-product-finder__result--upgrade > .c-h, .o-prose .c-product-finder__result--upgrade > h2, .o-prose .c-product-finder__result--upgrade > h3, .o-prose .c-product-finder__result--upgrade > h4, .c-product-finder__result--upgrade > .c-product-comparison-card__heading {\n background-image: linear-gradient(to right, #005461, #00a2c2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n display: inline-block;\n }\n\n .c-product-finder__result--upgrade > .c-h::selection, .o-prose .c-product-finder__result--upgrade > h2::selection, .o-prose .c-product-finder__result--upgrade > h3::selection, .o-prose .c-product-finder__result--upgrade > h4::selection, .c-product-finder__result--upgrade > .c-product-comparison-card__heading::selection {\n -webkit-background-clip: none;\n }\n}\n\n.c-product-finder__result--upgrade .c-product-comparison-card {\n border: 1px solid ;\n border-image-source: linear-gradient(to right, #00a2c280, #13aa1380);\n border-image-slice: 1;\n}\n\nhtml body {\n}\n\nhtml body .u-step--2 {\n letter-spacing: -.01em;\n font-size: 12.5px;\n font-size: var(--step--2);\n}\n\nhtml body .u-step--1 {\n letter-spacing: -.01em;\n font-size: 15px;\n font-size: var(--step--1);\n}\n\nhtml body .u-step-0 {\n letter-spacing: -.01em;\n font-size: 18px;\n font-size: var(--step-0);\n}\n\nhtml body .u-step-1 {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n}\n\nhtml body .u-step-2 {\n letter-spacing: -.02em;\n font-size: 25.92px;\n font-size: var(--step-2);\n}\n\nhtml body .u-step-3 {\n letter-spacing: -.02em;\n font-size: 31.1px;\n font-size: var(--step-3);\n}\n\nhtml body .u-step-4 {\n letter-spacing: -.03em;\n font-size: 37.32px;\n font-size: var(--step-4);\n}\n\nhtml body .u-step-5 {\n letter-spacing: -.03em;\n font-size: 44.79px;\n font-size: var(--step-5);\n}\n\nhtml body .u-step-6 {\n letter-spacing: -.03em;\n font-size: 53.75px;\n font-size: var(--step-6);\n}\n\nhtml body .u-step-7 {\n letter-spacing: -.03em;\n font-size: 64.5px;\n font-size: var(--step-7);\n}\n\nhtml body .u-step-8 {\n letter-spacing: -.03em;\n font-size: 77.4px;\n font-size: var(--step-8);\n}\n\nhtml body .u-step-9 {\n letter-spacing: -.03em;\n font-size: 92.88px;\n font-size: var(--step-9);\n}\n\nhtml body .u-step-10 {\n letter-spacing: -.03em;\n font-size: 111.45px;\n font-size: var(--step-10);\n}\n\nhtml body .u-lede {\n letter-spacing: -.02em;\n font-size: 21.6px;\n font-size: var(--step-1);\n color: #00a2c2;\n}\n\n.mp html body .u-lede, html body .u-lede {\n line-height: 1.6;\n}\n\nhtml body .u-strong {\n font-weight: 700;\n}\n\nhtml body .u-normal {\n font-weight: 400;\n}\n\nhtml body .u-ls {\n letter-spacing: -.01em;\n}\n\nhtml body .u-text-center {\n text-align: center;\n}\n\nhtml body .u-remove-bullets {\n list-style-type: none;\n}\n\nhtml body .u-link-inside a, html body .mp .u-link, html body .u-link, html body .c-internal-nav__list li a, .c-internal-nav__list li html body a, html body .c-off-canvas__close {\n color: #006daf;\n cursor: pointer;\n}\n\nhtml body .u-link-inside a:hover, html body .mp .u-link:hover, html body .u-link:hover, html body .c-internal-nav__list li a:hover, .c-internal-nav__list li html body a:hover, html body .c-off-canvas__close:hover {\n text-decoration: underline;\n}\n\nhtml body .u-link-inside a--petrol, html body .mp .u-link--petrol, html body .u-link--petrol {\n color: #005461;\n}\n\nhtml body .u-link-inside a--red, html body .mp .u-link--red, html body .u-link--red {\n color: #ce0058;\n}\n\nhtml body .u-link-inside a--underline, html body .mp .u-link--underline, html body .u-link--underline {\n text-decoration: underline;\n}\n\nhtml body .u-link-inside a--underline:hover, html body .mp .u-link--underline:hover, html body .u-link--underline:hover {\n text-decoration: none;\n}\n\nhtml body .u-petrol {\n color: #005461;\n}\n\nhtml body .u-bg-petrol {\n background-color: #005461;\n}\n\nhtml body .u-petrol-step--2 {\n color: #002126;\n}\n\nhtml body .u-bg-petrol-step--2 {\n background-color: #002126;\n}\n\nhtml body .u-petrol-step--1 {\n color: #003039;\n}\n\nhtml body .u-bg-petrol-step--1 {\n background-color: #003039;\n}\n\nhtml body .u-petrol-step-1 {\n color: #3d7b87;\n}\n\nhtml body .u-bg-petrol-step-1 {\n background-color: #3d7b87;\n}\n\nhtml body .u-petrol-step-2 {\n color: #bfd3d6;\n}\n\nhtml body .u-bg-petrol-step-2 {\n background-color: #bfd3d6;\n}\n\nhtml body .u-petrol-step-3 {\n color: #ebf1f2;\n}\n\nhtml body .u-bg-petrol-step-3 {\n background-color: #ebf1f2;\n}\n\nhtml body .u-blue {\n color: #00a2c2;\n}\n\nhtml body .u-bg-blue {\n background-color: #00a2c2;\n}\n\nhtml body .u-blue-step--1 {\n color: #00758c;\n}\n\nhtml body .u-bg-blue-step--1 {\n background-color: #00758c;\n}\n\nhtml body .u-blue-step-1 {\n color: #47bcd3;\n}\n\nhtml body .u-bg-blue-step-1 {\n background-color: #47bcd3;\n}\n\nhtml body .u-blue-step-2 {\n color: #c2e9f0;\n}\n\nhtml body .u-bg-blue-step-2 {\n background-color: #c2e9f0;\n}\n\nhtml body .u-blue-step-3 {\n color: #ebf8fa;\n}\n\nhtml body .u-bg-blue-step-3 {\n background-color: #ebf8fa;\n}\n\nhtml body .u-green {\n color: #13aa13;\n}\n\nhtml body .u-bg-green {\n background-color: #13aa13;\n}\n\nhtml body .u-green-step--1 {\n color: #0e7a0e;\n}\n\nhtml body .u-bg-green-step--1 {\n background-color: #0e7a0e;\n}\n\nhtml body .u-green-step-1 {\n color: #55c255;\n}\n\nhtml body .u-bg-green-step-1 {\n background-color: #55c255;\n}\n\nhtml body .u-green-step-2 {\n color: #c6ebc6;\n}\n\nhtml body .u-bg-green-step-2 {\n background-color: #c6ebc6;\n}\n\nhtml body .u-green-step-3 {\n color: #ecf8ec;\n}\n\nhtml body .u-bg-green-step-3 {\n background-color: #ecf8ec;\n}\n\nhtml body .u-red {\n color: #ce0058;\n}\n\nhtml body .u-bg-red {\n background-color: #ce0058;\n}\n\nhtml body .u-red-step--1 {\n color: #9b0042;\n}\n\nhtml body .u-bg-red-step--1 {\n background-color: #9b0042;\n}\n\nhtml body .u-red-step-1 {\n color: #dc4787;\n}\n\nhtml body .u-bg-red-step-1 {\n background-color: #dc4787;\n}\n\nhtml body .u-red-step-2 {\n color: #f3c2d7;\n}\n\nhtml body .u-bg-red-step-2 {\n background-color: #f3c2d7;\n}\n\nhtml body .u-red-step-3 {\n color: #fbebf2;\n}\n\nhtml body .u-bg-red-step-3 {\n background-color: #fbebf2;\n}\n\nhtml body .u-utility-blue {\n color: #006daf;\n}\n\nhtml body .u-bg-utility-blue {\n background-color: #006daf;\n}\n\nhtml body .u-utility-blue-step--1 {\n color: #004e7e;\n}\n\nhtml body .u-bg-utility-blue-step--1 {\n background-color: #004e7e;\n}\n\nhtml body .u-utility-blue-step-1 {\n color: #4796c5;\n}\n\nhtml body .u-bg-utility-blue-step-1 {\n background-color: #4796c5;\n}\n\nhtml body .u-utility-blue-step-2 {\n color: #c2dcec;\n}\n\nhtml body .u-bg-utility-blue-step-2 {\n background-color: #c2dcec;\n}\n\nhtml body .u-utility-blue-step-3 {\n color: #ebf3f9;\n}\n\nhtml body .u-bg-utility-blue-step-3 {\n background-color: #ebf3f9;\n}\n\nhtml body .u-utility-orange {\n color: #f2a60d;\n}\n\nhtml body .u-bg-utility-orange {\n background-color: #f2a60d;\n}\n\nhtml body .u-utility-orange-step--1 {\n color: #ae7809;\n}\n\nhtml body .u-bg-utility-orange-step--1 {\n background-color: #ae7809;\n}\n\nhtml body .u-utility-orange-step-1 {\n color: #f6bf51;\n}\n\nhtml body .u-bg-utility-orange-step-1 {\n background-color: #f6bf51;\n}\n\nhtml body .u-utility-orange-step-2 {\n color: #fceac5;\n}\n\nhtml body .u-bg-utility-orange-step-2 {\n background-color: #fceac5;\n}\n\nhtml body .u-utility-orange-step-3 {\n color: #fef8ec;\n}\n\nhtml body .u-bg-utility-orange-step-3 {\n background-color: #fef8ec;\n}\n\nhtml body .u-grey {\n color: #333;\n}\n\nhtml body .u-bg-grey {\n background-color: #333;\n}\n\nhtml body .u-grey--50 {\n color: #666;\n}\n\nhtml body .u-bg-grey--50 {\n background-color: #666;\n}\n\nhtml body .u-grey-step--2 {\n color: #0a0a0a;\n}\n\nhtml body .u-bg-grey-step--2 {\n background-color: #0a0a0a;\n}\n\nhtml body .u-grey-step--1 {\n color: #1c1c1c;\n}\n\nhtml body .u-bg-grey-step--1 {\n background-color: #1c1c1c;\n}\n\nhtml body .u-grey-step-1 {\n color: #959595;\n}\n\nhtml body .u-bg-grey-step-1 {\n background-color: #959595;\n}\n\nhtml body .u-grey-step-2 {\n color: #cecece;\n}\n\nhtml body .u-bg-grey-step-2 {\n background-color: #cecece;\n}\n\nhtml body .u-grey-step-3 {\n color: #efefef;\n}\n\nhtml body .u-bg-grey-step-3 {\n background-color: #efefef;\n}\n\nhtml body .u-white {\n color: #fff;\n}\n\nhtml body .u-bg-white, html body .c-internal-nav--stuck {\n background-color: #fff;\n}\n\nhtml body .u-disabled {\n cursor: not-allowed;\n}\n\nhtml body .u-disabled input, html body .u-disabled button {\n pointer-events: none;\n}\n\nhtml body .u-wrap, html body .c-internal-nav__wrap {\n padding-right: 18px;\n padding-right: var(--gutter);\n padding-left: 18px;\n padding-left: var(--gutter);\n max-width: 78.75rem;\n max-width: calc(78.75rem + var(--gutter) + var(--gutter) );\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n}\n\nhtml body .u-wrap .u-wrap, html body .c-internal-nav__wrap .u-wrap, html body .u-wrap .c-internal-nav__wrap, html body .c-internal-nav__wrap .c-internal-nav__wrap {\n padding-left: 0;\n padding-right: 0;\n}\n\nhtml body .u-wrap--content {\n max-width: 51.75rem;\n width: 100%;\n}\n\nhtml body .u-wrap--fields {\n max-width: 27rem;\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-flex {\n display: flex;\n}\n\nhtml body .u-flex-column {\n flex-direction: column;\n}\n\nhtml body .u-align-center {\n align-items: center;\n}\n\nhtml body .u-justify-center {\n justify-content: center;\n}\n\nhtml body .u-justify-between {\n justify-content: space-between;\n}\n\nhtml body .u-justify-end {\n justify-content: flex-end;\n}\n\nhtml body .u-flex-1 {\n flex: 1;\n}\n\nhtml body .u-flex-no-shrink {\n flex-shrink: 0;\n}\n\nhtml body .u-flex-no-grow {\n flex-grow: 0;\n}\n\nhtml body .u-flex-wrap {\n flex-wrap: wrap;\n}\n\nhtml body .u-hidden, html body .c-radio, html body .c-checkbox, html body .c-toggle__checkbox {\n clip: rect(0 0 0 0);\n clip-path: inset(0 0 100%);\n height: 1px;\n white-space: nowrap;\n width: 1px;\n transition: clip-path .3s;\n position: absolute;\n overflow: hidden;\n}\n\nhtml body .u-revealed {\n clip-path: inset(0);\n transition: clip-path .3s;\n}\n\nhtml body .u-clear-both {\n clear: both;\n}\n\nhtml body .u-display-none {\n display: none;\n}\n\nhtml body .u-display-block {\n display: block;\n}\n\nhtml body .u-display-inline-block {\n display: inline-block;\n}\n\nhtml body .u-float-left, html body .u-float--image-left {\n float: left;\n}\n\nhtml body .u-float-right, html body .u-float--image-right, html body .c-card--float-right, html body .c-product-signpost--float-right {\n float: right;\n}\n\nhtml body .u-float--image-left {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n html body .u-float--image-left {\n margin-right: 13.5px;\n margin-right: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\nhtml body .u-float--image-right {\n margin: 0 0 13.5px;\n margin: 0 0 var(--space-xs-l) 0;\n width: 100%;\n}\n\n@media (min-width: 38em) {\n html body .u-float--image-right {\n margin-left: 13.5px;\n margin-left: var(--space-xs-l);\n min-width: 9rem;\n width: 50%;\n }\n}\n\nhtml body .u-fill, html body .c-campaign__link, html body .c-product-signpost__link, html body .c-usp__link {\n height: 100%;\n width: 100%;\n z-index: 1;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n}\n\nhtml body .u-fill--link, html body .c-campaign__link, html body .c-product-signpost__link, html body .c-usp__link {\n white-space: nowrap;\n text-indent: 200%;\n overflow: hidden;\n}\n\nhtml body .u-relative {\n position: relative;\n}\n\nhtml body .u-sticky {\n position: sticky;\n top: 0;\n}\n\nhtml body .u-sticky--gutter {\n top: 18px;\n top: var(--gutter);\n}\n\nhtml body .u-split {\n width: 100%;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n display: flex;\n}\n\nhtml body .u-split--top {\n align-items: flex-start;\n}\n\nhtml body .u-split--bottom {\n align-items: flex-end;\n}\n\nhtml body .u-split > :first-child {\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\n@supports (gap: 1rem) {\n html body .u-split {\n gap: 18px;\n gap: var(--space-s-m);\n }\n\n html body .u-split > :first-child {\n margin-right: unset;\n }\n}\n\nhtml body .u-row {\n gap: 18px;\n gap: var(--space-s-l);\n display: flex;\n}\n\n@supports (object-fit: contain) {\n html body .u-object-contain {\n object-fit: contain;\n }\n}\n\n@supports (object-fit: cover) {\n html body .u-2\\/1 {\n aspect-ratio: 2 / 1;\n object-fit: cover;\n object-position: 75% 50%;\n }\n}\n\n@media (min-width: 640px) {\n html body .u-md-hidden {\n display: none !important;\n }\n}\n\nhtml body [v-cloak] {\n display: none;\n}\n\nhtml body .u-flow--3xs > * + * {\n margin-top: 4.5px;\n margin-top: var(--space-3xs);\n}\n\nhtml body .u-flow--2xs > * + , html body .c-product-comparison-card > + , html body .c-comparison-table__product > + * {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\nhtml body .u-flow--xs > * + * {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\nhtml body .u-flow--s > * + , html body .u-flow > + * {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\nhtml body .u-flow--m > * + * {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\nhtml body .u-flow--s-m > * + * {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n}\n\nhtml body .u-flow--s-l > * + * {\n margin-top: 18px;\n margin-top: var(--space-s-l);\n}\n\nhtml body .u-flow--m-xl > * + * {\n margin-top: 27px;\n margin-top: var(--space-m-xl);\n}\n\nhtml body .u-flow--l > * + * {\n margin-top: 36px;\n margin-top: var(--space-l);\n}\n\nhtml body .u-flow--xl > * + * {\n margin-top: 54px;\n margin-top: var(--space-xl);\n}\n\nhtml body .u-flow--l-2xl > * + * {\n margin-top: 36px;\n margin-top: var(--space-l-2xl);\n}\n\nhtml body .u-flow--3xl > * + * {\n margin-top: 108px;\n margin-top: var(--space-3xl);\n}\n\nhtml body .u-flow--prose > * + , html body .u-flow--prose > [property=\"a:Content\"] > + * {\n margin-top: var(--flow, 1em);\n}\n\nhtml body .u-flow--gutter > * + * {\n margin-top: 18px;\n margin-top: var(--gutter);\n}\n\nhtml body .u-flow--lined > * + * {\n padding-top: 27px;\n padding-top: var(--space-m-xl);\n margin-top: 27px;\n margin-top: var(--space-m-xl);\n clear: both;\n border-top: 1px solid #bfd3d6;\n}\n\nhtml body .u-pad-top-0 {\n padding-top: 0;\n}\n\nhtml body .u-pad-top-s {\n padding-top: 18px;\n padding-top: var(--space-s);\n}\n\nhtml body .u-pad-top-m {\n padding-top: 27px;\n padding-top: var(--space-m);\n}\n\nhtml body .u-pad-top-l {\n padding-top: 36px;\n padding-top: var(--space-l);\n}\n\nhtml body .u-pad-top-xl {\n padding-top: 54px;\n padding-top: var(--space-xl);\n}\n\nhtml body .u-pad-top-s-m {\n padding-top: 18px;\n padding-top: var(--space-s-m);\n}\n\nhtml body .u-pad-top-m-l {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n}\n\nhtml body .u-pad-top-l-xl {\n padding-top: 36px;\n padding-top: var(--space-l-xl);\n}\n\nhtml body .u-pad-bottom-0 {\n padding-bottom: 0;\n}\n\nhtml body .u-pad-bottom-s {\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n}\n\nhtml body .u-pad-bottom-m {\n padding-bottom: 27px;\n padding-bottom: var(--space-m);\n}\n\nhtml body .u-pad-bottom-l {\n padding-bottom: 36px;\n padding-bottom: var(--space-l);\n}\n\nhtml body .u-pad-bottom-xl {\n padding-bottom: 54px;\n padding-bottom: var(--space-xl);\n}\n\nhtml body .u-pad-bottom-s-m {\n padding-bottom: 18px;\n padding-bottom: var(--space-s-m);\n}\n\nhtml body .u-pad-bottom-m-l {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n}\n\nhtml body .u-pad-bottom-l-xl {\n padding-bottom: 36px;\n padding-bottom: var(--space-l-xl);\n}\n\nhtml body .u-pad-left-0 {\n padding-left: 0;\n}\n\nhtml body .u-pad-left-s {\n padding-left: 18px;\n padding-left: var(--space-s);\n}\n\nhtml body .u-pad-left-m {\n padding-left: 27px;\n padding-left: var(--space-m);\n}\n\nhtml body .u-pad-left-l {\n padding-left: 36px;\n padding-left: var(--space-l);\n}\n\nhtml body .u-pad-left-xl {\n padding-left: 54px;\n padding-left: var(--space-xl);\n}\n\nhtml body .u-pad-right-0 {\n padding-right: 0;\n}\n\nhtml body .u-pad-right-s {\n padding-right: 18px;\n padding-right: var(--space-s);\n}\n\nhtml body .u-pad-right-m {\n padding-right: 27px;\n padding-right: var(--space-m);\n}\n\nhtml body .u-pad-right-l {\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-pad-right-xl {\n padding-right: 54px;\n padding-right: var(--space-xl);\n}\n\nhtml body .u-pad-0 {\n padding: 0;\n}\n\nhtml body .u-pad-3xs {\n padding: 4.5px;\n padding: var(--space-3xs);\n}\n\nhtml body .u-pad-s {\n padding: 18px;\n padding: var(--space-s);\n}\n\nhtml body .u-pad-m {\n padding: 27px;\n padding: var(--space-m);\n}\n\nhtml body .u-pad-l {\n padding: 36px;\n padding: var(--space-l);\n}\n\nhtml body .u-pad-xl {\n padding: 54px;\n padding: var(--space-xl);\n}\n\nhtml body .u-pad-y-xs {\n padding-top: 13.5px;\n padding-top: var(--space-xs);\n padding-bottom: 13.5px;\n padding-bottom: var(--space-xs);\n}\n\nhtml body .u-pad-y-s {\n padding-top: 18px;\n padding-top: var(--space-s);\n padding-bottom: 18px;\n padding-bottom: var(--space-s);\n}\n\nhtml body .u-pad-y-m {\n padding-top: 27px;\n padding-top: var(--space-m);\n padding-bottom: 27px;\n padding-bottom: var(--space-m);\n}\n\nhtml body .u-pad-y-m-l {\n padding-top: 27px;\n padding-top: var(--space-m-l);\n padding-bottom: 27px;\n padding-bottom: var(--space-m-l);\n}\n\nhtml body .u-pad-y-l {\n padding-top: 36px;\n padding-top: var(--space-l);\n padding-bottom: 36px;\n padding-bottom: var(--space-l);\n}\n\nhtml body .u-pad-y-xl {\n padding-top: 54px;\n padding-top: var(--space-xl);\n padding-bottom: 54px;\n padding-bottom: var(--space-xl);\n}\n\nhtml body .u-pad-y-2xl {\n padding-top: 72px;\n padding-top: var(--space-2xl);\n padding-bottom: 72px;\n padding-bottom: var(--space-2xl);\n}\n\nhtml body .u-pad-y-l-xl {\n padding-top: 36px;\n padding-top: var(--space-l-xl);\n padding-bottom: 36px;\n padding-bottom: var(--space-l-xl);\n}\n\nhtml body .u-pad-y-l-2xl {\n padding-top: 36px;\n padding-top: var(--space-l-2xl);\n padding-bottom: 36px;\n padding-bottom: var(--space-l-2xl);\n}\n\nhtml body .u-pad-x-s {\n padding-left: 18px;\n padding-left: var(--space-s);\n padding-right: 18px;\n padding-right: var(--space-s);\n}\n\nhtml body .u-pad-x-m {\n padding-left: 27px;\n padding-left: var(--space-m);\n padding-right: 27px;\n padding-right: var(--space-m);\n}\n\nhtml body .u-pad-x-l {\n padding-left: 36px;\n padding-left: var(--space-l);\n padding-right: 36px;\n padding-right: var(--space-l);\n}\n\nhtml body .u-pad-x-xl {\n padding-left: 54px;\n padding-left: var(--space-xl);\n padding-right: 54px;\n padding-right: var(--space-xl);\n}\n\nhtml body .u-pad-x-s-xl {\n padding-left: 18px;\n padding-left: var(--space-s-xl);\n padding-right: 18px;\n padding-right: var(--space-s-xl);\n}\n\nhtml body .u-margin-top-0 {\n margin-top: 0;\n}\n\nhtml body .u-margin-top-auto {\n margin-top: auto;\n}\n\nhtml body .u-margin-top-2xs {\n margin-top: 9px;\n margin-top: var(--space-2xs);\n}\n\nhtml body .u-margin-top-xs {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n}\n\nhtml body .u-margin-top-s {\n margin-top: 18px;\n margin-top: var(--space-s);\n}\n\nhtml body .u-margin-top-m {\n margin-top: 27px;\n margin-top: var(--space-m);\n}\n\nhtml body .u-margin-top-l {\n margin-top: 36px;\n margin-top: var(--space-l);\n}\n\nhtml body .u-margin-top-xl {\n margin-top: 54px;\n margin-top: var(--space-xl);\n}\n\nhtml body .u-margin-top-s-m {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n}\n\nhtml body .u-margin-top-m-l {\n margin-top: 27px;\n margin-top: var(--space-m-l);\n}\n\nhtml body .u-margin-top-l-xl {\n margin-top: 36px;\n margin-top: var(--space-l-xl);\n}\n\nhtml body .u-margin-top-l-2xl {\n margin-top: 36px;\n margin-top: var(--space-l-2xl);\n}\n\nhtml body .u-margin-top-xl-2xl {\n margin-top: 54px;\n margin-top: var(--space-xl-2xl);\n}\n\nhtml body .u-margin-bottom-0 {\n margin-bottom: 0;\n}\n\nhtml body .u-margin-bottom-s {\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n}\n\nhtml body .u-margin-bottom-m {\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n}\n\nhtml body .u-margin-bottom-l {\n margin-bottom: 36px;\n margin-bottom: var(--space-l);\n}\n\nhtml body .u-margin-bottom-xl {\n margin-bottom: 54px;\n margin-bottom: var(--space-xl);\n}\n\nhtml body .u-margin-bottom-s-m {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\nhtml body .u-margin-bottom-s-l {\n margin-bottom: 18px;\n margin-bottom: var(--space-s-l);\n}\n\nhtml body .u-margin-bottom-m-l {\n margin-bottom: 27px;\n margin-bottom: var(--space-m-l);\n}\n\nhtml body .u-margin-bottom-m-xl {\n margin-bottom: 27px;\n margin-bottom: var(--space-m-xl);\n}\n\nhtml body .u-margin-bottom-l-xl {\n margin-bottom: 36px;\n margin-bottom: var(--space-l-xl);\n}\n\nhtml body .u-margin-left-0 {\n margin-left: 0;\n}\n\nhtml body .u-margin-left-2xs {\n margin-left: 9px;\n margin-left: var(--space-2xs);\n}\n\nhtml body .u-margin-left-xs {\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n}\n\nhtml body .u-margin-left-s {\n margin-left: 18px;\n margin-left: var(--space-s);\n}\n\nhtml body .u-margin-left-m {\n margin-left: 27px;\n margin-left: var(--space-m);\n}\n\nhtml body .u-margin-left-l {\n margin-left: 36px;\n margin-left: var(--space-l);\n}\n\nhtml body .u-margin-left-xl {\n margin-left: 54px;\n margin-left: var(--space-xl);\n}\n\nhtml body .u-margin-right-0 {\n margin-right: 0;\n}\n\nhtml body .u-margin-right-xs {\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n}\n\nhtml body .u-margin-right-s {\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\nhtml body .u-margin-right-m {\n margin-right: 27px;\n margin-right: var(--space-m);\n}\n\nhtml body .u-margin-right-l {\n margin-right: 36px;\n margin-right: var(--space-l);\n}\n\nhtml body .u-margin-right-xl {\n margin-right: 54px;\n margin-right: var(--space-xl);\n}\n\nhtml body .u-margin-0 {\n margin: 0;\n}\n\nhtml body .u-margin-s {\n margin: 18px;\n margin: var(--space-s);\n}\n\nhtml body .u-margin-m {\n margin: 27px;\n margin: var(--space-m);\n}\n\nhtml body .u-margin-l {\n margin: 36px;\n margin: var(--space-l);\n}\n\nhtml body .u-margin-xl {\n margin: 54px;\n margin: var(--space-xl);\n}\n\nhtml body .u-margin-y-xs {\n margin-top: 13.5px;\n margin-top: var(--space-xs);\n margin-bottom: 13.5px;\n margin-bottom: var(--space-xs);\n}\n\nhtml body .u-margin-y-s {\n margin-top: 18px;\n margin-top: var(--space-s);\n margin-bottom: 18px;\n margin-bottom: var(--space-s);\n}\n\nhtml body .u-margin-y-s-m {\n margin-top: 18px;\n margin-top: var(--space-s-m);\n margin-bottom: 18px;\n margin-bottom: var(--space-s-m);\n}\n\nhtml body .u-margin-y-m {\n margin-top: 27px;\n margin-top: var(--space-m);\n margin-bottom: 27px;\n margin-bottom: var(--space-m);\n}\n\nhtml body .u-margin-y-l {\n margin-top: 36px;\n margin-top: var(--space-l);\n margin-bottom: 36px;\n margin-bottom: var(--space-l);\n}\n\nhtml body .u-margin-y-xl {\n margin-top: 54px;\n margin-top: var(--space-xl);\n margin-bottom: 54px;\n margin-bottom: var(--space-xl);\n}\n\nhtml body .u-margin-x-3xs {\n margin-left: 4.5px;\n margin-left: var(--space-3xs);\n margin-right: 4.5px;\n margin-right: var(--space-3xs);\n}\n\nhtml body .u-margin-x-2xs {\n margin-left: 9px;\n margin-left: var(--space-2xs);\n margin-right: 9px;\n margin-right: var(--space-2xs);\n}\n\nhtml body .u-margin-x-xs {\n margin-left: 13.5px;\n margin-left: var(--space-xs);\n margin-right: 13.5px;\n margin-right: var(--space-xs);\n}\n\nhtml body .u-margin-x-s {\n margin-left: 18px;\n margin-left: var(--space-s);\n margin-right: 18px;\n margin-right: var(--space-s);\n}\n\nhtml body .u-margin-x-m {\n margin-left: 27px;\n margin-left: var(--space-m);\n margin-right: 27px;\n margin-right: var(--space-m);\n}\n\nhtml body .u-margin-x-l {\n margin-left: 36px;\n margin-left: var(--space-l);\n margin-right: 36px;\n margin-right: var(--space-l);\n}\n\nhtml body .u-margin-x-xl {\n margin-left: 54px;\n margin-left: var(--space-xl);\n margin-right: 54px;\n margin-right: var(--space-xl);\n}\n\nhtml body .u-margin-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\nhtml body .u-width-auto {\n width: auto;\n}\n\nhtml body .u-width-100 {\n width: 100%;\n}\n\nhtml body .u-hr, html body .o-prose hr {\n padding-bottom: 27px;\n padding-bottom: var(--space-m-xl);\n margin: 0 0 27px;\n margin-bottom: var(--space-m-xl);\n border: none;\n border-bottom: 1px solid #bfd3d6;\n}\n\nhtml body .u-border-top {\n border-top: 1px solid #bfd3d6;\n}\n\nhtml body .u-border-bottom {\n border-bottom: 1px solid #bfd3d6;\n}\n\nhtml body .u-border {\n border: 1px solid #bfd3d6;\n}\n\nhtml body .u-ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 0;\n width: 100%;\n overflow: hidden;\n}\n\n@supports (background-attachment: local) {\n html body .u-scroll-shadows--v {\n background-color: #fff;\n background-image: linear-gradient(#fff 50%, #0000), linear-gradient(#0000, #fff 50%), radial-gradient(farthest-side at 50% 0, #9999994d, #0000), radial-gradient(farthest-side at 50% 100%, #9999994d, #0000);\n background-position: top, bottom, top, bottom;\n background-repeat: no-repeat;\n background-size: 100% 54px, 100% 54px, 100% 27px, 100% 27px;\n background-attachment: local, local, scroll, scroll;\n }\n}\n\n@supports (background-attachment: local) {\n html body .u-scroll-shadows--h {\n background-color: #fff;\n background-image: linear-gradient(to right, #fff 50%, #0000), linear-gradient(to right, #0000, #fff 50%), radial-gradient(farthest-side at 0, #9999994d, #0000), radial-gradient(farthest-side at 100%, #9999994d, #0000);\n background-position: 0, 100%, 0, 100%;\n background-repeat: no-repeat;\n background-size: 54px 100%, 54px 100%, 27px 120%, 27px 120%;\n background-attachment: local, local, scroll, scroll;\n }\n}\n\n/# sourceMappingURL=main.css.map /\n","@import './tools';\r\n@import './foundations';\r\n@import './elements';\r\n@import './objects';\r\n@import './components';\r\n@import './utilities';\r\n","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n left: 50%;\r\n left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n position: relative;\r\n transform: translateX(-50vw);\r\n width: 100vw;\r\n width: calc( 100vw - var(--scrollbarWidth) );\r\n padding-left: safe-space($pad);\r\n padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n @include breakout\r\n}","// Cutoff corner effect\r\n@mixin cutoff($corner:\"bottom-right\", $size:var(--gutter)) {\r\n \r\n $offset : calc(100% - $size);\r\n\r\n // Co-ordinates for the polygon\r\n $co1: \"0 0\";\r\n $co2: \"100% 0\";\r\n $co3: \"100% 100%\";\r\n $co4: \"0 100%\";\r\n\r\n // Override the basic co-ordinates\r\n @if $corner == \"top-left\" {\r\n $co1: \"0 #{$size}, #{$size} 0\";\r\n } @else if $corner == \"top-right\" {\r\n $co2: \"#{$offset} 0, 100% #{$size}\";\r\n } @else if $corner == \"bottom-left\" {\r\n $co4: \"#{$size} 100%, 0 #{$offset}\";\r\n } @else {\r\n $co3: \"100% #{$offset}, #{$offset} 100%\";\r\n }\r\n\r\n clip-path: polygon(\r\n #{$co1}, #{$co2}, #{$co3}, #{$co4}\r\n );\r\n}\r\n\r\n.u-cutoff {\r\n @include cutoff\r\n}\r\n\r\n.u-cutoff--top-right {\r\n @include cutoff(\"top-right\")\r\n}\r\n\r\n.u-cutoff--top-left {\r\n @include cutoff(\"top-left\")\r\n}\r\n\r\n.u-cutoff--bottom-left {\r\n @include cutoff(\"bottom-left\")\r\n}\r\n\r\n.u-cutoff--xl {\r\n @include cutoff($size: var(--space-xl))\r\n}","$weights: (\r\n base: 400,\r\n semi: 600,\r\n bold: 700\r\n);\r\n\r\n$line-heights: (\r\n base: 1.2,\r\n prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n '4%': 0.04em,\r\n '2%': 0.02em,\r\n base: -0.01em,\r\n '-2%': -0.02em,\r\n '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, /\r\n$steps: (\r\n -2: (\r\n min: 12.64,\r\n max: 12.50,\r\n ls: base\r\n ),\r\n\r\n -1: (\r\n min: 14.22,\r\n max: 15.00,\r\n ls: base\r\n ),\r\n\r\n 0: (\r\n min: 16.00,\r\n max: 18.00,\r\n ls: base\r\n ),\r\n\r\n 1: (\r\n min: 18.00,\r\n max: 21.60,\r\n ls: '-2%'\r\n ),\r\n\r\n 2: (\r\n min: 20.25,\r\n max: 25.92,\r\n ls: '-2%'\r\n ),\r\n\r\n 3: (\r\n min: 22.78,\r\n max: 31.10,\r\n ls: '-2%'\r\n ),\r\n\r\n 4: (\r\n min: 25.63,\r\n max: 37.32,\r\n ls: '-3%'\r\n ),\r\n\r\n 5: (\r\n min: 28.83,\r\n max: 44.79,\r\n ls: '-3%'\r\n ),\r\n\r\n 6: (\r\n min: 32.44,\r\n max: 53.75,\r\n ls: '-3%'\r\n ),\r\n\r\n 7: (\r\n min: 36.49,\r\n max: 64.50,\r\n ls: '-3%'\r\n ),\r\n\r\n 8: (\r\n min: 41.05,\r\n max: 77.40,\r\n ls: '-3%'\r\n ),\r\n\r\n 9: (\r\n min: 46.18,\r\n max: 92.88,\r\n ls: '-3%'\r\n ),\r\n\r\n 10: (\r\n min: 51.96,\r\n max: 111.45,\r\n ls: '-3%'\r\n )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n --fluid-min-width: #{$f-min-width};\r\n --fluid-max-width: #{$f-max-width};\r\n\r\n --fluid-screen: 100vw;\r\n --fluid-bp: calc(\r\n (var(--fluid-screen) - var(--fluid-min-width) / 16 1rem) /\r\n (var(--fluid-max-width) - var(--fluid-min-width))\r\n );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n :root {\r\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n }\r\n}\r\n\r\n:root {\r\n @each $name, $step in $steps {\r\n --f-#{$name}-min: #{map-get($step, min)};\r\n --f-#{$name}-max: #{map-get($step, max)};\r\n --step-#{$name}: calc(\r\n ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) \r\n var(--fluid-bp)\r\n );\r\n }\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 400;\r\n font-display: swap;\r\n src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 600;\r\n font-display: swap;\r\n src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 700;\r\n font-display: swap;\r\n src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n \"3xs\": 0.25,\r\n \"2xs\": 0.5,\r\n \"xs\": 0.75,\r\n \"s\": 1,\r\n \"m\": 1.5,\r\n \"l\": 2,\r\n \"xl\": 3,\r\n \"2xl\": 4,\r\n \"3xl\": 6,\r\n \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n --max-screen: #{ math.div($f-max-width, 16) };\r\n --fc-screen: 100vw;\r\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n --fc-base: #{$space-base};\r\n\r\n @each $space, $_ in $spaces {\r\n --fc-#{$space}: #{space-size($space)};\r\n --space-#{$space}: calc(var(--fc-#{$space}) / 16 1rem);\r\n }\r\n\r\n $min: \"\";\r\n @each $max, $_ in $spaces {\r\n @if ($min) {\r\n @include space-between($min, $max);\r\n }\r\n $min: $max;\r\n }\r\n\r\n @include space-between(s, l);\r\n @include space-between(s, m);\r\n @include space-between(xs, l);\r\n @include space-between(m, xl);\r\n @include space-between(l, 2xl);\r\n @include space-between(s, xl);\r\n @include space-between(l, 3xl);\r\n @include space-between(xl, 3xl);\r\n @include space-between(l, 4xl);\r\n @include space-between(3xs, m);\r\n\r\n --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n :root {\r\n --fc-screen: calc(var(--max-screen) * 1rem);\r\n }\r\n}\r\n","@import './breakout.scss';\r\n@import './cutoff.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n font-size: 1px * map-get(map-get($steps, $step), max);\r\n font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n & > * + * {\r\n @include margin-top($size);\r\n }\r\n}\r\n\r\n@function space-size($key: s) {\r\n @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n --space-#{$min}-#{$max}: calc(\r\n ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) \r\n var(--fluid-bp)\r\n );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n @if (type-of($value) == number) {\r\n @return $value;\r\n } @else if (type-of($value) == null) {\r\n @return 0;\r\n } @else if (type-of($value) == string) {\r\n $split: get-min-max($value);\r\n $min: nth($split, 1);\r\n\r\n @if ($value == 'gutter') {\r\n @if ($safe) {\r\n @return space-unit(s);\r\n } @else {\r\n @return var(--gutter); \r\n }\r\n }\r\n\r\n @if ($value == 'auto') {\r\n @return auto;\r\n }\r\n \r\n @if ($safe) {\r\n @return space-unit($min);\r\n } @else {\r\n @return var(--space-#{$value}); \r\n }\r\n }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n @if ($arg4 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n } @else if ($arg3 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n } @else if ($arg2 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2);\r\n } @else if ($arg1 != '') {\r\n #{$property}: safe-space($arg1, true);\r\n #{$property}: safe-space($arg1);\r\n }\r\n}\r\n\r\n@function get-min-max($value) {\r\n $split: str-split($value, '-');\r\n $min: nth($split, 1);\r\n\r\n @if (length($split) == 1) {\r\n @return ($min, null);\r\n } @else {\r\n @return ($min, nth($split, 2))\r\n }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n // empty array/list\r\n $split-arr: ();\r\n // first index of separator in string\r\n $index : str-index($string, $separator);\r\n // loop through string\r\n @while $index != null {\r\n // get the substring from the first character to the separator\r\n $item: str-slice($string, 1, $index - 1);\r\n // push item to array\r\n $split-arr: append($split-arr, $item);\r\n // remove item and separator from string\r\n $string: str-slice($string, $index + 1);\r\n // find new index of separator\r\n $index : str-index($string, $separator);\r\n }\r\n // add the remaining string to list (the last item)\r\n $split-arr: append($split-arr, $string);\r\n\r\n @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n @media only screen and (max-width: 28rem) {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n\r\n @media only screen and (max-width: 70rem) {\r\n [lang='de-DE'] & {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n }\r\n}","@keyframes spin {\r\n from { transform: rotate(0deg) }\r\n to { transform: rotate(360deg) }\r\n}","\r\n,\r\n:before,\r\n:after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n min-height: 100vh;\r\n margin: 0;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n height: auto;\r\n border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n display: block;\r\n}\r\n\r\niframe {\r\n border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n font: weight() #{1.125rem}/lh() $font-stack;\r\n @include step();\r\n color: color('grey');\r\n}\r\n\r\nbody {\r\n @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n margin: 0\r\n}\r\n\r\nul, ol, p {\r\n line-height: lh();\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n cursor: pointer;\r\n color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n}\r\n\r\nlabel {\r\n cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n * {\r\n -webkit-animation: none!important;\r\n animation: none!important;\r\n transition: none!important;\r\n scroll-behavior: auto!important;\r\n }\r\n}\r\n","body {\r\n -moz-osx-font-smoothing: grayscale;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:focus {\r\n outline: 2px solid color('petrol');\r\n}\r\n\r\n.body--blog {\r\n .c-h--page-title,\r\n .c-hero__content,\r\n .o-prose--blog,\r\n .u-lede,\r\n .c-event-card,\r\n .c-h--step-4,\r\n .c-h--step-3,\r\n .c-h--step-2,\r\n .c-h--step-1,\r\n .c-card__title {\r\n -moz-font-feature-settings: \"salt\";\r\n -webkit-font-feature-settings: \"salt\";\r\n font-feature-settings: \"salt\";\r\n }\r\n}\r\n",".o-prose {\r\n color: inherit;\r\n\r\n h2 {\r\n @extend .c-h,.c-h--step-3;\r\n }\r\n\r\n h3 {\r\n @extend .c-h,.c-h--step-2;\r\n }\r\n\r\n h4 {\r\n @extend .c-h,.c-h--step-1;\r\n }\r\n\r\n p,\r\n ul,\r\n ol {\r\n line-height: lh('prose');\r\n }\r\n\r\n p a:not(.c-button),\r\n li a:not(.c-button),\r\n td a:not(.c-button) {\r\n color: color('utility-blue');\r\n text-decoration: underline;\r\n text-underline-offset: 3px;\r\n \r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n ul li {\r\n list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside; \r\n margin-left: 1em;\r\n padding-left: 0.5rem;\r\n\r\n h3,\r\n h4 {\r\n line-height: lh('prose');\r\n font-size: 1em;\r\n color: color('green');\r\n }\r\n }\r\n\r\n ol li {\r\n list-style: decimal;\r\n padding-left: 0.375rem;\r\n margin-left: 1.125em;\r\n }\r\n\r\n ol ol li {\r\n list-style: lower-alpha;\r\n }\r\n\r\n pre {\r\n background: color('petrol', 'step-3');\r\n line-height: 1.4;\r\n overflow-x: auto;\r\n @include padding('xs');\r\n @include step(-1);\r\n }\r\n\r\n li code,\r\n p code {\r\n background: color('petrol', 'step-3');\r\n @include step(-1);\r\n padding: 0.25em;\r\n }\r\n\r\n blockquote {\r\n @extend .c-quote;\r\n }\r\n\r\n figcaption {\r\n @include step(-1);\r\n display: block;\r\n }\r\n\r\n figure > * + * {\r\n margin-top: 0.5em;\r\n }\r\n\r\n // Spacing\r\n\r\n ol,\r\n ul {\r\n ul,\r\n ol {\r\n @include margin-top('s');\r\n }\r\n\r\n li + li,\r\n li > ul,\r\n li > ol {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n ol,\r\n ul,\r\n & > pre {\r\n --flow: var(--space-s-m);\r\n\r\n &:not(:last-child) {\r\n margin-bottom: var(--flow);\r\n }\r\n }\r\n\r\n h2,\r\n h3 {\r\n --flow: var(--space-m-l);\r\n }\r\n\r\n h2 {\r\n @include margin-bottom('s-m');\r\n }\r\n\r\n figure,\r\n & > img {\r\n --flow: var(--space-l-xl);\r\n margin-bottom: var(--flow);\r\n }\r\n\r\n blockquote {\r\n --flow: var(--space-m-l);\r\n margin-bottom: var(--flow);\r\n }\r\n\r\n // Modifiers\r\n\r\n @media (min-width: 35em) {\r\n &:not(.o-prose--left-blockquote) blockquote {\r\n @include padding-left('3xl');\r\n\r\n &:before {\r\n left: var(--space-xl);\r\n }\r\n }\r\n\r\n &.o-prose--left-blockquote blockquote {\r\n @include padding-right('3xl');\r\n }\r\n }\r\n\r\n &--with-lede > p:first-of-type {\r\n @include step(1);\r\n color: color('blue');\r\n }\r\n\r\n table {\r\n @extend .c-table;\r\n }\r\n}\r\n\r\n.o-featured-image {\r\n margin-left: calc(-1 * var(--gutter));\r\n}\r\n","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n @return math.div($grid-gutter-width, $grid-width) * 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n @return math.div(\r\n (\r\n ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n ), $grid-width\r\n ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n@mixin o-grid($columns) {\r\n $width: math.div(100%, $columns);\r\n \r\n & > * {\r\n width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);\r\n @include margin-bottom(\"gutter\");\r\n \r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(#{$columns}n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n\r\n &.o-grid--s {\r\n & > * {\r\n width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);\r\n width: calc(($width - (($columns - 1) * var(--space-s) / $columns)) - 0.1px);\r\n @include margin-bottom(\"s\");\r\n \r\n & + * {\r\n @include margin-left(\"s\");\r\n }\r\n\r\n &:nth-child(#{$columns}n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.o-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: stretch;\r\n margin-bottom: calc(-1 * space-unit());\r\n margin-bottom: calc(-1 * var(--gutter));\r\n width: 100%;\r\n\r\n &--float:after {\r\n content: \" \";\r\n display: table;\r\n clear: both;\r\n }\r\n\r\n &--between {\r\n justify-content: space-between;\r\n }\r\n\r\n &--no-height-match {\r\n align-items: start;\r\n }\r\n\r\n & > * {\r\n width: 100%;\r\n }\r\n\r\n &--of-two {\r\n @media (min-width: 40em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-two-switch {\r\n justify-content: space-between;\r\n \r\n @media (min-width: 40em) {\r\n @include o-grid(2);\r\n \r\n &>:nth-child(2n + 2) {\r\n @include margin-left(0);\r\n }\r\n }\r\n }\r\n\r\n &--of-two-late {\r\n @media (min-width: 55em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-two-early {\r\n @media (min-width: 22.4em) {\r\n @include o-grid(2)\r\n }\r\n }\r\n\r\n &--of-three {\r\n @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 55em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-three-late {\r\n @media (min-width: 38em) and (max-width: 67.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 68em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-three-early {\r\n @media (min-width: 22.4em) and (max-width: 54.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 55em) {\r\n @include o-grid(3)\r\n }\r\n }\r\n\r\n &--of-four {\r\n @media (min-width: 38em) and (max-width: 59.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 60em) {\r\n @include o-grid(4)\r\n }\r\n }\r\n\r\n &--of-four-early {\r\n @media (min-width: 22.4em) and (max-width: 59.9375em) {\r\n @include o-grid(2)\r\n }\r\n\r\n @media (min-width: 60em) {\r\n @include o-grid(4)\r\n }\r\n }\r\n\r\n &--swipeable {\r\n @media (max-width: 54.9375em) {\r\n @include breakout('gutter');\r\n flex-wrap: nowrap;\r\n overflow-x: scroll;\r\n scroll-snap-type: x mandatory;\r\n scroll-padding: var(--gutter);\r\n -webkit-overflow-scrolling: touch;\r\n\r\n & > * {\r\n flex: 0 0 auto;\r\n max-width: 23em;\r\n width: calc(85vw - var(--gutter)2.333); // !important\r\n scroll-snap-align: start;\r\n scroll-snap-stop: always;\r\n }\r\n\r\n & > + * {\r\n margin-left: var(--gutter) !important;\r\n }\r\n }\r\n }\r\n\r\n // Prevents overlap on floated sticky elements when stacked\r\n @media (max-width: 55em) {\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 1),\r\n &--float[class=\"switch\"] > :nth-child(2n + 2),\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 2),\r\n &--float[class=\"switch\"] > :nth-child(2n + 1) {\r\n position: static;\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--4\\/7 > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 2) {\r\n width: grid-column(7)\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--8\\/4 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/4-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(8);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--4\\/8 > :nth-child(2n + 1),\r\n &--4\\/7 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 1) {\r\n width: grid-column(4);\r\n }\r\n\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n margin-left: grid-gutter();\r\n margin-right: 0;\r\n }\r\n\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n max-width: grid-column-px(8);\r\n }\r\n\r\n &[class=\"switch\"] > :nth-child(2n + 1) {\r\n order: 1;\r\n }\r\n\r\n &--layout {\r\n margin-bottom: 0;\r\n\r\n & > :nth-last-child(1),\r\n & > :nth-last-child(2) {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &--push {\r\n justify-content: space-between;\r\n }\r\n\r\n &--pull {\r\n justify-content: flex-start;\r\n }\r\n\r\n &--float {\r\n display: block;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 1),\r\n &--float[class=\"switch\"] > :nth-child(2n + 2) {\r\n float: left;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 2),\r\n &--float[class=\"switch\"] > :nth-child(2n + 1) {\r\n float: right;\r\n }\r\n }\r\n\r\n @media (min-width: 70em) {\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(9);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2) {\r\n width: grid-column(3);\r\n }\r\n }\r\n}\r\n",".c-accordion {\r\n &__item {\r\n @include padding('xs',0);\r\n \r\n & + & {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n }\r\n }\r\n \r\n &__title {\r\n @include step(1);\r\n @include padding('xs',0);\r\n cursor: pointer;\r\n font-weight: weight('bold');\r\n position: relative;\r\n\r\n &:before {\r\n background-image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 1V17M1 9H17\" stroke=\"%23252525\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n content: \"\";\r\n display: block;\r\n height: 1em;\r\n left: 0;\r\n position: absolute;\r\n width: 1em;\r\n }\r\n\r\n .c-accordion__item--open &:before {\r\n background-image: url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1H9\" stroke=\"%23252525\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');\r\n transform: scaleX(1.75);\r\n }\r\n }\r\n\r\n &__content {\r\n margin-left: 0;\r\n @include padding-bottom('xs');\r\n display: none;\r\n\r\n .c-accordion__item--open & {\r\n display: block;\r\n }\r\n }\r\n\r\n &__title,\r\n &__content {\r\n @include padding-left('l-xl');\r\n }\r\n}",".c-alert {\r\n --alert-border: #{color('utility-blue')};\r\n border-left: 4px solid color('utility-blue');\r\n border-left-color: var(--alert-border);\r\n\r\n background: color('utility-blue', 'step-3');\r\n @include padding('s', 's', 's', 'xl');\r\n position: relative;\r\n\r\n &.mp p {\r\n line-height: lh('prose');\r\n }\r\n\r\n & > + * {\r\n margin-top: 1em;\r\n }\r\n\r\n a {\r\n color: var(--alert-border);\r\n text-decoration: underline;\r\n\r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n & .c-icon {\r\n position: absolute;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n margin-top: 0;\r\n font-size: 1.5rem;\r\n color: black;\r\n color: var(--alert-border);\r\n }\r\n\r\n pre {\r\n background: transparent;\r\n padding: 0;\r\n max-width: 100%;\r\n overflow-x: auto;\r\n @include step(-1);\r\n }\r\n\r\n &--multiline {\r\n @include padding('s', 's', 's', 0);\r\n\r\n &> :not(.c-icon) {\r\n @include padding-left('s');\r\n\r\n &:first-child {\r\n color: var(--alert-border);\r\n @include padding-left('xl');\r\n font-size: inherit;\r\n line-height: lh('prose');\r\n }\r\n }\r\n }\r\n\r\n &--warning {\r\n background: color('utility-orange', 'step-3');\r\n --alert-border: #{color('utility-orange')};\r\n }\r\n \r\n &--success {\r\n background: color('green', 'step-3');\r\n --alert-border: #{color('green')};\r\n }\r\n\r\n &--error {\r\n background: color('red', 'step-3');\r\n --alert-border: #{color('red')};\r\n }\r\n}",".c-breadcrumb {\r\n &__list {\r\n @include padding-bottom(\"s-m\");\r\n display: flex;\r\n overflow-x: auto;\r\n }\r\n\r\n &__item {\r\n font-size: var(--step--2);\r\n display: inline-flex;\r\n align-items: center;\r\n white-space: nowrap;\r\n\r\n .c-icon {\r\n @include margin-right(\"3xs\");\r\n @include margin-left(\"3xs\");\r\n color: color('grey', 'step-1');\r\n transform: rotate(270deg);\r\n }\r\n }\r\n\r\n &__link {\r\n color: color('utility-blue', 'step-1');\r\n text-decoration: underline;\r\n \r\n &:hover {\r\n color: color('utility-blue', 'step-1');\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &__current {\r\n color: color('grey', 'step-1');\r\n }\r\n\r\n // color: color('utility-blue');\r\n\r\n // &__wrap {\r\n // position: relative;\r\n\r\n // &:after {\r\n // content: '';\r\n // background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));\r\n // position: absolute;\r\n // z-index: 1;\r\n // height: 100%;\r\n // right: 0;\r\n // top: 0;\r\n // @include space('width', 'l');\r\n\r\n // @media (min-width: $wrapper) {\r\n // display: none;\r\n // }\r\n // }\r\n // }\r\n\r\n // &__list {\r\n // @include padding-bottom('m-l');\r\n // @include margin-bottom('m-l');\r\n // border-bottom: 1px solid color('petrol', 'step-2');\r\n // white-space: nowrap;\r\n // overflow-x: auto;\r\n // display: flex;\r\n\r\n // & > + * {\r\n // @include margin-left('m-l');\r\n // }\r\n // }\r\n}\r\n",".c-button--reset {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n font-family: $font-stack;\r\n}\r\n\r\n%c-button {\r\n // Reset\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n font-family: $font-stack;\r\n text-align: center;\r\n\r\n // Styles\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 6px;\r\n background-color: color(\"green\");\r\n font-weight: weight(\"bold\");\r\n font-size: 1.125rem;\r\n padding: 0.777em 1.5em;\r\n transition: 300ms background-color, 300ms color, 300ms box-shadow;\r\n letter-spacing: ls(\"base\");\r\n color: color(\"white\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"green\", \"step--1\");\r\n text-decoration: none;\r\n color: color(\"white\");\r\n }\r\n\r\n &[disabled],\r\n [disabled] & {\r\n filter: saturate( 0.4 );\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n}\r\n\r\n.mp.c-button,\r\n.c-button {\r\n @extend %c-button;\r\n\r\n &--wide {\r\n width: 100%;\r\n }\r\n\r\n &--tight {\r\n padding-right: 0.75em;\r\n padding-left: 0.75em;\r\n }\r\n\r\n &--inline {\r\n display: inline-flex;\r\n margin-right: 0.5em;\r\n margin-bottom: 0.5em;\r\n vertical-align: top;\r\n }\r\n\r\n &--petrol {\r\n background-color: color(\"petrol\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"petrol\", \"step-1\");\r\n }\r\n }\r\n\r\n &--blue {\r\n background-color: color(\"blue\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--red {\r\n background-color: color(\"red\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"red\", \"step--1\");\r\n }\r\n }\r\n\r\n &--white {\r\n background-color: color(\"white\");\r\n font-weight: weight();\r\n color: color(\"utility-blue\");\r\n padding: 0.777em 1em;\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"petrol\", \"step-3\");\r\n color: color(\"utility-blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--utility-blue {\r\n background-color: color(\"utility-blue\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"utility-blue\", \"step--1\");\r\n }\r\n }\r\n\r\n &--outline-white {\r\n background: transparent;\r\n color: color(\"white\");\r\n box-shadow: inset 0 0 0 1px color(\"white\");\r\n\r\n &:focus,\r\n &:hover {\r\n background-color: color(\"white\");\r\n color: color(\"petrol\");\r\n }\r\n }\r\n\r\n &--outline-green {\r\n background: transparent;\r\n color: color(\"green\");\r\n box-shadow: inset 0 0 0 1px color(\"green\");\r\n\r\n &:focus,\r\n &:hover {\r\n box-shadow: inset 0 0 0 1px color(\"green\", \"step--1\");\r\n background-color: color(\"green\", \"step--1\");\r\n color: color(\"white\");\r\n }\r\n }\r\n\r\n &--small {\r\n @include step(-1);\r\n padding: 0.5em 1em;\r\n }\r\n\r\n &--loading {\r\n color: transparent;\r\n transition: color .3s ease;\r\n\r\n &:after {\r\n content: '⌛';\r\n color: color(\"white\");\r\n position: absolute;\r\n }\r\n\r\n @media (prefers-reduced-motion:no-preference) {\r\n &:after {\r\n content: '';\r\n animation: spin 1.2s ease infinite;\r\n border-radius: 50%;\r\n border: 3px solid #3336;\r\n border-top-color: color(\"white\");\r\n display: block;\r\n height: 1em;\r\n width: 1em;\r\n }\r\n }\r\n }\r\n}","$angle: 225deg;\r\n\r\n.c-campaign {\r\n @include cutoff;\r\n \r\n position: relative;\r\n max-width: calc(#{$wrapper}) !important;\r\n padding: 0 !important;\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n }\r\n \r\n &__content {\r\n background: color('grey');\r\n background: linear-gradient($angle, color('grey', 'step--2'), color('grey'));\r\n color: color('white');\r\n width: 100%;\r\n @include padding('m-l');\r\n align-self: center;\r\n }\r\n\r\n &__video {\r\n z-index: 1;\r\n align-self: center;\r\n }\r\n\r\n &__image {\r\n z-index: 0;\r\n\r\n img {\r\n width: 100%;\r\n }\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &--petrol {\r\n \r\n .c-campaign__content {\r\n background: color('petrol', 'step-2');\r\n background: linear-gradient($angle, color('petrol', 'step-2'), color('petrol', 'step-3'));\r\n color: color('grey');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('petrol');\r\n }\r\n }\r\n\r\n &--blue {\r\n \r\n .c-campaign__content {\r\n background: color('blue', 'step-3');\r\n background: linear-gradient($angle, color('blue', 'step-2'), color('blue', 'step-3'));\r\n color: color('grey');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('blue', 'step--1');\r\n }\r\n }\r\n\r\n &--orange {\r\n \r\n .c-campaign__content {\r\n background: color('utility-orange', 'step-2');\r\n background: linear-gradient($angle, color('utility-orange', 'step-2'), color('utility-orange', 'step-3'));\r\n color: color('grey', 'step--1');\r\n }\r\n\r\n &.mp .u-link {\r\n color: color('utility-orange', 'step--1');\r\n }\r\n }\r\n\r\n @media (min-width:35em) {\r\n display: flex;\r\n\r\n &--switch &__content {\r\n order: -1;\r\n }\r\n\r\n &__video,\r\n &__image {\r\n position: relative;\r\n width: 50%;\r\n\r\n & + .c-campaign__content {\r\n width: 50%;\r\n }\r\n }\r\n\r\n &__image {\r\n img {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n z-index: 1;\r\n object-fit: cover;\r\n }\r\n }\r\n }\r\n}",".c-card {\r\n background: color(\"white\");\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n\r\n &--alt,\r\n &--event {\r\n background: color(\"petrol\", \"step-3\");\r\n\r\n &__specs {\r\n color: color(\"grey\", \"step-1\")\r\n }\r\n }\r\n\r\n &--featured {\r\n background: color(\"petrol\");\r\n color: color(\"petrol\", \"step-2\");\r\n\r\n .c-card__meta,\r\n .mp {\r\n color: inherit;\r\n }\r\n\r\n .c-button,\r\n .c-card__title {\r\n color: color(\"white\");\r\n }\r\n }\r\n\r\n &--featured &__day {\r\n @include step(5);\r\n color: color(\"white\");\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n &--featured &__month {\r\n @include step(3);\r\n color: color(\"petrol\", \"step-2\");\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n &--featured &__wrapper,\r\n &--featured &__primary {\r\n flex-grow: 1;\r\n }\r\n\r\n &--featured {\r\n .c-button {\r\n width: 100%;\r\n margin: 0;\r\n }\r\n }\r\n\r\n &--featured &__footer {\r\n @include margin-top(\"auto\");\r\n @include padding-top(\"s\");\r\n }\r\n\r\n &__wrapper,\r\n &__primary {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n &--layout-multi .c-card__wrapper,\r\n &__primary {\r\n // Required for IE\r\n flex-shrink: 0;\r\n width: 100%;\r\n }\r\n\r\n &--layout-multi {\r\n .c-card__wrapper {\r\n @include gap(\"s-l\");\r\n }\r\n \r\n &.c-card--featured.c-card--size-large.c-card--has-image {\r\n .c-card__wrapper {\r\n padding: 0;\r\n }\r\n\r\n .c-card__primary {\r\n @include padding('s-m');\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n .c-card__wrapper {\r\n flex-direction: row;\r\n }\r\n\r\n .c-card__image,\r\n .c-card__primary:nth-child(2) {\r\n width: calc(50% - 18px);\r\n }\r\n\r\n &.c-card--small,\r\n &.c-card--size-medium {\r\n .c-card__image {\r\n max-width: 152px;\r\n width: 30%;\r\n }\r\n\r\n .c-card__primary:nth-child(2) {\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n &.c-card--size-large.c-card--featured {\r\n img {\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n @media only screen and (min-width: 55em) {\r\n &:not(.c-card--switch) .c-card__primary {\r\n padding-left: 0 !important;\r\n }\r\n \r\n &.c-card--switch .c-card__primary {\r\n padding-right: 0 !important;\r\n }\r\n }\r\n }\r\n\r\n .c-card__shop-footer > :first-child {\r\n width: 30%;\r\n max-width: 152px;\r\n display: block;\r\n @include margin-right(\"l\");\r\n }\r\n }\r\n }\r\n \r\n &--layout-multi-30-70 {\r\n .c-card__image {\r\n width: calc(30% - 18px) !important;\r\n width: calc(30% - var(--space-s-m)) !important;\r\n }\r\n\r\n @media (min-width: 55em) {\r\n .c-card__primary:nth-child(2) {\r\n width: calc(70% - 18px) !important;\r\n width: calc(70% - var(--space-s-m)) !important;\r\n }\r\n }\r\n }\r\n\r\n &--layout-multi-40-60 {\r\n @media (min-width: 55em) {\r\n .c-card__image {\r\n width: calc(60% - 18px) !important;\r\n width: calc(60% - var(--space-s-m)) !important;\r\n }\r\n\r\n .c-card__primary {\r\n width: calc(40% - 18px) !important;\r\n width: calc(40% - var(--space-s-m)) !important;\r\n }\r\n }\r\n }\r\n\r\n &--switch {\r\n @media (min-width: 55em) {\r\n .c-card__wrapper {\r\n flex-direction: row-reverse;\r\n }\r\n }\r\n }\r\n\r\n &__primary {\r\n @include flow(\"s\");\r\n }\r\n\r\n &--layout-single &__primary,\r\n &--layout-multi &__wrapper {\r\n @include padding(\"s-m\");\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n &--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {\r\n @include padding-top(\"m-l\");\r\n }\r\n\r\n &__datetime {\r\n display: block;\r\n font-weight: weight(\"bold\");\r\n @include step(1);\r\n color: color(\"petrol\", \"step-1\");\r\n }\r\n\r\n &__content {\r\n @include step(-1);\r\n }\r\n\r\n &__title {\r\n @include step(2);\r\n }\r\n\r\n img {\r\n width: 100%;\r\n }\r\n\r\n &--size-small &__title,\r\n &--size-medium &__title {\r\n @include step(0);\r\n }\r\n\r\n &--size-medium .c-twi {\r\n @include step(-1);\r\n }\r\n\r\n &--bordered {\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n }\r\n\r\n &--float-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 38em) {\r\n &--float-right {\r\n @include margin-left('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n }\r\n\r\n &__tag {\r\n @include padding(\"3xs\", \"2xs\");\r\n @include step(-1);\r\n background: color(\"blue\", \"step-2\");\r\n color: color(\"petrol\");\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n &__tag + &__wrapper > &__primary {\r\n @include margin-top(\"xs\");\r\n }\r\n\r\n &__tag + &__wrapper > &__image + &__primary {\r\n @include margin-top(0);\r\n }\r\n\r\n &--no-height-match {\r\n align-self: flex-start;\r\n }\r\n\r\n &__specs {\r\n @include flow(\"xs\");\r\n\r\n dt {\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n dt,\r\n dd {\r\n padding: 0;\r\n margin: 0;\r\n display: block;\r\n }\r\n\r\n dl {\r\n @include flow(\"3xs\");\r\n }\r\n }\r\n\r\n &--inline-specs &__specs {\r\n dt,\r\n dd {\r\n display: inline;\r\n }\r\n\r\n dd:not(:last-child):after {\r\n content: \", \";\r\n }\r\n }\r\n\r\n &--2-column-specs &__specs {\r\n dl {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(min-content, max-content));\r\n @include space('gap', '3xs', '2xs');\r\n }\r\n dt, dd {\r\n margin: 0;\r\n }\r\n dt {\r\n grid-column: 1;\r\n }\r\n dd {\r\n grid-column: 2;\r\n }\r\n }\r\n\r\n .o-prose li + li {\r\n @include margin-top(\"3xs\");\r\n }\r\n\r\n &__meta {\r\n color: color(\"petrol\", \"step-1\");\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n @include step(-1);\r\n\r\n & > :not(:last-child) {\r\n position: relative;\r\n padding-right: 1.5em;\r\n\r\n &:after {\r\n content: \"\";\r\n position: absolute;\r\n height: 18px;\r\n right: 9px;\r\n width: 1px;\r\n top: 50%;\r\n background: color(\"petrol\", \"step-1\");\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n .mp {\r\n font-size: inherit;\r\n }\r\n\r\n .c-icon {\r\n font-size: 0.875em;\r\n }\r\n\r\n & + .c-card__title {\r\n @include margin-top(\"s\");\r\n }\r\n }\r\n\r\n &__corner {\r\n position: absolute;\r\n color: color(\"white\");\r\n right: 0;\r\n top: 0;\r\n @include space(\"border-width\", \"l\");\r\n border-color: color(\"green\") color(\"green\") transparent transparent;\r\n border-style: solid;\r\n width: 0;\r\n height: 0;\r\n text-align: right;\r\n font-size: 1.5rem;\r\n transition: 300ms color;\r\n z-index: 1;\r\n\r\n .c-icon {\r\n position: relative;\r\n top: -27px;\r\n }\r\n }\r\n\r\n &:hover &__corner {\r\n color: rgba(255, 255, 255, 0.75);\r\n }\r\n\r\n &__series {\r\n border-top: 1px solid color(\"petrol\", \"step-2\");\r\n @include padding(\"s\", \"m\");\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n &__shop-footer {\r\n @include padding(\"s\", \"s-m\");\r\n background-color: color(\"petrol\", \"step-3\");\r\n display: flex;\r\n\r\n &-space {\r\n @include flow(\"3xs\");\r\n\r\n & > * {\r\n display: block;\r\n }\r\n }\r\n\r\n &-form {\r\n align-items: flex-end;\r\n }\r\n\r\n input {\r\n width: 72px;\r\n }\r\n }\r\n\r\n &__small {\r\n @include step(-1);\r\n color: color(\"petrol\", \"step-1\");\r\n }\r\n\r\n &__flex {\r\n display: flex;\r\n flex-wrap: wrap;\r\n @include gap(\"s-l\");\r\n }\r\n\r\n &--event.c-card--has-image {\r\n @extend .c-card--switch;\r\n\r\n &.c-card--has-tag .c-card__tag {\r\n z-index: 1;\r\n }\r\n\r\n .c-card__wrapper {\r\n @include padding(0);\r\n\r\n .c-card__primary {\r\n @include padding(\"s-m\");\r\n }\r\n\r\n .c-card__image {\r\n position: relative;\r\n width: 100%;\r\n\r\n img {\r\n max-height: 200px;\r\n height: 100%;\r\n object-fit: cover;\r\n aspect-ratio: 16 / 9;\r\n }\r\n }\r\n }\r\n \r\n @media (min-width: 55em) {\r\n .c-card__primary {\r\n width: calc(70% - 18px);\r\n width: calc(70% - var(--space-s-m));\r\n }\r\n\r\n .c-card__image {\r\n width: calc(30% - 18px);\r\n width: calc(30% - var(--space-s-m));\r\n\r\n img {\r\n max-height: none !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--event-series {\r\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);\r\n\r\n .c-card__image img {\r\n max-height: 252px;\r\n aspect-ratio: 2/1;\r\n object-fit: cover;\r\n }\r\n\r\n .c-card__wrapper,\r\n .c-card__primary {\r\n height: 100%;\r\n }\r\n\r\n .c-card__primary {\r\n flex-shrink: 1;\r\n }\r\n\r\n .c-card__header > * + * {\r\n @include margin('s', 0, 0, 0);\r\n }\r\n\r\n .c-card__datetime {\r\n font-size: var(--step--1);\r\n font-weight: normal;\r\n }\r\n\r\n .c-card__title {\r\n font-size: var(--step-0);\r\n }\r\n\r\n .c-card__footer .u-link,\r\n .c-card__footer .u-link svg {\r\n color: color('utility-blue', 'step-1');\r\n font-size: var(--step--1);\r\n }\r\n }\r\n}\r\n\r\n.grid-view > .c-card--event.c-card--has-image .c-card__wrapper {\r\n @include gap(\"s\");\r\n flex-direction: column;\r\n\r\n .c-card__primary {\r\n width: 100%;\r\n }\r\n\r\n .c-card__image {\r\n width: 100%;\r\n }\r\n}\r\n\r\n// IE11 fix\r\n// This forces IE11 to use display:block instead of flex for single-column cards\r\n_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }",".c-industry-card {\r\n color: color('utility-blue');\r\n\r\n &__link {\r\n display: block;\r\n }\r\n\r\n &:hover .c-h--reset {\r\n text-decoration: underline;\r\n }\r\n\r\n img {\r\n width: 100%;\r\n }\r\n}\r\n",".c-product-comparison-card {\r\n @extend .u-flow--2xs;\r\n background: color('white');\r\n display: flex;\r\n flex-flow: column;\r\n flex-grow: 1;\r\n border: 1px solid color('petrol', 'step-2');\r\n \r\n & > * + * {\r\n @include margin-top('2xs');\r\n }\r\n\r\n &__body {\r\n @include padding('s-m');\r\n display: flex;\r\n flex-flow: column;\r\n flex-grow: 1;\r\n \r\n & > * + * {\r\n @include margin-top('xs');\r\n }\r\n }\r\n\r\n &__heading {\r\n @extend .c-h;\r\n @extend .c-h--step-1;\r\n }\r\n\r\n &__features-list {\r\n @include margin-top('2xs');\r\n list-style: none;\r\n\r\n &-heading {\r\n @include margin-top('s');\r\n font-weight: weight(\"bold\");\r\n }\r\n\r\n & > * + * {\r\n @include margin-top('3xs');\r\n }\r\n }\r\n\r\n &__feature {\r\n &--tick {\r\n svg {\r\n color: color('green');\r\n }\r\n }\r\n\r\n &--cross {\r\n color: color('grey', 'step-2');\r\n }\r\n }\r\n\r\n &__footer {\r\n @include margin-top('auto');\r\n @include padding-top('s');\r\n display: flex;\r\n flex-flow: row;\r\n flex-wrap: wrap;\r\n gap: var(--space-2xs);\r\n \r\n & > * {\r\n flex-grow: 1;\r\n }\r\n }\r\n\r\n &__image {\r\n height: 10em;\r\n order: -1;\r\n aspect-ratio: 16/9;\r\n\r\n img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: contain;\r\n }\r\n }\r\n}\r\n",".c-comparison-table__desktop {\r\n overflow: auto;\r\n width: 100%;\r\n\r\n .c-comparison-table {\r\n width: calc(100% - 1px);\r\n\r\n @media (min-width: 60em) {\r\n tbody > tr > :first-child {\r\n min-width: 300px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.c-comparison-table__mobile {\r\n display: none;\r\n\r\n & > * + * {\r\n @include margin-top('m-l');\r\n }\r\n\r\n .c-comparison-table {\r\n width: 100%;\r\n table-layout: fixed;\r\n\r\n &__product {\r\n img {\r\n @include margin(0);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.c-comparison-table {\r\n @include step(-1);\r\n border-collapse: collapse;\r\n\r\n thead {\r\n th {\r\n @include padding(0, '2xs');\r\n border: 0;\r\n text-align: center;\r\n vertical-align: top;\r\n }\r\n }\r\n\r\n &__product {\r\n @extend .u-flow--2xs;\r\n\r\n img {\r\n @include space('max-height', '3xl');\r\n @include margin(0, 'auto');\r\n object-fit: contain;\r\n mix-blend-mode: multiply;\r\n }\r\n\r\n p {\r\n font-weight: 400;\r\n }\r\n }\r\n \r\n &__buttons {\r\n @include margin(0, 'auto');\r\n @include padding-bottom('xs');\r\n margin-top: 1.25rem !important;\r\n display: inline-flex;\r\n flex-direction: column;\r\n\r\n & * + * {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n &__title { \r\n th {\r\n @include padding-top('xs');\r\n text-align: left;\r\n \r\n span {\r\n @include padding('2xs');\r\n background-color: color('grey');\r\n color: color('white'); \r\n max-width: 20em;\r\n width: 100%;\r\n display: inline-block;\r\n position: relative;\r\n text-align: center;\r\n font-weight: 600;\r\n\r\n &::after {\r\n @include space('border-width', 'xs', 0, 0, 'xs');\r\n content: \"\";\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n border-color: color('grey', 'step-3') transparent transparent transparent;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n tbody {\r\n tr {\r\n &:first-child th {\r\n @include padding(0);\r\n vertical-align: bottom;\r\n }\r\n \r\n &:not(.c-comparison-table__title) {\r\n height: 48px;\r\n }\r\n\r\n td:first-child {\r\n text-align: left;\r\n font-weight: 600;\r\n }\r\n\r\n td {\r\n @include padding('2xs');\r\n background-color: color('white');\r\n border: 2px solid color('grey', 'step-3');\r\n border-right: 0;\r\n border-left: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .c-icon--tick {\r\n color: color('green');\r\n }\r\n \r\n .c-icon--cross {\r\n color: color('grey', 'step-2');\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &__mobile {\r\n display: block;\r\n }\r\n\r\n &__desktop {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 640px) {\r\n .c-comparison-table thead th:nth-last-child(1):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {\r\n width: 85%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(2):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {\r\n width: 42.5%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(3):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {\r\n width: 28.33333%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(4):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {\r\n width: 21.25%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(5):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {\r\n width: 17%;\r\n }\r\n\r\n .c-comparison-table thead th:nth-last-child(6):nth-child(2),\r\n .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {\r\n width: 14.16667%;\r\n }\r\n}\r\n",".c-embed {\r\n position: relative;\r\n\r\n &__wrapper {\r\n padding-bottom: 56.625%;\r\n position: relative;\r\n height: 0;\r\n\r\n & > * {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n }\r\n }\r\n}",".c-featured-article-card {\r\n position: relative;\r\n background: color('petrol', 'step-3');\r\n\r\n &__content {\r\n @include padding('s-l');\r\n }\r\n\r\n .c-post-meta {\r\n @include margin('s', 0);\r\n }\r\n\r\n @media (min-width: 45em) {\r\n display: flex;\r\n\r\n &__content {\r\n flex-basis: 50%;\r\n }\r\n\r\n &__image {\r\n position: relative;\r\n flex-basis: 50%;\r\n\r\n img {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n object-fit: cover;\r\n }\r\n }\r\n }\r\n}\r\n",".c-features {\r\n max-width: $wrapper;\r\n @include step(-1);\r\n\r\n &__wrapper {\r\n overflow: auto;\r\n width: 100%;\r\n }\r\n \r\n &__wrapper .c-table {\r\n width: 100%;\r\n table-layout: fixed;\r\n\r\n @media (min-width: 60em) {\r\n min-width: $wrapper;\r\n }\r\n }\r\n\r\n &__title {\r\n @include step();\r\n }\r\n\r\n &__product {\r\n padding-bottom: 0 !important;\r\n }\r\n\r\n &__introduction td {\r\n color: color('green');\r\n font-weight: weight('bold');\r\n @include padding-top('2xs');\r\n }\r\n\r\n &__label-text td {\r\n @include flow('3xs');\r\n\r\n span {\r\n display: block;\r\n }\r\n }\r\n\r\n &__checklist-title th {\r\n color: color('grey') !important;\r\n background: transparent !important;\r\n padding-bottom: 0 !important;\r\n }\r\n\r\n &__checklist {\r\n td {\r\n padding-top: var(--space-3xs) !important;\r\n padding-bottom: 0 !important;\r\n vertical-align: middle;\r\n line-height: 20px;\r\n\r\n svg {\r\n height: 16px;\r\n width: 16px;\r\n vertical-align: middle;\r\n display: inline-block;\r\n margin-bottom: 2px;\r\n }\r\n }\r\n\r\n &--last {\r\n td {\r\n padding-bottom: var(--space-s) !important;\r\n }\r\n }\r\n }\r\n\r\n &__mobile {\r\n display: none;\r\n\r\n & > * + * {\r\n @include margin-top('m-l');\r\n }\r\n\r\n .c-table {\r\n table-layout: fixed;\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &__mobile {\r\n display: block;\r\n }\r\n\r\n &__wrapper {\r\n display: none;\r\n }\r\n }\r\n\r\n thead img {\r\n @include space('max-height', '3xl');\r\n object-fit: contain;\r\n }\r\n}\r\n",".c-filter-search {\r\n background: color('blue', 'step-2');\r\n @include padding('m-l');\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n @include gap('s');\r\n\r\n & > * {\r\n flex-grow: 1;\r\n }\r\n \r\n &__fields {\r\n background-color: color('white');\r\n display: flex;\r\n max-width: 792px;\r\n flex-grow: 8;\r\n\r\n fieldset {\r\n border: 0;\r\n font-size: 0;\r\n }\r\n\r\n .c-icon {\r\n font-size: 1.375rem;\r\n }\r\n\r\n @media only screen and (min-width: 30em) {\r\n min-width: 360px;\r\n }\r\n }\r\n}\r\n",".c-footer {\r\n background: color('petrol', 'step--1');\r\n color: color('white');\r\n @include step(-1);\r\n margin-top: auto;\r\n\r\n a:hover {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &__primary {\r\n @include padding-bottom(s-m);\r\n @include padding-top(s-l);\r\n }\r\n\r\n &.mp &__h-links,\r\n &.mp &__sections,\r\n &.mp &__sections ul,\r\n &.mp &__sections h4 {\r\n line-height: lh('prose');\r\n }\r\n\r\n &__sections {\r\n @extend .o-grid, .o-grid--of-four;\r\n @include margin-bottom(0);\r\n\r\n & > li {\r\n @include margin-bottom('gutter');\r\n }\r\n\r\n ul li {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n\r\n &__subtitle {\r\n @include padding-bottom('s');\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n width: 15px;\r\n height: 1px;\r\n background: color('petrol', 'step-1');\r\n position: absolute;\r\n left: 0;\r\n bottom: 4px;\r\n }\r\n }\r\n\r\n &__identity {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n &__logo {\r\n display: block;\r\n max-width: 216px;\r\n width: 60%;\r\n\r\n img {\r\n @include margin-right('gutter');\r\n filter: saturate(0) brightness(10);\r\n }\r\n }\r\n\r\n &__social {\r\n display: flex;\r\n @include margin-top('2xs');\r\n\r\n li + li {\r\n @include margin-left('s-m');\r\n }\r\n\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n &__secondary {\r\n background: color('petrol', 'step--2');\r\n @include padding('xs', 0);\r\n\r\n span a {\r\n color: color('blue', 'step-1');\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .o-prose li a {\r\n color: color('blue', 'step-1');\r\n }\r\n\r\n &__h-links {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n @media (min-width: 43em) {\r\n &__secondary .u-wrap {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n &__h-links {\r\n display: flex;\r\n @include margin(0.5rem, 's-m', 0.5rem, 0);\r\n \r\n li + li {\r\n @include margin-left('s');\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 1410px) {\r\n &__secondary {\r\n clip-path: polygon(0% 100%, 68px 0%, 100% 0%, 100% 100%, 68px 100%);\r\n }\r\n }\r\n}\r\n\r\n// Temporary fix until RichTextRegion is fixed\r\n.rich-text-region:has( + .c-footer ) {\r\n @include margin-bottom('l-xl');\r\n}",".c-gallery {\r\n max-height: 95vh;\r\n\r\n img {\r\n cursor: pointer;\r\n }\r\n\r\n &__main {\r\n position: relative;\r\n\r\n & > * {\r\n width: 100%;\r\n\r\n img {\r\n aspect-ratio: 16 / 9;\r\n display: block;\r\n margin: 0 auto;\r\n max-height: calc(95vh - 90px);\r\n object-fit: contain;\r\n }\r\n \r\n &:not(.active) {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &__thumbnails {\r\n @include padding-bottom('s');\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 2%;\r\n gap: max(8px, 2%);\r\n \r\n & > * {\r\n background: color('grey', 'step-3');\r\n max-width: 10.75%;\r\n max-width: max(var(--space-xl), 10.75%);\r\n aspect-ratio: 16 / 9;\r\n\r\n img {\r\n height: 100%;\r\n opacity: 0.8;\r\n object-fit: cover;\r\n width: 100%;\r\n }\r\n\r\n &.active img {\r\n opacity: 0.25;\r\n }\r\n }\r\n }\r\n}",".c-header {\r\n background-color: color('white');\r\n\r\n &__wrap {\r\n @include padding-top('gutter');\r\n position: relative;\r\n }\r\n\r\n &__logo {\r\n position: relative;\r\n z-index: 50;\r\n display: block;\r\n max-width: 216px;\r\n width: 60%;\r\n\r\n img {\r\n width: 100%;\r\n }\r\n }\r\n\r\n &__search {\r\n position: relative;\r\n\r\n button:hover,\r\n button:focus {\r\n background-color: color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n @media (min-width: 500px) {\r\n &__corporate ul {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n &__wrap {\r\n @include padding-bottom('gutter');\r\n }\r\n\r\n &__primary {\r\n flex-direction: column;\r\n align-items: stretch;\r\n background: color('petrol');\r\n color: color('white');\r\n position: fixed;\r\n @include padding('s-m');\r\n z-index: 100;\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n padding-top: 80px;\r\n padding-top: calc(60px + var(--space-s-m));\r\n\r\n opacity: 0;\r\n visibility: hidden;\r\n\r\n &:target {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: 300ms opacity, 300ms visibility;\r\n }\r\n\r\n .c-navicon i {\r\n background: color('white');\r\n }\r\n }\r\n\r\n &__corporate {\r\n order: 1;\r\n @include margin('s', 0);\r\n @include step(-2);\r\n font-weight: weight('semi');\r\n\r\n ul {\r\n align-items: center;\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-left:-6px;\r\n margin-right:-6px;\r\n }\r\n\r\n li {\r\n @include margin('xs-s', '3xs-m');\r\n }\r\n\r\n .c-input--select {\r\n width: auto;\r\n color: inherit;\r\n background-color: transparent;\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%23ffffff\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n background-position: center right .4em;\r\n @include padding(0, 'm', '3xs', 0);\r\n display: inline-block;\r\n border: none;\r\n border-bottom: 1px solid #3D7B87;\r\n margin-bottom: -4.5px;\r\n font-size: inherit;\r\n\r\n option {\r\n color: color('grey');\r\n }\r\n }\r\n }\r\n\r\n &__search {\r\n order: 2;\r\n color: color('grey');\r\n }\r\n\r\n &__site {\r\n order: -1;\r\n flex: 1;\r\n @include step(1);\r\n\r\n li + li {\r\n @include margin-top('s');\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 768px) {\r\n overflow: hidden;\r\n \r\n .c-navicon {\r\n display: none;\r\n }\r\n\r\n &__primary {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n margin-top: -71px;\r\n }\r\n\r\n &__search {\r\n margin-bottom: 8px;\r\n margin-bottom: calc(var(--gutter) - 10px);\r\n width: 288px;\r\n }\r\n\r\n &__corporate {\r\n color: color('petrol');\r\n @include step(-1);\r\n margin-bottom: 8px;\r\n margin-bottom: calc(var(--space-xs) + 3px);\r\n\r\n a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n ul {\r\n display: flex;\r\n }\r\n\r\n li + li {\r\n @include margin-left('s');\r\n }\r\n\r\n .c-input--select {\r\n width: auto;\r\n color: inherit;\r\n background-color: transparent;\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%2300768d\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n @include padding(0, 'l', 0, 0);\r\n display: inline-block;\r\n border: none;\r\n @include step(-1);\r\n }\r\n }\r\n\r\n &__site {\r\n color: color('white');\r\n font-weight: weight('semi');\r\n position: relative;\r\n z-index: 1;\r\n padding: 14px 0;\r\n padding: calc(var(--space-xs) + 2px) 0;\r\n @include step(-1);\r\n align-self: flex-start;\r\n width: 100%; \r\n \r\n &:after {\r\n background: linear-gradient(270deg, \r\n color('green') -12%, \r\n color('blue') 11%, \r\n color('petrol') 43%, \r\n color('petrol') 70%, \r\n color('petrol', 'step--1') 100%);\r\n content: '';\r\n position: absolute;\r\n width: 100vw;\r\n height: 100%;\r\n left: 50%;\r\n top: 0;\r\n transform: translateX(-50%);\r\n z-index: -2;\r\n\r\n // Hack for IE11\r\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { \r\n background: linear-gradient(270deg, \r\n color('green') -12%, \r\n color('blue') 11%, \r\n color('petrol') 43%, \r\n color('petrol', 'step--1') 100%);\r\n }\r\n }\r\n\r\n ul {\r\n display: flex;\r\n }\r\n\r\n li + li {\r\n @include margin-left('s-m');\r\n }\r\n\r\n &--with-home > ul > li:first-child {\r\n border-right: 1px solid rgba(255, 255, 255, 0.25);\r\n @include padding-right('s');\r\n }\r\n\r\n a {\r\n @include padding('xs', 0);\r\n display: block;\r\n\r\n &:hover,\r\n &:focus {\r\n opacity: 0.75;\r\n }\r\n }\r\n }\r\n\r\n &__site li + &__push {\r\n margin-left: auto;\r\n }\r\n }\r\n\r\n @media (min-width: 1500px) {\r\n &__site:after {\r\n clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);\r\n }\r\n }\r\n}\r\n\r\n.c-navicon {\r\n position: absolute;\r\n @include space('right', 's-m');\r\n @include space('top', 's-m');\r\n transform: translateX(25%);\r\n height: 60px;\r\n width: 60px;\r\n\r\n i {\r\n position: absolute;\r\n transform: translate3d(-50%, -50%, 0);\r\n background: color('blue', 'step--1');\r\n border-radius: 2px;\r\n height: 2px;\r\n width: 22px;\r\n left: 50%;\r\n top: 50%;\r\n\r\n &:nth-child(1) {\r\n transform: translate3d(-50%, -50%, 0) translateY(-7px);\r\n }\r\n\r\n &:nth-child(3) {\r\n transform: translate3d(-50%, -50%, 0) translateY(7px);\r\n }\r\n }\r\n}\r\n",":root {\r\n --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );\r\n --gutter-width: calc( (100vw - var(--body-width)) / 2 );\r\n --text-width: min(100vw, 51.75rem);\r\n --hero-gap: calc( var(--body-width) - var(--text-width));\r\n --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) .8 );\r\n}\r\n\r\n.c-hero {\r\n background-color: color('blue', 'step-2');\r\n background: linear-gradient(to top right, color('petrol', 'step-3'), color('blue', 'step-2'));\r\n color: color('petrol');\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n\r\n &.mp .u-link {\r\n color: color('utility-blue');\r\n }\r\n \r\n .u-wrap {\r\n @include padding-top('m-xl');\r\n @include padding-bottom('xl-3xl');\r\n position: relative;\r\n z-index: 2;\r\n\r\n &:before {\r\n content: '';\r\n box-shadow: 1px 1px color('white');\r\n @include space('height', 'gutter');\r\n width: 100vw;\r\n background: color('white');\r\n position: absolute;\r\n bottom: 0;\r\n @include space('right', 'gutter');\r\n z-index: 2;\r\n }\r\n\r\n &:after {\r\n content: '';\r\n box-shadow: -1px 0 color('white');\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n @include space('border-width', 'gutter', 0, 0, 'gutter');\r\n border-color: transparent transparent transparent color('white');\r\n bottom: 0;\r\n right: 0;\r\n }\r\n }\r\n\r\n &__content {\r\n position: relative;\r\n z-index: 5;\r\n max-width: 828px;\r\n\r\n & > + * {\r\n @include margin-top('m');\r\n }\r\n\r\n .c-h {\r\n color: inherit;\r\n margin: inherit;\r\n }\r\n\r\n p {\r\n line-height: lh('prose');\r\n }\r\n\r\n .c-hero__button-wrap {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--space-s);\r\n\r\n &> .c-button {\r\n margin: 0 !important;\r\n }\r\n }\r\n }\r\n\r\n &--image {\r\n background: color('grey', 'step--1');\r\n color: color('white');\r\n\r\n &.mp .u-link {\r\n color: color('utility-blue', 'step-1');\r\n }\r\n }\r\n \r\n &__image-bg {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n background-position: 50% 50%;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: radial-gradient(ellipse farthest-side at bottom right, rgba(color('grey'), 60%), rgba(color('grey', 'step--1'), 90%));\r\n }\r\n\r\n @media (min-width: 55em) {\r\n left: 33.33%;\r\n\r\n &:after {\r\n background: radial-gradient(circle farthest-side at top right, rgba(color('grey', 'step--1'), 30%), color('grey', 'step--1'));\r\n }\r\n }\r\n\r\n @media (min-width:70em) {\r\n &:after {\r\n background: linear-gradient(270deg, rgba(color('grey','step--1'),0%) var(--gutter-width), rgba(color('grey','step--1'),62%) var(--stop), color('grey','step--1'));\r\n }\r\n } \r\n }\r\n\r\n &--homepage {\r\n background: linear-gradient(79.62deg, color('petrol', 'step--1') 0%, color('petrol') 100%);\r\n\r\n @media (min-width: 38em) {\r\n background: linear-gradient(84.46deg, color('petrol', 'step--1') 7.52%, color('petrol') 44.84%, rgba(35, 80, 87, 0.8) 51.02%, rgba(52, 82, 87, 0.62) 54.99%, rgba(78, 86, 87, 0.2209) 59.54%, rgba(87, 87, 87, 0) 65.59%);\r\n }\r\n \r\n &::after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n background: rgba(black, 0.33);\r\n width: 100%;\r\n height: 100%;\r\n\r\n @media (min-width: 38em) {\r\n background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);\r\n }\r\n }\r\n\r\n .u-wrap {\r\n @include padding-bottom('l-3xl');\r\n \r\n // &:before,\r\n // &:after {\r\n // display: none;\r\n // }\r\n }\r\n\r\n .c-hero {\r\n &__content {\r\n @media (min-width: 38em) {\r\n width: calc((41.666% - (2 * var(--gutter) / 5)) - 0.1px);\r\n }\r\n\r\n .c-h {\r\n color: color('white');\r\n }\r\n\r\n p {\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n .u-link {\r\n color: color('blue', 'step-1');\r\n }\r\n }\r\n\r\n &__image-bg {\r\n display: none;\r\n \r\n @media (min-width: 38em) {\r\n max-width: 65%;\r\n left: 35%;\r\n display: block;\r\n z-index: -1;\r\n transition: opacity 3s ease;\r\n background-position: 60% 40%;\r\n\r\n &:after {\r\n display: none;\r\n }\r\n\r\n &+ [class^='c-hero__image-'] {\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n &__image-fg {\r\n @extend .c-hero__image-bg;\r\n z-index: 1;\r\n }\r\n }\r\n }\r\n\r\n &--homepage-video {\r\n position: relative;\r\n\r\n &::after {\r\n position: absolute;\r\n content: '';\r\n top: 0;\r\n left: 0;\r\n background: rgba(black, 0.33);\r\n width: 100%;\r\n height: 100%;\r\n\r\n @media (min-width: 38em) {\r\n background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);\r\n }\r\n }\r\n\r\n .u-wrap {\r\n &::before,\r\n &::after {\r\n display: none;\r\n\r\n @media (min-width: 38em) {\r\n display: inline;\r\n }\r\n }\r\n }\r\n\r\n .c-hero {\r\n &__video-bg {\r\n width: 100%;\r\n height: auto;\r\n margin-bottom: -6px;\r\n background-size: cover;\r\n\r\n @media (min-width: 38em) {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n left: 40%;\r\n max-width: 60%;\r\n height: 100%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__video-button-wrap {\r\n position: absolute;\r\n z-index: 2;\r\n right: 0;\r\n bottom: calc(56.25% / 2 - 25px);\r\n left: 0;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n\r\n @media (min-width: 38em) {\r\n position: absolute;\r\n top: 45%;\r\n right: 20%;\r\n bottom: unset;\r\n left: unset;\r\n }\r\n\r\n .c-button {\r\n position: relative;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n background: rgba(black, 0.2);\r\n height: 100%;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n border-radius: inherit;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--homepage-light {\r\n @extend .c-hero--homepage;\r\n background: linear-gradient(79.62deg, color('petrol', 'step-3') 0%, color('blue', 'step-2') 100%), color('petrol', 'step-3');\r\n\r\n @media (min-width: 38em) {\r\n background: linear-gradient(86.37deg, color('petrol', 'step-3') 7.52%, color('petrol', 'step-3') 44.84%, rgba(color('petrol', 'step-3'), 0.8) 51.02%, rgba(color('petrol', 'step-3'), 0.6) 52.38%, rgba(color('petrol', 'step-3'), 0) 65.41%), color('petrol', 'step-3');\r\n }\r\n\r\n .c-hero {\r\n &__content {\r\n .c-h {\r\n color: color('grey', 'step--1');\r\n }\r\n\r\n p {\r\n color: color('grey');\r\n }\r\n\r\n .u-link {\r\n color: color('blue');\r\n }\r\n }\r\n }\r\n }\r\n\r\n &__canvas {\r\n position: absolute;\r\n z-index: -1;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n\r\n @media (min-width: 38em) { \r\n z-index: 1;\r\n }\r\n }\r\n}\r\n",".c-icon {\r\n width: 1em;\r\n height: 1em;\r\n color: inherit;\r\n font-size: inherit;\r\n}",".c-input {\r\n background: color('white');\r\n border: 1px solid color('petrol', 'step-2');\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-radius: 0;\r\n font: inherit;\r\n @include padding('xs');\r\n color: inherit;\r\n font-size: 1rem;\r\n display: block;\r\n width: 100%;\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: color('petrol');\r\n }\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n display: none !important;\r\n }\r\n\r\n &--alt {\r\n background: color('petrol', 'step-3');\r\n border: none;\r\n }\r\n\r\n &--large {\r\n min-height: 56px;\r\n }\r\n\r\n &--select {\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"10\"><path fill=\"%23006DAF\" fill-rule=\"nonzero\" d=\"M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z\"/></svg>');\r\n background-position: center right 1rem;\r\n background-repeat: no-repeat;\r\n background-size: 0.875em auto;\r\n }\r\n\r\n &--textarea {\r\n resize: vertical;\r\n min-height: 10rem;;\r\n }\r\n\r\n &--file {\r\n border: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n\r\n @at-root ::-webkit-file-upload-button {\r\n @extend %c-button;\r\n @extend .c-button--blue;\r\n display: inline-flex;\r\n @include margin-right('xs');\r\n }\r\n }\r\n\r\n &-error {\r\n --error-state: #{color('red')};\r\n position: relative;\r\n\r\n .c-input {\r\n width: calc(100% - (27px + var(--space-xs)));\r\n }\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n top: 2.3em;\r\n right: 0;\r\n @include margin-left('xs');\r\n @include padding('xs');\r\n background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"%23CE0058\"/><path stroke=\"%23fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334\"/></svg>') no-repeat center;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n\r\n &-error & {\r\n border-color: color('red');\r\n\r\n &:focus {\r\n border-color: color('red', 'step--1');\r\n }\r\n }\r\n\r\n &-message {\r\n @include margin-top('2xs');\r\n @include step(-1);\r\n color: var(--error-state);\r\n }\r\n\r\n &[disabled],\r\n [disabled],\r\n &--disabled {\r\n background-color: color('petrol', 'step-2');\r\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"lock\" viewBox=\"0 0 25 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z\"/></svg>');\r\n background-position: right var(--space-2xs) center;\r\n background-repeat: no-repeat;\r\n @include space('background-size', 's');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n}\r\n\r\n.u-disabled > .c-input {\r\n @extend .c-input--disabled;\r\n}\r\n\r\n.c-input--with-button {\r\n // padding-right: 44px;\r\n border: 0;\r\n}\r\n\r\n.c-input--with-button + [type] {\r\n // transform: translateY(-50%);\r\n // position: absolute;\r\n @include padding('xs');\r\n color: color('utility-blue');\r\n // right: 0;\r\n // top: 50%;\r\n\r\n svg {\r\n display: block;\r\n }\r\n}\r\n\r\n.c-label {\r\n font-weight: weight('bold');\r\n @include margin-bottom('2xs');\r\n display: block;\r\n}\r\n\r\n.c-fieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n margin: 0;\r\n min-width: 0;\r\n\r\n legend {\r\n @extend .c-h--step-3;\r\n font-weight: weight('bold');\r\n letter-spacing: ls('-3%');\r\n display: table;\r\n float: left;\r\n @include margin('xs', 0, 'l');\r\n padding: 0;\r\n width: 100%;\r\n\r\n + * {\r\n clear: both;\r\n }\r\n }\r\n\r\n & + & {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n @include margin-top('l-xl');\r\n @include padding-top('l');\r\n }\r\n}\r\n",".c-radio,\r\n.c-checkbox {\r\n @extend .u-hidden;\r\n\r\n &+label,\r\n &+input[type=hidden]+label {\r\n @include padding-left('l');\r\n position: relative;\r\n @include step(-1);\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n\r\n &:before {\r\n transform: translateY(-50%);\r\n position: absolute;\r\n content: '';\r\n border: 1px solid color('petrol', 'step-2');\r\n border-radius: 2px;\r\n height: 1.25rem;\r\n width: 1.25rem;\r\n left: 0;\r\n top: 50%;\r\n }\r\n }\r\n\r\n &:focus+label:before,\r\n &:focus+input[type=hidden]+label:before {\r\n outline: 2px solid;\r\n }\r\n\r\n &[disabled],\r\n [disabled] & {\r\n &+label:before {\r\n background-color: color('petrol', 'step-2');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n\r\n }\r\n\r\n &:hover+label:before {\r\n background-color: color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n\r\n &--box {\r\n &+label {\r\n @include padding('s');\r\n height: 100%;\r\n width: 100%;\r\n background: color('white');\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 6px;\r\n text-align: center;\r\n font-weight: 700;\r\n word-break: break-word;\r\n\r\n &:before,\r\n &:after {\r\n display: none;\r\n }\r\n }\r\n\r\n &:checked+label {\r\n background: color('blue');\r\n color: color('white');\r\n }\r\n\r\n &[disabled]+label {\r\n background: color('grey', 'step-3');\r\n color: color('grey', 'step-1');\r\n border: 1px solid color('grey', 'step-2');\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n}\r\n\r\n.c-checkbox {\r\n\r\n &:checked+label:before,\r\n &:checked+input[type=hidden]+label:before {\r\n background: color('utility-blue');\r\n }\r\n\r\n &:checked+label:after,\r\n &:checked+input[type=hidden]+label:after {\r\n transform: translateX(6.5px) translateY(-1.5px) translateY(-50%) rotate(45deg);\r\n position: absolute;\r\n content: '';\r\n width: 7px;\r\n height: 11px;\r\n border-bottom: 3px solid color('white');\r\n border-right: 3px solid color('white');\r\n left: 0;\r\n top: 50%;\r\n }\r\n}\r\n\r\n.c-radio,\r\n.c-checkbox {\r\n\r\n &+label:hover:before,\r\n &+input[type=hidden]+label:hover:before {\r\n background-color: color('utility-blue', 'step-3');\r\n }\r\n}\r\n\r\n.c-checkbox {\r\n\r\n &:checked+label:hover:before,\r\n &:checked+input[type=hidden]+label:hover:before {\r\n background: color('utility-blue', 'step--1');\r\n }\r\n}\r\n\r\n.c-radio {\r\n\r\n &+label:before,\r\n &+input[type=hidden]+label:before {\r\n border-radius: 100%;\r\n }\r\n\r\n &:checked+label:before,\r\n &:checked+input[type=hidden]+label:before {\r\n box-shadow: inset 0 0 0 5px color('utility-blue');\r\n }\r\n\r\n &:checked+label:hover:before,\r\n &:checked+input[type=hidden]+label:hover:before {\r\n box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');\r\n }\r\n}\r\n\r\n.c-off-canvas .c-checkbox-group {\r\n &>* {\r\n width: 100%;\r\n margin-left: 0;\r\n }\r\n}",".c-toggle {\r\n position: relative;\r\n @include step(-1);\r\n display: inline-block;\r\n white-space: nowrap;\r\n\r\n &__checkbox {\r\n @extend .u-hidden;\r\n }\r\n\r\n &__slider {\r\n @include margin-right('2xs');\r\n @include margin-left('2xs');\r\n position: relative;\r\n display: inline-block;\r\n height: 1.25rem;\r\n width: 2.25rem;\r\n border: 1px solid color('petrol', 'step-2');\r\n border-radius: 1.25rem;\r\n vertical-align: text-bottom;\r\n\r\n &::before {\r\n position: absolute;\r\n content: \"\";\r\n background-color: color('white');\r\n border: 1px solid color('petrol', 'step-2');\r\n height: 0.75rem;\r\n width: 0.75rem;\r\n top: 0;\r\n bottom: 0;\r\n left: 0.25rem;\r\n margin: auto 0;\r\n border-radius: 50%;\r\n transition: .1s;\r\n }\r\n }\r\n\r\n &:hover &__slider,\r\n &:focus-within &__slider {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n \r\n &:focus-within &__slider {\r\n outline: 2px solid;\r\n }\r\n\r\n &__checkbox:checked + &__slider {\r\n background-color: color('utility-blue');\r\n }\r\n\r\n &:hover &__checkbox:checked + &__slider,\r\n &:focus-within &__checkbox:checked + &__slider {\r\n background-color: color('utility-blue', 'step--1');\r\n }\r\n\r\n &__checkbox:checked + &__slider::before {\r\n transform: translateX(1rem);\r\n }\r\n\r\n input[disabled] {\r\n & + .c-toggle__slider {\r\n background-color: color('petrol', 'step-2');\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n\r\n &:before {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n }\r\n & ~ .c-toggle__label {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n }\r\n}",".c-internal-nav {\r\n background-color: transparent;\r\n border-bottom: 1px solid transparent;\r\n transition: 200ms all;\r\n\r\n &--stuck {\r\n @extend .u-bg-white;\r\n border-bottom-color: color('grey', 'step-2');\r\n z-index: 9999;\r\n\r\n .c-internal-nav__title {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &__wrap {\r\n @extend .u-wrap;\r\n display: flex;\r\n gap: var(--space-l);\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n &__title {\r\n @include padding('s', 0);\r\n flex-shrink: 0;\r\n font-weight: bold;\r\n transition: 200ms opacity;\r\n opacity: 0;\r\n }\r\n\r\n &__list {\r\n @include padding('s', 0);\r\n color: color('utility-blue');\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n display: flex;\r\n align-items: center;\r\n font-size: var(--step--1);\r\n\r\n & > * + * {\r\n @include margin-left('l');\r\n }\r\n\r\n li {\r\n a {\r\n @extend .u-link;\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n @media (max-width: 44em) {\r\n &__title,\r\n .c-button {\r\n display: none;\r\n }\r\n \r\n &__list {\r\n @include padding-bottom('s');\r\n }\r\n }\r\n}\r\n\r\n\r\n.c-hero + .c-internal-nav {\r\n margin-top: calc(var(--gutter) * -1);\r\n}\r\n\r\n.c-internal-nav.u-sticky {\r\n top: -1px;\r\n}",".c-meta-box {\r\n background: color('petrol', 'step-3');\r\n @include padding('s-m');\r\n @include step(-1);\r\n @include flow('s');\r\n\r\n .u-wrap--fields {\r\n @include padding-right(0)\r\n }\r\n}",".c-off-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\r\n z-index: 9999;\r\n\r\n &> * + * {\r\n margin: 0 !important;\r\n }\r\n\r\n &__backdrop {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(color(\"grey\"), 0.5);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n &__content {\r\n position: fixed;\r\n top: 0;\r\n right: -100%;\r\n width: calc(100% - var(--space-m));\r\n height: 100%;\r\n background-color: color(\"white\");\r\n transition: right 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n &__header {\r\n @extend .c-h--step-3;\r\n @include padding('s', 's', 0);\r\n\r\n & > * {\r\n margin-bottom: 0 !important;\r\n }\r\n }\r\n\r\n &__header + &__main {\r\n @include margin-top('m');\r\n }\r\n\r\n &__main {\r\n @include margin-bottom('m');\r\n @include padding('3xs', 's');\r\n overflow-y: scroll;\r\n }\r\n\r\n &__footer {\r\n @include margin-top('auto');\r\n @include padding(0, 's', 's');\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n &__close {\r\n @extend .u-link;\r\n @include margin(0, 'auto');\r\n @include padding('s');\r\n }\r\n\r\n &--active {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: opacity 0.3s ease;\r\n\r\n .c-off-canvas__backdrop {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .c-off-canvas__content {\r\n right: 0;\r\n }\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 40em) {\r\n .c-off-canvas--mobile {\r\n display: none !important;\r\n }\r\n\r\n .c-checkbox-group {\r\n [data-off-canvas=\"header\"],\r\n [data-off-canvas=\"footer\"] {\r\n display: none;\r\n }\r\n }\r\n}",".c-option-list {\r\n .mp & {\r\n line-height: lh('prose');\r\n }\r\n\r\n a {\r\n color: color('utility-blue');\r\n \r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n li {\r\n @include margin-bottom('2xs');\r\n break-inside: avoid;\r\n } \r\n\r\n &--columns {\r\n @include space('column-gap', 'gutter');\r\n column-width: 200px;\r\n\r\n @media (min-width: 60em) {\r\n column-width: 260px;\r\n }\r\n }\r\n\r\n &__title {\r\n a {\r\n font-weight: weight();\r\n color: color('utility-blue');\r\n @include margin-left('2xs');\r\n \r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n",".c-post-meta {\r\n color: color('grey', 'step-1');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n border-top: 1px solid color('petrol', 'step-2');\r\n padding: 1.25rem 0;\r\n @include flow('xs');\r\n}\r\n",".c-product-signpost {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n max-width: 440px;\r\n @include padding(\"2xs\");\r\n word-break: break-word;\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n }\r\n\r\n &:hover .c-h {\r\n text-decoration: underline;\r\n }\r\n\r\n &__image {\r\n margin-bottom: 0;\r\n // @include padding-right(\"s\");\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n flex-grow: 1;\r\n }\r\n\r\n &__wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n @include space('gap', 'xs-s');\r\n }\r\n\r\n .o-prose p {\r\n line-height: lh();\r\n @include step(-1);\r\n }\r\n\r\n &--bordered {\r\n @include padding(\"xs\");\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n }\r\n\r\n &--float-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", \"xs-l\");\r\n min-width: 9rem;\r\n width: 30%;\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--float-right,\r\n &__image {\r\n width: 40%;\r\n }\r\n\r\n &__wrapper {\r\n flex-direction: row;\r\n }\r\n }\r\n}\r\n",".c-quote {\r\n color: color('petrol', 'step-1');\r\n padding-top: 74px;\r\n @include padding('2xl', 0, 'l', 'xl');\r\n position: relative;\r\n\r\n &:before {\r\n content: '“';\r\n color: color('petrol', 'step-3');\r\n position: absolute;\r\n height: 57px;\r\n width: 45px;\r\n left: 0;\r\n top: 0.1em;\r\n font-family: \"Arial\", sans-serif;\r\n font-size: 10em;\r\n font-weight: 900;\r\n line-height: 0.9;\r\n margin-left: -0.025em;\r\n z-index: -1;\r\n }\r\n\r\n p {\r\n @include step(2);\r\n line-height: lh('prose');\r\n }\r\n\r\n p + p {\r\n margin-top: 1em;\r\n }\r\n\r\n cite {\r\n display: block;\r\n @include step(-1);\r\n @include margin-top('s');\r\n }\r\n\r\n &__image {\r\n max-height: 3em;\r\n }\r\n\r\n &--bordered {\r\n border: 1px solid color(\"petrol\", \"step-2\");\r\n @include padding('xl', 'xl', 'xl', '4xl');\r\n\r\n &:before {\r\n @include space('left', 'xl');\r\n @include space('top', 'l');\r\n }\r\n }\r\n}",".c-scroll-spy {\r\n position: sticky;\r\n @include space(\"top\", \"gutter\");\r\n overflow: hidden;\r\n\r\n a:not(.c-button) {\r\n color: color(\"utility-blue\");\r\n position: relative;\r\n display: block;\r\n transition: 300ms transform;\r\n\r\n &:hover {\r\n color: color(\"grey\");\r\n }\r\n\r\n &::before {\r\n content: \"▸ \";\r\n position: absolute;\r\n left: -17px;\r\n top: 0;\r\n }\r\n }\r\n\r\n &-active {\r\n transform: translateX(17px);\r\n }\r\n}\r\n\r\n/below additions added to allow for buttons to be displayed under the list items but remain sticky /\r\n.c-scroll-spy-buttons a:before {\r\n content: \"\" !important;\r\n}\r\n\r\n@media only screen and (min-width: 880px) {\r\n .c-scroll-spy-buttons {\r\n margin-right: 54px;\r\n margin-right: var(--space-xl);\r\n }\r\n\r\n .c-scroll-spy-buttons .c-button {\r\n width: 100%;\r\n margin-bottom: 18px;\r\n margin-bottom: var(--space-s);\r\n }\r\n}\r\n\r\n@media only screen and (max-width: 879px) {\r\n .c-scroll-spy-buttons .c-button {\r\n display: inline-flex;\r\n margin-right: 0.5em;\r\n margin-bottom: 0.5em;\r\n vertical-align: top;\r\n }\r\n}\r\n",".c-series {\r\n @include step(-1);\r\n list-style: none;\r\n flex-wrap: wrap;\r\n display: flex;\r\n @include gap('2xs', 's');\r\n align-items: center;\r\n\r\n .mp {\r\n font-size: inherit;\r\n }\r\n\r\n li {\r\n padding-right: 1rem;\r\n\r\n @supports (gap: 1rem) {\r\n padding-right: 0;\r\n }\r\n }\r\n}\r\n",".c-signpost {\r\n &__link {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n &__image {\r\n @include margin-right('s-m');\r\n width: 20%;\r\n max-width: 72px;\r\n flex-grow: 1;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n @include step(-1);\r\n\r\n p {\r\n color: color('utility-blue');\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &:hover &__content p {\r\n text-decoration: none;\r\n }\r\n}",".c-slat {\r\n @include padding-bottom('m-l');\r\n @include padding-top('m-l');\r\n\r\n &--grey {\r\n background-color: color('petrol', 'step-3');\r\n }\r\n\r\n &--white {\r\n background-color: color('white');\r\n }\r\n\r\n &--concentric {\r\n background-image: url('../svg/concentric.svg');\r\n background-repeat: no-repeat;\r\n background-position: right top;\r\n background-size: auto 50%;\r\n\r\n @media (min-width: 40em) {\r\n background-size: auto 100%;\r\n }\r\n }\r\n\r\n &--dots {\r\n background-image: url('../svg/dots-pattern.svg');\r\n background-repeat: no-repeat;\r\n background-position: left top;\r\n background-size: auto 100%;\r\n }\r\n \r\n &--crystal {\r\n background-image: url('../svg/crystal.svg');\r\n background-repeat: no-repeat;\r\n background-position: right bottom;\r\n background-size: auto 100%;\r\n }\r\n \r\n &--arc {\r\n background-image: url('../svg/arc.svg');\r\n background-repeat: no-repeat;\r\n background-position: right bottom;\r\n background-size: auto 100%;\r\n }\r\n\r\n &--padded {\r\n @include padding-bottom('l-2xl');\r\n @include padding-top('l-2xl');\r\n }\r\n\r\n &__title {\r\n @include step(5);\r\n }\r\n}",".c-table {\r\n text-align: left;\r\n border: none;\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: transparent;\r\n @include step(-1);\r\n\r\n th {\r\n font-weight: weight('semi');\r\n }\r\n\r\n td,\r\n th {\r\n padding: 12px;\r\n background: color('petrol', 'step-3');\r\n border: none;\r\n border-bottom: 2px solid color('white');\r\n border-top: 2px solid color('white');\r\n vertical-align: top;\r\n color: inherit;\r\n\r\n }\r\n\r\n // Allow setting 'u-bg' background colours on table rows\r\n tr[class='u-bg'] {\r\n td,\r\n th {\r\n background-color: inherit;\r\n }\r\n }\r\n\r\n th {\r\n background: color('petrol');\r\n color: color('white');\r\n }\r\n\r\n img {\r\n height: auto !important;\r\n }\r\n\r\n &--center {\r\n td,\r\n th {\r\n vertical-align: middle;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n &--ellipsis {\r\n td {\r\n width: auto;\r\n\r\n &.u-ellipsis {\r\n width: 100%;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--wide {\r\n width: 100%;\r\n }\r\n\r\n .c-icon--dash {\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n .c-icon--tick {\r\n color: color('green');\r\n }\r\n\r\n &__title th,\r\n &__title td {\r\n background: color('white');\r\n color: inherit;\r\n }\r\n\r\n a:hover {\r\n text-decoration: none;\r\n }\r\n\r\n &--comparison {\r\n thead th {\r\n background: transparent;\r\n color: inherit;\r\n font-weight: weight();\r\n }\r\n\r\n tbody td:nth-child(n+2) {\r\n text-align: center;\r\n }\r\n }\r\n\r\n &--features {\r\n thead th,\r\n tbody td,\r\n tfoot td {\r\n background: transparent;\r\n }\r\n\r\n thead th {\r\n color: inherit;\r\n font-weight: weight();\r\n }\r\n }\r\n\r\n @media (min-width: 30em) {\r\n .c-icon {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n &--fixed {\r\n table-layout: fixed;\r\n\r\n @media (min-width: 40em) {\r\n th {\r\n width: 40%;\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 40em) {\r\n &--responsive {\r\n tbody,\r\n tfoot,\r\n tr,\r\n td,\r\n th {\r\n display: block;\r\n }\r\n\r\n thead {\r\n display: none;\r\n }\r\n \r\n tr + tr {\r\n border-top: 2px solid color('petrol', 'step-2');\r\n @include padding-top('s');\r\n @include margin-top('s');\r\n }\r\n \r\n tbody [data-responsive-title] {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n @include grid-gap('s');\r\n \r\n &:before {\r\n content: attr(data-responsive-title);\r\n font-weight: 700;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n",".c-tabs {\r\n .no-js &__content > {\r\n display: none;\r\n\r\n &:target {\r\n display: block;\r\n }\r\n }\r\n\r\n &__content > * {\r\n display: none;\r\n\r\n &.c-tab--active {\r\n display: block;\r\n }\r\n }\r\n\r\n .no-js &--flex &__content > * {\r\n display: none;\r\n\r\n &:target {\r\n display: flex;\r\n }\r\n }\r\n \r\n &--flex &__content > * {\r\n display: none;\r\n\r\n &.c-tab--active {\r\n display: flex;\r\n justify-content: stretch;\r\n }\r\n }\r\n \r\n &__controls {\r\n @include margin-bottom('m');\r\n overflow-x: auto;\r\n \r\n &-list {\r\n border-bottom: 4px solid color('utility-blue', 'step-3');\r\n display: flex;\r\n width: 100%;\r\n min-width: min-content;\r\n\r\n li {\r\n display: flex;\r\n }\r\n }\r\n }\r\n\r\n &__control {\r\n .mp & {\r\n color: color('utility-blue');\r\n }\r\n\r\n font-weight: weight('bold');\r\n @include step(-1);\r\n @include padding(0, 0 , 's-m');\r\n @include margin-right('m');\r\n display: block;\r\n border-bottom: 4px solid color('utility-blue', 'step-3');\r\n margin-bottom: -4px;\r\n position: relative;\r\n z-index: 1;\r\n\r\n @media screen and (max-width:55em) {\r\n white-space: nowrap;\r\n }\r\n\r\n .c-tabs__controls-list > li:last-child & {\r\n @include margin-right(0);\r\n }\r\n \r\n &.c-twi {\r\n display: flex;\r\n padding-right: 1.875rem;\r\n\r\n svg {\r\n position: absolute;\r\n right: 0;\r\n }\r\n }\r\n }\r\n \r\n :checked + &__control,\r\n &__control--active {\r\n border-bottom-color: color('utility-blue');\r\n }\r\n\r\n :focus + &__control {\r\n outline: 2px solid;\r\n }\r\n\r\n .c-tab {\r\n width: 100%;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n}\r\n",".c-twi {\r\n $twi-space: 0.5em;\r\n display: inline-flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n color: inherit;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: inherit;\r\n }\r\n\r\n svg {\r\n margin-left: $twi-space;\r\n font-size: 1.25em;\r\n position: static !important;\r\n }\r\n\r\n &--left svg {\r\n margin-right: $twi-space;\r\n margin-left: 0;\r\n order: -1;\r\n }\r\n}\r\n",".c-usp {\r\n @include padding-top('s-m');\r\n @include padding-bottom('s-m');\r\n position: relative;\r\n \r\n &--bordered {\r\n @include padding('s-m');\r\n border: 1px solid;\r\n border-image-slice: 1;\r\n border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));\r\n }\r\n\r\n &--center {\r\n .c-usp__icon,\r\n .c-usp__title {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n &__title {\r\n max-width: 300px;\r\n color: color('petrol');\r\n\r\n @supports(-webkit-text-fill-color:transparent) {\r\n background-image: linear-gradient(to right, color('petrol'), color('blue') );\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n // display: inline-block;\r\n\r\n &::selection {\r\n -webkit-background-clip: none;\r\n }\r\n }\r\n }\r\n\r\n &__link {\r\n @extend .u-fill, .u-fill--link;\r\n margin-top: 0;\r\n }\r\n\r\n &__icon {\r\n @include space('height','l');\r\n @include space('width','l');\r\n\r\n .c-usp--center & {\r\n @include space('height','2xl');\r\n @include space('width','2xl');\r\n }\r\n }\r\n\r\n &__eyebrow {\r\n @include padding('3xs', 'xs');\r\n @include step(-1);\r\n border-radius: 2em;\r\n background: #c2e9f0;\r\n color: #005461;\r\n display: inline-block;\r\n }\r\n}\r\n",".mp-dynamicform {\r\n .c-form {\r\n &__section {\r\n padding: 36px;\r\n padding: var(--space-l);\r\n background: color('petrol', 'step-3');\r\n }\r\n\r\n &__section + .c-form__section {\r\n border-top: 2px solid color('white');\r\n }\r\n\r\n &__section-title {\r\n letter-spacing: -.02em;\r\n font-size: var(--step-3);\r\n }\r\n\r\n .c-label--required:after {\r\n content: \"\";\r\n color: color('red');\r\n padding: 0 2px;\r\n position: relative;\r\n top: -2px;\r\n }\r\n }\r\n \r\n .c-input__wrap {\r\n align-items: center;\r\n gap: var(--space-s);\r\n flex-wrap: wrap;\r\n display: flex;\r\n \r\n .c-label {\r\n flex-basis: 148px;\r\n margin-bottom: 0;\r\n \r\n &+ {\r\n flex: 1 0 148px;\r\n }\r\n }\r\n\r\n &--messages {\r\n row-gap: 0;\r\n margin-top: 0;\r\n \r\n p {\r\n @include margin-top('2xs');\r\n letter-spacing: -.01em;\r\n font-size: var(--step--1);\r\n }\r\n }\r\n }\r\n\r\n .c-input__spacer {\r\n height: 0;\r\n flex-basis: 148px;\r\n }\r\n\r\n .c-input--select {\r\n cursor: pointer;\r\n }\r\n\r\n .c-checkbox + label,\r\n .c-radio + label {\r\n display: inline-block;\r\n }\r\n}",".c-h {\r\n font-weight: 700;\r\n font-family: $font-stack;\r\n line-height: lh();\r\n\r\n &--page-subtitle {\r\n @include step(1);\r\n color: color('green');\r\n font-weight: weight('semi');\r\n }\r\n\r\n &--step-6,\r\n &--page-title {\r\n @include hyphenated;\r\n @include step(6);\r\n }\r\n\r\n &--step-5 {\r\n @include hyphenated;\r\n @include step(5);\r\n }\r\n\r\n &--step-4 {\r\n @include step(4);\r\n }\r\n\r\n &--step-3 {\r\n @include step(3);\r\n }\r\n\r\n &--step-2 {\r\n @include step(2);\r\n }\r\n\r\n &--step-1 {\r\n @include step(1);\r\n }\r\n\r\n &--step-0 {\r\n @include step();\r\n }\r\n\r\n &--step--1 {\r\n @include step(-1);\r\n }\r\n\r\n &--reset {\r\n font-weight: weight();\r\n @include step();\r\n }\r\n\r\n &--upper {\r\n text-transform: uppercase;\r\n color: color('petrol');\r\n @include step(-1);\r\n letter-spacing: ls('2%');\r\n }\r\n\r\n &--event-date {\r\n @include step(1);\r\n color: color('petrol', 'step-1');\r\n }\r\n\r\n &--tagline {\r\n @include step();\r\n color: color('green');\r\n }\r\n}\r\n",".c-lightbox {\r\n position: fixed;\r\n z-index: 1000;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(color('grey', 'step--1'), .9);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &__slide {\r\n max-width: 90vw;\r\n margin: auto;\r\n display: none;\r\n\r\n &.active {\r\n display: block;\r\n\r\n img {\r\n max-width: 85vw;\r\n max-height: 90vh;\r\n margin: auto;\r\n display: block;\r\n object-fit: contain;\r\n }\r\n }\r\n }\r\n\r\n &__prev,\r\n &__next {\r\n position: absolute;\r\n height: 2rem;\r\n width: 2rem;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n }\r\n\r\n &__prev {\r\n background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"arrow-left\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12H2M2 12L9 5M2 12L9 19\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>');\r\n left: 0.5rem;\r\n }\r\n\r\n &__next {\r\n background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"arrow-right\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12H22M22 12L15 5M22 12L15 19\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>');\r\n right: 0.5rem;\r\n }\r\n\r\n &__close {\r\n position: absolute;\r\n top: 0.6rem;\r\n right: 0.6rem;\r\n color: color('white');\r\n font-size: 1.6rem;\r\n cursor: pointer;\r\n }\r\n\r\n &__video {\r\n width: 100%;\r\n max-height: 80vh;\r\n }\r\n}\r\n",".c-product-finder {\r\n &__panel {\r\n background: color('petrol', 'step-3');\r\n @include padding('xl-2xl', 'm-xl');\r\n position: relative;\r\n\r\n &--intro {\r\n background: radial-gradient(circle at top right, color('petrol', 'step-3') 0%, color('petrol', 'step-3') 30%, color('blue', 'step-2') 100%);\r\n\r\n .c-h {\r\n font-size: var(--step-5);\r\n }\r\n }\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-style: solid;\r\n @include space('border-width', 'xl', 'xl', 0, 0);\r\n border-color: transparent color('white') transparent transparent;\r\n bottom: 0;\r\n right: 0;\r\n display: none;\r\n }\r\n \r\n @media (min-width: 48em) {\r\n &:after {\r\n display: block;\r\n }\r\n }\r\n\r\n .c-h,\r\n figure {\r\n @include margin-bottom(0);\r\n }\r\n }\r\n\r\n &__result {\r\n display: flex;\r\n flex-flow: column;\r\n flex: 1;\r\n @include flow('s');\r\n\r\n &>.c-h {\r\n font-size: var(--step--1);\r\n text-transform: uppercase;\r\n }\r\n\r\n &--upgrade {\r\n &>.c-h {\r\n color: color('petrol');\r\n\r\n @supports(-webkit-text-fill-color:transparent) {\r\n background-image: linear-gradient(to right, color('petrol'), color('blue'));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n\r\n &::selection {\r\n -webkit-background-clip: none;\r\n }\r\n }\r\n }\r\n\r\n .c-product-comparison-card {\r\n border: 1px solid;\r\n border-image-slice: 1;\r\n border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));\r\n }\r\n }\r\n\r\n }\r\n}","html body {\r\n\r\n@import './typography.scss';\r\n@import './link.scss';\r\n@import './colour.scss';\r\n@import './disabled.scss';\r\n@import './wrap.scss';\r\n@import './flex.scss';\r\n@import './display.scss';\r\n@import './flow.scss';\r\n@import './space.scss';\r\n@import './hr.scss';\r\n@import './ellipsis.scss';\r\n@import './scroll-shadows.scss';\r\n\r\n}","/* Padding /\r\n.u-pad-top-0 {\r\n padding-top: 0;\r\n}\r\n.u-pad-top-s {\r\n @include padding-top('s');\r\n}\r\n.u-pad-top-m {\r\n @include padding-top('m');\r\n}\r\n.u-pad-top-l {\r\n @include padding-top('l');\r\n}\r\n.u-pad-top-xl {\r\n @include padding-top('xl');\r\n}\r\n.u-pad-top-s-m {\r\n @include padding-top('s-m');\r\n}\r\n.u-pad-top-m-l {\r\n @include padding-top('m-l');\r\n}\r\n.u-pad-top-l-xl {\r\n @include padding-top('l-xl');\r\n}\r\n\r\n.u-pad-bottom-0 {\r\n padding-bottom: 0;\r\n}\r\n.u-pad-bottom-s {\r\n @include padding-bottom('s');\r\n}\r\n.u-pad-bottom-m {\r\n @include padding-bottom('m');\r\n}\r\n.u-pad-bottom-l {\r\n @include padding-bottom('l');\r\n}\r\n.u-pad-bottom-xl {\r\n @include padding-bottom('xl');\r\n}\r\n.u-pad-bottom-s-m {\r\n @include padding-bottom('s-m');\r\n}\r\n.u-pad-bottom-m-l {\r\n @include padding-bottom('m-l');\r\n}\r\n.u-pad-bottom-l-xl {\r\n @include padding-bottom('l-xl');\r\n}\r\n\r\n.u-pad-left-0 {\r\n padding-left: 0;\r\n}\r\n.u-pad-left-s {\r\n @include padding-left('s');\r\n}\r\n.u-pad-left-m {\r\n @include padding-left('m');\r\n}\r\n.u-pad-left-l {\r\n @include padding-left('l');\r\n}\r\n.u-pad-left-xl {\r\n @include padding-left('xl');\r\n}\r\n\r\n.u-pad-right-0 {\r\n padding-right: 0;\r\n}\r\n.u-pad-right-s {\r\n @include padding-right('s');\r\n}\r\n.u-pad-right-m {\r\n @include padding-right('m');\r\n}\r\n.u-pad-right-l {\r\n @include padding-right('l');\r\n}\r\n.u-pad-right-xl {\r\n @include padding-right('xl');\r\n}\r\n\r\n.u-pad-0 {\r\n padding: 0;\r\n}\r\n.u-pad-3xs {\r\n @include padding('3xs');\r\n}\r\n.u-pad-s {\r\n @include padding('s');\r\n}\r\n.u-pad-m {\r\n @include padding('m');\r\n}\r\n.u-pad-l {\r\n @include padding('l');\r\n}\r\n.u-pad-xl {\r\n @include padding('xl');\r\n}\r\n\r\n.u-pad-y-xs {\r\n @include padding-top('xs');\r\n @include padding-bottom('xs');\r\n}\r\n.u-pad-y-s {\r\n @include padding-top('s');\r\n @include padding-bottom('s');\r\n}\r\n.u-pad-y-m {\r\n @include padding-top('m');\r\n @include padding-bottom('m');\r\n}\r\n.u-pad-y-m-l {\r\n @include padding-top('m-l');\r\n @include padding-bottom('m-l');\r\n}\r\n.u-pad-y-l {\r\n @include padding-top('l');\r\n @include padding-bottom('l');\r\n}\r\n.u-pad-y-xl {\r\n @include padding-top('xl');\r\n @include padding-bottom('xl');\r\n}\r\n.u-pad-y-2xl {\r\n @include padding-top('2xl');\r\n @include padding-bottom('2xl');\r\n}\r\n.u-pad-y-l-xl {\r\n @include padding-top('l-xl');\r\n @include padding-bottom('l-xl');\r\n}\r\n.u-pad-y-l-2xl {\r\n @include padding-top('l-2xl');\r\n @include padding-bottom('l-2xl');\r\n}\r\n\r\n.u-pad-x-s {\r\n @include padding-left('s');\r\n @include padding-right('s');\r\n}\r\n.u-pad-x-m {\r\n @include padding-left('m');\r\n @include padding-right('m');\r\n}\r\n.u-pad-x-l {\r\n @include padding-left('l');\r\n @include padding-right('l');\r\n}\r\n.u-pad-x-xl {\r\n @include padding-left('xl');\r\n @include padding-right('xl');\r\n}\r\n.u-pad-x-s-xl {\r\n @include padding-left('s-xl');\r\n @include padding-right('s-xl');\r\n}\r\n\r\n/ Margin /\r\n\r\n.u-margin-top-0 {\r\n margin-top: 0;\r\n}\r\n.u-margin-top-auto {\r\n margin-top: auto;\r\n}\r\n.u-margin-top-2xs {\r\n @include margin-top('2xs');\r\n}\r\n.u-margin-top-xs {\r\n @include margin-top('xs');\r\n}\r\n.u-margin-top-s {\r\n @include margin-top('s');\r\n}\r\n.u-margin-top-m {\r\n @include margin-top('m');\r\n}\r\n.u-margin-top-l {\r\n @include margin-top('l');\r\n}\r\n.u-margin-top-xl {\r\n @include margin-top('xl');\r\n}\r\n.u-margin-top-s-m {\r\n @include margin-top('s-m');\r\n}\r\n.u-margin-top-m-l {\r\n @include margin-top('m-l');\r\n}\r\n.u-margin-top-l-xl {\r\n @include margin-top('l-xl');\r\n}\r\n.u-margin-top-l-2xl {\r\n @include margin-top('l-2xl');\r\n}\r\n.u-margin-top-xl-2xl {\r\n @include margin-top('xl-2xl');\r\n}\r\n\r\n.u-margin-bottom-0 {\r\n margin-bottom: 0;\r\n}\r\n.u-margin-bottom-s {\r\n @include margin-bottom('s');\r\n}\r\n.u-margin-bottom-m {\r\n @include margin-bottom('m');\r\n}\r\n.u-margin-bottom-l {\r\n @include margin-bottom('l');\r\n}\r\n.u-margin-bottom-xl {\r\n @include margin-bottom('xl');\r\n}\r\n.u-margin-bottom-s-m {\r\n @include margin-bottom('s-m');\r\n}\r\n.u-margin-bottom-s-l {\r\n @include margin-bottom('s-l');\r\n}\r\n.u-margin-bottom-m-l {\r\n @include margin-bottom('m-l');\r\n}\r\n.u-margin-bottom-m-xl {\r\n @include margin-bottom('m-xl');\r\n}\r\n.u-margin-bottom-l-xl {\r\n @include margin-bottom('l-xl');\r\n}\r\n\r\n.u-margin-left-0 {\r\n margin-left: 0;\r\n}\r\n.u-margin-left-2xs {\r\n @include margin-left('2xs');\r\n}\r\n.u-margin-left-xs {\r\n @include margin-left('xs');\r\n}\r\n.u-margin-left-s {\r\n @include margin-left('s');\r\n}\r\n.u-margin-left-m {\r\n @include margin-left('m');\r\n}\r\n.u-margin-left-l {\r\n @include margin-left('l');\r\n}\r\n.u-margin-left-xl {\r\n @include margin-left('xl');\r\n}\r\n\r\n.u-margin-right-0 {\r\n margin-right: 0;\r\n}\r\n.u-margin-right-xs {\r\n @include margin-right('xs');\r\n}\r\n.u-margin-right-s {\r\n @include margin-right('s');\r\n}\r\n.u-margin-right-m {\r\n @include margin-right('m');\r\n}\r\n.u-margin-right-l {\r\n @include margin-right('l');\r\n}\r\n.u-margin-right-xl {\r\n @include margin-right('xl');\r\n}\r\n\r\n.u-margin-0 {\r\n margin: 0;\r\n}\r\n.u-margin-s {\r\n @include margin('s');\r\n}\r\n.u-margin-m {\r\n @include margin('m');\r\n}\r\n.u-margin-l {\r\n @include margin('l');\r\n}\r\n.u-margin-xl {\r\n @include margin('xl');\r\n}\r\n\r\n.u-margin-y-xs {\r\n @include margin-top('xs');\r\n @include margin-bottom('xs');\r\n}\r\n.u-margin-y-s {\r\n @include margin-top('s');\r\n @include margin-bottom('s');\r\n}\r\n.u-margin-y-s-m {\r\n @include margin-top('s-m');\r\n @include margin-bottom('s-m');\r\n}\r\n.u-margin-y-m {\r\n @include margin-top('m');\r\n @include margin-bottom('m');\r\n}\r\n.u-margin-y-l {\r\n @include margin-top('l');\r\n @include margin-bottom('l');\r\n}\r\n.u-margin-y-xl {\r\n @include margin-top('xl');\r\n @include margin-bottom('xl');\r\n}\r\n\r\n.u-margin-x-3xs {\r\n @include margin-left('3xs');\r\n @include margin-right('3xs');\r\n}\r\n.u-margin-x-2xs {\r\n @include margin-left('2xs');\r\n @include margin-right('2xs');\r\n}\r\n.u-margin-x-xs {\r\n @include margin-left('xs');\r\n @include margin-right('xs');\r\n}\r\n.u-margin-x-s {\r\n @include margin-left('s');\r\n @include margin-right('s');\r\n}\r\n.u-margin-x-m {\r\n @include margin-left('m');\r\n @include margin-right('m');\r\n}\r\n.u-margin-x-l {\r\n @include margin-left('l');\r\n @include margin-right('l');\r\n}\r\n.u-margin-x-xl {\r\n @include margin-left('xl');\r\n @include margin-right('xl');\r\n}\r\n\r\n.u-margin-auto {\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n/ Width /\r\n\r\n.u-width-auto {\r\n width: auto;\r\n}\r\n\r\n.u-width-100 {\r\n width: 100%;\r\n}\r\n","@each $name, $step in $steps {\r\n .u-step-#{$name} {\r\n @include step($name);\r\n }\r\n}\r\n\r\n.u-lede {\r\n @include step(1);\r\n color: color('blue');\r\n \r\n .mp &,\r\n & {\r\n line-height: lh('prose');\r\n }\r\n}\r\n\r\n.u-strong {\r\n font-weight: weight('bold');\r\n}\r\n\r\n.u-normal {\r\n font-weight: weight();\r\n}\r\n\r\n.u-ls {\r\n letter-spacing: ls();\r\n}\r\n\r\n.u-text-center {\r\n text-align: center;\r\n}\r\n\r\n.u-remove-bullets {\r\n list-style-type: none;\r\n}",".u-link-inside a,\r\n.mp .u-link,\r\n.u-link {\r\n color: color('utility-blue');\r\n cursor: pointer;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n &--petrol {\r\n color: color('petrol');\r\n }\r\n\r\n &--red {\r\n color: color('red');\r\n }\r\n \r\n &--underline {\r\n text-decoration: underline;\r\n \r\n &:hover {\r\n text-decoration: none;\r\n }\r\n }\r\n}\r\n","@each $name, $colour in $colours {\r\n .u-#{$name} { color: color($name); }\r\n .u-bg-#{$name} { background-color: color($name); }\r\n @each $tone, $shade in $colour {\r\n @if ($tone != 'step-0') {\r\n .u-#{$name}-#{$tone} { color: color($name, $tone); }\r\n .u-bg-#{$name}-#{$tone} { background-color: color($name, $tone); }\r\n }\r\n }\r\n}\r\n",".u-disabled {\r\n cursor: not-allowed;\r\n \r\n input,\r\n button {\r\n pointer-events: none;\r\n }\r\n}",".u-wrap {\r\n @include padding-right('gutter');\r\n @include padding-left('gutter');\r\n margin-right: auto;\r\n margin-left: auto;\r\n max-width: calc(#{$wrapper});\r\n max-width: calc(#{$wrapper} + var(--gutter) + var(--gutter));\r\n width: 100%;\r\n\r\n .u-wrap {\r\n padding-right: 0;\r\n padding-left: 0;\r\n }\r\n\r\n &--content {\r\n max-width: 51.75rem;\r\n width: 100%;\r\n }\r\n\r\n &--fields {\r\n max-width: 27rem;\r\n @include padding-right('l');\r\n }\r\n}\r\n",".u-flex {\r\n display: flex;\r\n}\r\n\r\n.u-flex-column {\r\n flex-direction: column;\r\n}\r\n\r\n.u-align-center {\r\n align-items: center;\r\n}\r\n\r\n.u-justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.u-justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.u-justify-end {\r\n justify-content: flex-end;\r\n}\r\n\r\n.u-flex-1 {\r\n flex: 1;\r\n}\r\n\r\n.u-flex-no-shrink {\r\n flex-shrink: 0;\r\n}\r\n\r\n.u-flex-no-grow {\r\n flex-grow: 0;\r\n}\r\n\r\n.u-flex-wrap {\r\n flex-wrap: wrap;\r\n}\r\n",".u-hidden {\r\n clip: rect(0 0 0 0);\r\n clip-path: inset(0 0 100% 0);\r\n height: 1px;\r\n overflow: hidden;\r\n position: absolute;\r\n transition: 300ms clip-path;\r\n white-space: nowrap;\r\n width: 1px;\r\n}\r\n\r\n.u-revealed {\r\n clip-path: inset(0);\r\n transition: 300ms clip-path;\r\n}\r\n\r\n.u-clear-both {\r\n clear: both;\r\n}\r\n\r\n.u-display-none {\r\n display: none;\r\n}\r\n\r\n.u-display-block {\r\n display: block;\r\n}\r\n\r\n.u-display-inline-block {\r\n display: inline-block;\r\n}\r\n\r\n.u-float-left {\r\n float: left;\r\n}\r\n\r\n.u-float-right {\r\n float: right;\r\n}\r\n\r\n.u-float--image-left {\r\n @extend .u-float-left;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n\r\n @media (min-width: 38em) {\r\n @include margin-right('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n}\r\n\r\n.u-float--image-right {\r\n @extend .u-float-right;\r\n @include margin(0, 0, \"xs-l\", 0);\r\n width: 100%;\r\n\r\n @media (min-width: 38em) {\r\n @include margin-left('xs-l');\r\n min-width: 9rem;\r\n width: 50%;\r\n }\r\n}\r\n\r\n.u-fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n z-index: 1;\r\n\r\n object-fit: cover;\r\n}\r\n\r\n.u-fill--link {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-indent: 200%;\r\n}\r\n\r\n.u-relative {\r\n position: relative;\r\n}\r\n\r\n.u-sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.u-sticky--gutter {\r\n @include space(\"top\", \"gutter\");\r\n}\r\n\r\n.u-split {\r\n display: flex;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &--top {\r\n align-items: flex-start;\r\n }\r\n\r\n &--bottom {\r\n align-items: flex-end;\r\n }\r\n\r\n & > :first-child {\r\n @include margin-right(\"s\");\r\n }\r\n\r\n @supports (gap: 1rem) {\r\n @include gap(\"s-m\");\r\n \r\n & > :first-child {\r\n margin-right: unset;\r\n }\r\n }\r\n}\r\n\r\n.u-row {\r\n display: flex;\r\n @include gap(\"s-l\");\r\n}\r\n\r\n@supports (object-fit: contain) {\r\n .u-object-contain {\r\n object-fit: contain;\r\n }\r\n}\r\n\r\n@supports (object-fit: cover) {\r\n .u-2\\/1 {\r\n aspect-ratio: 2 / 1;\r\n object-fit: cover;\r\n object-position: 75% 50%;\r\n }\r\n}\r\n\r\n\r\n@media (min-width: 640px) {\r\n .u-md-hidden {\r\n display: none !important;\r\n }\r\n}\r\n\r\n// Used to hide un-compiled Vue code - Do not remove\r\n[v-cloak] {\r\n display: none;\r\n}",".u-flow {\r\n &--3xs {\r\n @include flow('3xs');\r\n }\r\n\r\n &--2xs {\r\n @include flow('2xs');\r\n }\r\n\r\n &--xs {\r\n @include flow('xs');\r\n }\r\n\r\n &--s,\r\n & {\r\n @include flow('s');\r\n }\r\n\r\n &--m {\r\n @include flow('m');\r\n }\r\n\r\n &--s-m {\r\n @include flow('s-m');\r\n }\r\n\r\n &--s-l {\r\n @include flow('s-l');\r\n }\r\n\r\n &--m-xl {\r\n @include flow('m-xl');\r\n }\r\n\r\n &--l {\r\n @include flow('l');\r\n }\r\n\r\n &--xl {\r\n @include flow('xl');\r\n }\r\n\r\n &--l-2xl {\r\n @include flow('l-2xl');\r\n }\r\n\r\n &--3xl {\r\n @include flow('3xl');\r\n }\r\n\r\n &--prose > + ,\r\n // Fix for Tridion XPM markup interrupting u-flow--prose spacing\r\n &--prose > [property='a:Content'] > + * {\r\n margin-top: var(--flow, 1em);\r\n }\r\n\r\n &--gutter {\r\n @include flow('gutter');\r\n }\r\n\r\n &--lined {\r\n & > * + * {\r\n @include padding-top('m-xl');\r\n @include margin-top('m-xl');\r\n border-top: 1px solid color('petrol', 'step-2');\r\n clear: both;\r\n }\r\n }\r\n}\r\n",".u-hr {\r\n margin: 0;\r\n border: none;\r\n @include padding-bottom('m-xl');\r\n @include margin-bottom('m-xl');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-bottom {\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n @extend .u-hr\r\n}",".u-ellipsis {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n max-width: 0;\r\n width: 100%;\r\n}","// Scroll shadows\r\n// Helps identify when an element has overflow i.e. can be scrolled\r\n@mixin scroll-shadows($direction:vertical,$background-color:white) {\r\n @supports (background-attachment: local) {\r\n $cover-size: 54px;\r\n $shadow-size: 27px;\r\n $cover-direction: to bottom;\r\n $shadow-position-start: 50% 0;\r\n $shadow-position-end: 50% 100%;\r\n\r\n @if $direction == vertical {\r\n background-position: \r\n center top, \r\n center bottom, \r\n center top, \r\n center bottom;\r\n background-size: \r\n 100% $cover-size, \r\n 100% $cover-size, \r\n 100% $shadow-size, \r\n 100% $shadow-size;\r\n }\r\n \r\n @else if $direction == horizontal {\r\n background-position: \r\n left center, \r\n right center, \r\n left center, \r\n right center;\r\n background-size: \r\n $cover-size 100%, \r\n $cover-size 100%, \r\n $shadow-size 120%, \r\n $shadow-size 120%;\r\n $cover-direction: to right;\r\n $shadow-position-start: 0 50%;\r\n $shadow-position-end: 100% 50%;\r\n }\r\n\r\n background-repeat: no-repeat;\r\n background-color: $background-color;\r\n background-attachment: local, local, scroll, scroll;\r\n background-image: \r\n linear-gradient(\r\n $cover-direction, \r\n $background-color 50%, \r\n transparent),\r\n linear-gradient(\r\n $cover-direction, \r\n transparent, \r\n $background-color 50%),\r\n radial-gradient(\r\n farthest-side at $shadow-position-start, \r\n transparentize(darken($background-color,40%), 0.7), \r\n transparent),\r\n radial-gradient(\r\n farthest-side at $shadow-position-end, \r\n transparentize(darken($background-color,40%), 0.7), \r\n transparent);\r\n }\r\n}\r\n\r\n.u-scroll-shadows--v {\r\n @include scroll-shadows\r\n}\r\n\r\n.u-scroll-shadows--h {\r\n @include scroll-shadows(horizontal)\r\n}"],"names":[],"version":3,"file":"main.css.map"}