full-width{grid-row-gap:var(--space-xl);grid-column:main;margin-top:3rem;margin-bottom:1rem}content-block{grid-column:main;justify-self:center;max-width:70ch;margin:10vh 0}.page{content-block > h1:first-of-type { grid-column: wide2; } content-block > h1:first-of-type:before { display: block; } #hero { height: fit-content; padding-top: 6rem; .subtext { grid-area: subtext; } layout-block { grid-template-areas: "header header header" "subtext subtext cta" "figure figure figure"; } } #demo { layout-block { grid-template-columns: 1fr; } } #features { layout-block { grid-template-areas: "fig1 fig2 fig3" "article1 article2 article3"; figure:nth-of-type(1) { grid-area: fig1; } figure:nth-of-type(2) { grid-area: fig2; } figure:nth-of-type(3) { grid-area: fig3; } article:nth-of-type(1) { grid-area: article1; } article:nth-of-type(2) { grid-area: article2; } article:nth-of-type(3) { grid-area: article3; } } } #cta { layout-block { grid-template-areas: ". cta ."; } } #billing-features { layout-block { display: flex; flex-direction: column; row-gap: 6.25rem; article { color: #808080; font-family: REM; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 2.25rem; letter-spacing: -0.0175rem; max-width: 41.25rem; } .feature { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } img { max-width: 25rem; margin-left: 12.5rem; } .email-template { margin-right: 1.125rem; } h3 { color: var(--primary, #314769); font-family: REM; font-size: 3rem; font-style: normal; font-weight: 600; line-height: 3.4375rem; letter-spacing: -0.12rem; } p { color: var(--primary, #d62e43); font-family: REM; font-size: 1.75rem; font-style: normal; font-weight: 600; line-height: 1.5625rem; letter-spacing: -0.0175rem; margin-bottom: -8rem; } li { margin-top: 1rem; margin-left: 2rem; } } }}#invoice{layout-block { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-left: 2.5rem; span { color: #d62e43; font-family: REM; font-size: 8.125rem; font-style: normal; font-weight: 600; line-height: 10.9375rem; letter-spacing: -0.324rem; } p { color: var(--primary, #314769); font-family: REM; font-size: 2.4rem; font-style: normal; font-weight: 600; line-height: 3.25rem; letter-spacing: -0.096rem; } a { width: fit-content; padding-left: 0.75rem; padding-right: 0.75rem; } .invoiced-customers { display: flex; flex-direction: column; } }}#testimonial{layout-block { column-gap: 1rem; grid-template-columns: 1fr 2rem 1fr; grid-template-areas: "attribution separator company" "quote quote quote"; .attribution { align-self: flex-end; &:before { content: none; } job-title { display: block; } grid-area: attribution; } .separator { grid-area: separator; } .brand { align-self: center; grid-area: company; } .blockquote { max-width: fit-content; margin-top: 3rem; margin-bottom: 3rem; justify-self: center; grid-area: quote; } .before { text-align: right; grid-area: before; } .after { grid-area: after; } }}body#isb2b-enrichment{ #faq { layout-block { grid-template-columns: 1fr; } }}main>section>.cta{grid-column:col2}#testimonial{position:relative}#hero.scoop{position:relative;overflow:hidden;&:before { position:absolute; content:""; inset:0; overflow:visible; background:url("/images/themes/swoosh/swoosh-landing.svg") bottom center; background-repeat:no-repeat; background-size:calc(var(--safe-width) + 5rem + 25%); z-index:-20; } &:after { position:absolute; content:""; inset:0; overflow:visible; background:url("/images/themes/swoosh/mask-landing.svg") bottom center; background-repeat:no-repeat; background-size:calc(var(--safe-width) + 5rem + 30%); z-index:-10; } figure { z-index:-15; overflow:hidden; margin-bottom:-4rem; }}#hero.spinner{position:relative;&:before { position:absolute; inset:4rem calc(var(--safe-width) * -0.75) 0; content:""; opacity:0.3; transform:skewX(-40deg) rotate(-2deg); background:conic-gradient(from var(--angle) at 50% 20%,#4C375A 2deg,#464068 6deg,#294868 10deg,#185070 20deg,#1F688C 40deg,#21759A 62deg,#3DA5BE 123deg,#ACD0D9 160deg,#EFF6F8 168deg,#FFF 170deg,#FFF4D7 172deg,#FEE7A6 176deg,#F7BE33 182deg,#DE7324 185deg,#E9571F 210deg,#DF353C 265deg,#BF1B4E 326deg,#8E2C56 350deg,#4C375A 360deg); animation:rotateGradient 24s linear infinite; animation-duration:24s; clip-path:url(#swoosh); z-index:-100; transition:all 8s ease-in-out 200ms; }}@property --shadeTo{syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}@property --angle{syntax: "<angle>";
    inherits: false;
    initial-value: 270deg;
}@keyframes rotateGradient{0%{--angle:270deg}100%{--angle:-90deg}}figure.author{margin:2rem 0 2rem -4.725rem;display:flex;align-items:center;gap:1rem;position:relative;img.avatar { max-width: 5rem; border-radius: 50%; border: 2px solid var(--wine); border-bottom-width: 3px; } figcaption { font-size: 1.25rem; }}content-block figure.author:before{position:absolute;content:'';width:1px;inset:0;top:-2rem;bottom:1rem;left:2.4rem;background:var(--wine);z-index:-1}