/*
Theme Name: Project Broadcast v3.0
Theme URI: https://www.projectbroadcast.com
Author: Michael Stevens
Author URI: https://www.projectbroadcast.com
Description: Elevate Your Business with Project Broadcast. Transforming Engagement, Boosting Conversions, and Cultivating Lasting Relationships!
Version: 3.0.15
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: Project Broadcast v3.0
*/

button, hr, input { overflow: visible; }

progress, sub, sup { vertical-align: baseline; }

[type=checkbox], [type=radio], legend { box-sizing: border-box; padding: 0; }

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

details, main { display: block; }

h1 { font-size: 2em; margin: .67em 0; }

hr { box-sizing: content-box; height: 0; }

code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }

a { background-color: transparent; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }

sub { bottom: -.25em; }

sup { top: -.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button, select { text-transform: none; }

[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; }

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: ButtonText dotted 1px; }

fieldset { padding: .35em .75em .625em; }

legend { color: inherit; display: table; max-width: 100%; white-space: normal; }

textarea { overflow: auto; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }

[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }

[type=search]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

summary { display: list-item; }

[hidden], template { display: none; }

/* Design System Colors */
:root { --base---white: #FFFFFF; --base---black: #000000; --base---primary--action: #0056FF; --neutrals--50: #F9FAFC; --neutrals--100: #F3F4F6; --neutrals--200: #E6E7EB; --neutrals--300: #D2D5DC; --neutrals--400: #9CA2AE; --neutrals--500: #6B7380; --neutrals--600: #4C5564; --neutrals--700: #384152; --neutrals--800: #202938; --neutrals--900: #111828; --red--50: #FEF2F2; --red--100: #FEE2E1; --red--200: #FECBCA; --red--300: #FDA5A4; --red--400: #F87070; --red--500: #F04444; --red--600: #DC2625; --red--700: #BA1C1D; --red--800: #991B1C; --red--900: #7F1D1E; --orange--50: #FFFAF5; --orange--100: #FFF6ED; --orange--200: #FFEAD5; --orange--300: #FDDCAB; --orange--400: #FEB273; --orange--500: #FD853A; --orange--600: #FB6514; --orange--700: #EC4A0A; --orange--800: #9C2A10; --orange--900: #7E2410; --yellow--50: #FEFCE8; --yellow--100: #FEF9C3; --yellow--200: #FEF08A; --yellow--300: #FDE047; --yellow--400: #FACC15; --yellow--500: #E9B308; --yellow--600: #CA8A04; --yellow--700: #A26208; --yellow--800: #854E0E; --yellow--900: #723F12; --lime--50: #F6FEE7; --lime--100: #ECFCCB; --lime--200: #DAF99C; --lime--300: #BEF164; --lime--400: #A3E636; --lime--500: #83CC16; --lime--600: #64A30E; --lime700: #5A8720; --lime--800: #3F6212; --lime--900: #365313; --green--50: #F0FDF4; --green--100: #DCFCE7; --green--200: #BBF7D1; --green--300: #86EFAC; --green--400: #4ADE80; --green--500: #23C55E; --green--600: #17A34A; --green--700: #157F3D; --green--800: #176535; --green--900: #15532E; --emerald--50: #ECFDF5; --emerald--100: #D0FAE4; --emerald--200: #A7F3CF; --emerald--300: #6DE7B6; --emerald--400: #34D399; --emerald--500: #10B982; --emerald--600: #05976A; --emerald--700: #057857; --emerald--800: #075F47; --emerald--900: #064D3B; --cyan--50: #ECFEFF; --cyan--100: #CFFBFE; --cyan--200: #A5F3FD; --cyan--300: #66E8F8; --cyan--400: #21D3ED; --cyan--500: #07B6D5; --cyan--600: #0891B3; --cyan--700: #0F7490; --cyan--800: #165E76; --cyan--900: #164F63; --sky--50: #F0F9FF; --sky--100: #E0F2FE; --sky--200: #BAE7FE; --sky--300: #7ED3FC; --sky--400: #38BDF8; --sky--500: #0EA5EA; --sky--600: #0384C6; --sky--700: #0469A1; --sky--800: #075A86; --sky--900: #0C4A6F; --blue--50: #EFF6FF; --blue--100: #DBEAFF; --blue--200: #BFDCFE; --blue--300: #93C4FC; --blue--400: #61A5FA; --blue--500: #3B82F6; --blue--600: #2563EC; --blue--700: #1D4ED7; --blue--800: #1F41AF; --blue--900: #1F3A8B; --indigo--50: #EEF2FE; --indigo--100: #E1E7FF; --indigo--200: #C7D2FF; --indigo--300: #A6B4FD; --indigo--400: #818CF8; --indigo--500: #6366F1; --indigo--600: #5046E5; --indigo--700: #4438CA; --indigo--800: #3730A2; --indigo--900: #312D81; --violet--50: #F5F3FF; --violet--100: #EDEAFF; --violet--200: #DDD6FF; --violet--300: #C5B5FE; --violet--400: #A78BFA; --violet--500: #8B5CF6; --violet--600: #7D3AEC; --violet--700: #6D28D9; --violet--800: #5B20B6; --violet--900: #4D1D95; --purple--50: #FBF5FF; --purple--100: #F4E8FE; --purple--200: #EAD5FE; --purple--300: #D8B4FE; --purple--400: #C085FD; --purple--500: #A755F7; --purple--600: #9334EA; --purple--700: #7E22CF; --purple--800: #6B22A8; --purple--900: #571C86; --fuchsia--50: #FEF4FF; --fuchsia--100: #FAE8FE; --fuchsia--200: #F5CFFE; --fuchsia--300: #F0ABFC; --fuchsia--400: #E879F9; --fuchsia--500: #D946EF; --fuchsia--600: #C026D4; --fuchsia--700: #A21CAF; --fuchsia--800: #861990; --fuchsia--900: #701A75; --rose--50: #FFF1F1; --rose--100: #FEE4E7; --rose--200: #FECDD3; --rose--300: #FEA4B0; --rose--400: #FB7286; --rose--500: #F43F5E; --rose--600: #E21D48; --rose--700: #BE113C; --rose--800: #9F133A; --rose--900: #891336; --utility---overlay-1: #20293880; --utility---overlay-2: #2029380d; --box--shadow: 2px 4px 9px #bbbbbb4d; --shadow--extreme: 2px 4px 9px #00000066; --border--bottom: 0px 1px 0px #D2D5DC; --border--left: -1px 0px 0px #D2D5DC; --border--right: 1px 0px 0px #D2D5DC; --border--top: 0px -1px 0px #D2D5DC; --active--state---left: inset 8px 0px 0px #EFF6FF; }

/* Design System Font Styles */
/* Headlines */
.headline--xxlarge { font-size: 48px; font-weight: 900; line-height: 52px; letter-spacing: -0.01em; }
.headline--xlarge { font-size: 40px; font-weight: 900; line-height: 44px; letter-spacing: -0.01em; }
.headline--large { font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }
.headline--medium { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; }
.headline--small { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.headline--xsmall { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }
.headline--xxsmall { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 0em; }
.headline--xxxsmall { font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0.07em; text-transform: uppercase; }

/* Paragraphs */
.paragraph--xlarge { font-size: 24px; font-weight: 400; line-height: 36px; letter-spacing: 0em; }
.paragraph--large { font-size: 18px; font-weight: 400; line-height: 32px; letter-spacing: 0em; }
.paragraph--medium { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.paragraph--small { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.paragraph--xsmall { font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0em; }

/* Labels */
.label--xlarge { font-size: 20px; line-height: 28px; letter-spacing: 0em; font-weight: 400; }
.label--xlarge__medium { font-size: 20px; line-height: 28px; letter-spacing: 0em; font-weight: 500; }
.label--xlarge__strong { font-size: 20px; line-height: 28px; letter-spacing: 0em; font-weight: 700; }
.label--large { font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 400; }
.label--large__medium { font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 500; }
.label--large__strong { font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 700; }
.label--medium { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.label--medium__medium { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.label--medium__strong { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.label--small { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.label--small__medium { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.label--small__strong { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.label--xsmall { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; }
.label--xsmall__medium { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 500; }
.label--xsmall__strong { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; }

h1 { color: var(--neutrals--800); font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; margin-bottom: 24px; }
@media screen and (min-width: 768px) { h1 { font-size: 48px; font-weight: 900; line-height: 52px; letter-spacing: -0.01em; } }
h1 mark { background-color: transparent; color: var(--neutrals--800); display: inline-block; position: relative; z-index: 0; }
h1 mark:after { background-color: var(--indigo--200); bottom: 4px; content: ''; height: 8px; left: -4px; position: absolute; right: -4px; z-index: -1; }

h2 { color: var(--neutrals--800); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
@media screen and (min-width: 768px) { h2 { font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; } }

h3 { color: var(--neutrals---neutrals-800); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; margin: 0 0 12px 0; }
@media screen and (min-width: 768px) { h3 { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; } }

h4 { color: var(--neutrals---neutrals-800); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 0em; margin: 0 0 12px 0; }
@media screen and (min-width: 768px) { h4 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; } }

h5 { color: var(--neutrals---neutrals-800); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 0em; margin: 0; }

h6 { color: var(--neutrals---neutrals-500); font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0.07em; text-transform: uppercase; margin: 0; }

strong { font-weight: 700; }

html, body { color: var(--neutrals---neutrals-600); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; overflow-x: hidden; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }

* { box-sizing: border-box; }

hr { background: #ccc; border: none !important; height: 1px; margin: 0 0 16px; }

a { color: var(--base---primary--action); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--base---primary--action); text-decoration: underline; }

p { line-height: 28px; margin: 0 0 24px; }
p.lead { font-size: 18px; line-height: 28px; }
@media screen and (min-width: 768px) { p.lead { font-size: 24px; line-height: 36px; } }

mark { background: transparent; }

.box-shadow { box-shadow: var(--box--shadow); }

.no-gap { gap: 0 !important; }

.no-margin { margin: 0 !important; }

.main--container { padding: 0 20px; margin: 0 auto; max-width: 1280px; min-height: 500px; width: 100%; }

.error404--columns { align-items: center; display: flex; }
.error404--columns__left { width: 380px; }
.error404--columns__right { flex: 1; }
.error404--columns__right img { display: block; width: 100%; }

.pagination { align-items: center; display: flex; flex: 0 0 100%; justify-content: center; min-height: 24px; padding: 48px 24px; }
.pagination svg { fill: inherit; }
.pagination a, .pagination span { align-items: center; background: var(--base---white); border-radius: 2px; color: var(--base---black); display: flex; font-weight: 700; height: 40px; justify-content: center; margin: 2px; padding: 0 16px; transition: background 0.3s ease; }
.pagination a:hover, .pagination span:hover { background: var(--neutrals---neutrals-100); color: var(--base---black); text-decoration: none; }
.pagination a.current, .pagination span.current { background: var(--base---primary--action); color: var(--base---white); }

.searchInput { background: transparent; max-width: 480px; margin: 0 auto; width: 100%; }
.searchInput--container { align-items: center; background: var(--base---white); border: solid 1px var(--neutrals---neutrals-100); border-radius: 8px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06); display: flex; height: 56px; position: relative; }
.searchInput--container svg { left: 16px; position: absolute; }
.searchInput--container input { font-family: inherit; }
.searchInput--container input[type=text] { background: transparent; border: solid 2px transparent; flex: 1 0 auto; height: 100%; padding: 12px 24px 12px 48px; transition: border 0.3s ease; }
.searchInput--container input[type=text]:focus { border: solid 2px var(--blue--blue-200); }

.summary { align-items: center; background: var(--neutrals---neutrals-50); border: solid 1px var(--neutrals---neutrals-100); border-radius: 10px; color: var(--neutrals---neutrals-600); display: flex; flex-direction: column; margin: 0 auto 12px; max-width: 1000px; padding: 24px; text-align: left; width: 100%; }
@media screen and (min-width: 1024px) { .summary { flex-direction: row; padding-right: 48px; } }
.summary:hover { color: var(--neutrals---neutrals-600); text-decoration: none; }
.summary--date { color: var(--neutrals---neutrals-400); display: block; margin: 8px 0; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.summary--image { background: var(--base---white); border: solid 1px var(--neutrals---neutrals-100); border-radius: 6px; height: 145px; margin: 0 0 24px 0; overflow: hidden; flex: 0 0 100%; width: 100%; }
@media screen and (min-width: 1024px) { .summary--image { flex: 0 0 280px; margin: 0 24px 0 0; width: 280px; } }
.summary h1 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; margin: 0; }
.summary p { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; margin: 0; }
.summary img { display: block; height: auto; width: 100%; }

.listing { flex: 0 0 100%; padding: 12px 0; width: 100%; }
@media screen and (min-width: 1024px) { .listing { flex: 0 0 33.3%; padding: 12px; width: 33.3%; } }
.listing a { background: var(--base---white); }
@media screen and (min-width: 1024px) { .listing.highlighted { border-radius: none; flex: 0 0 100%; margin-bottom: 24px; width: 100%; }
  .listing.highlighted .listing--action { padding: 12px; margin-right: 24px; }
  .listing.highlighted .listing--author { color: var(--neutrals---neutrals-500); font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
  .listing.highlighted .listing--container { align-items: center; background: var(--base---white); border: none; box-shadow: none; flex-direction: row; }
  .listing.highlighted .listing--content { padding: 0 24px; }
  .listing.highlighted .listing--excerpt { color: var(--neutrals---neutrals-600); font-size: 18px; font-weight: 400; line-height: 32px; letter-spacing: 0em; height: auto; margin-bottom: 16px; }
  .listing.highlighted .listing--head { border: solid 1px var(--neutrals---neutrals-200); border-radius: 6px; flex: 0 0 50%; padding-top: 40%; width: 50%; }
  .listing.highlighted .listing--length { text-align: left; }
  .listing.highlighted .listing--footer { border-top: none; padding: 20px; }
  .listing.highlighted .listing--title { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; margin: 0 0 16px; } }
.listing--action { border: solid 1px var(--neutrals---neutrals-200); border-radius: 4px; padding: 8px; transition: border 0.3s ease; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.listing--action:hover { border: solid 1px var(--base---black); }
.listing--author { color: var(--neutrals---neutrals--500); font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; margin-top: 12px; }
.listing--body { flex: 1 1 auto; padding: 20px; }
.listing--container { border: solid 1px var(--neutrals---neutrals-200); box-shadow: var(--box--shadow); border-radius: 6px; color: var(--base---black); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.listing--container:hover { color: var(--base---black); text-decoration: none; }
.listing--head { background-position: center center; background-size: cover; border-bottom: solid 1px var(--neutrals---neutrals-200); padding: 35% 0 0 0; }
.listing--excerpt { color: var(--neutrals---neutrals-600); height: 72px; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.listing--footer { align-items: center; border-top: solid 1px var(--neutrals---neutrals-200); display: flex; flex-direction: row-reverse; padding: 12px 16px 12px 24px; }
.listing--length { color: var(--neutrals---neutrals-700); flex: 1 1 auto; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; text-align: right; }
.listing--title { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; display: -webkit-box; margin-bottom: 4px; min-height: 56px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.hamburger { height: 46px; position: relative; width: 46px; }
.hamburger--btn { display: flex; align-items: center; position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; cursor: pointer; z-index: 1; }
.hamburger--btn > span, .hamburger--btn > span::after, .hamburger--btn > span::before { display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; }
.hamburger--btn > span::after { content: ''; top: 8px; }
.hamburger--btn > span::before { content: ''; top: -8px; }
.hamburger--open .hamburger--btn > span { transform: rotate(45deg); }
.hamburger--open .hamburger--btn > span::after { top: 0; transform: rotate(90deg); }
.hamburger--open .hamburger--btn > span::before { top: 0; transform: rotate(0); }
.hamburger--open .header--menus { max-height: 1000px; transition: max-height 0.75s ease-in; }

.blog { padding: 80px 0 40px; }
.blog--intro { margin: 0 auto; max-width: 700px; padding: 80px 24px 40px; text-align: center; }
.blog--intro h1 { margin-top: 16px; }
.blog--intro h6 { margin: 0; }
.blog--intro p { font-size: 24px; font-weight: 400; line-height: 36px; letter-spacing: 0em; line-height: 28px; }
.blog--empty { padding: 100px 0; text-align: center; }
.blog--listing { display: flex; flex-wrap: wrap; padding: 48px 0; }
.blog--rss { align-items: center; display: flex; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; justify-content: center; text-align: center; width: 100%; }
.blog--rss img { position: relative; top: 4px; margin-right: 4px; width: 20px; }
.blog--rss a { color: var(--base---black); }
.blog--rss a:hover { color: var(--base---black); }

.articles { margin: 0 auto; max-width: 980px; padding: 100px 20px; width: 100%; }

.author--description { margin: 0 auto; max-width: 700px; }
.author--empty { border: solid 1px var(--neutrals---neutrals-100); background: var(--neutrals---neutrals-50); border-radius: 10px; font-size: 24px; font-weight: 700; margin: 0 auto; max-width: 1000px; padding: 48px; width: 100%; }
.author--intro { padding: 160px 0; text-align: center; }
.author--listing { display: flex; flex-direction: column; text-align: center; }
.author--listing h4 { margin-bottom: 48px; }
.author--social a { align-items: center; background: var(--neutrals---neutrals-200); border-radius: 100px; display: inline-flex; justify-content: center; margin: 0 4px; padding: 8px; }

.authorCard { align-items: center; display: flex; flex-direction: row; line-height: 20px; padding: 24px 0; }
@media screen and (min-width: 1024px) { .authorCard { align-items: flex-start; flex-direction: column; } }
.authorCard--info a { color: var(--neutrals---neutrals-800); display: block; margin-bottom: 12px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.authorCard--info a:hover { color: var(--neutrals---neutrals-800); }
.authorCard p { display: none; }
@media screen and (min-width: 1024px) { .authorCard p { display: block; } }
.authorCard--image { border-radius: 100px; margin: 0 12px 0 0; overflow: hidden; width: 48px; }
@media screen and (min-width: 1024px) { .authorCard--image { margin: 0 0 12px 0; width: 68px; } }
.authorCard--title { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; text-transform: uppercase; }

.article { padding: 120px 0 60px; position: relative; }

.article img { display: block; height: auto; width: 100%; }

.article--ad { position: static; right: 0; top: 400px; width: 100%; bottom: 0; }

@media screen and (min-width: 1280px) { .article--ad { position: absolute; width: 180px; } }
.article--adContainer { background: var(--neutrals---neutrals-50); border: solid 1px var(--neutrals---neutrals-200); border-radius: 4px; box-shadow: var(--box--shadow); margin: 0 auto; max-width: 740px; padding: 20px; position: sticky; top: 104px; text-align: center; }

.article--adContainer h5 { margin-bottom: 12px; }

.article--adContainer img { max-width: 140px; margin: 0 auto; }

.article--container { margin: 0 auto; max-width: 740px; width: 100%; }

@media screen and (min-width: 1280px) { .article--meta { left: 0; position: absolute; top: 380px; width: 200px; } }
.article--meta p { font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0em; }

.article--info { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; margin-bottom: 24px; }

.article--label { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; color: var(--neutrals---neutrals-500); text-transform: uppercase; }

.article--next, .article--prev { margin: 8px 0; width: 100%; }

@media screen and (min-width: 1024px) { .article--next, .article--prev { margin: 0; width: 48%; } }
@media screen and (max-width: 1024px) { .article--next svg, .article--prev svg { display: none; } }
.article--next a, .article--prev a { align-items: center; border: solid 1px var(--neutrals---neutrals-200); border-radius: 6px; color: var(--base---black); display: flex; height: 100px; padding: 16px 12px; transition: background 0.3s ease; width: 100%; font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 700; }

@media screen and (max-width: 1024px) { .article--next a div, .article--prev a div { text-align: center; width: 100%; } }
.article--next a:hover, .article--prev a:hover { background: var(--neutrals---neutrals-100); color: var(--base---black); text-decoration: none; }

.article--prev svg { flex: 0 0 20px; margin-right: 12px; width: 20px; }

@media screen and (min-width: 1024px) { .article--next { text-align: right; } }
.article--next a { justify-content: flex-end; }

.article--next svg { flex: 0 0 20px; margin-left: 12px; width: 20px; }

.article--navigation { align-items: center; display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto; }

@media screen and (min-width: 1024px) { .article--navigation { flex-direction: row; padding: 80px 0; } }
.article--networks { margin-bottom: 24px; }

.article--networksContainer { display: flex; flex-direction: row; }

.article--networksContainer a { align-items: center; border: solid 2px #000; border-radius: 48px; display: inline-flex; height: 40px; justify-content: center; width: 40px; }

.article--networksContainer div { padding-bottom: 12px; padding-right: 12px; max-width: 260px; }

.article--section { position: relative; font-size: 12px; }

.article--section:before { border-top: solid 1px var(--neutrals---neutrals-200); content: ""; display: block; left: 0; position: absolute; right: 0; top: 10px; }

.article--section span { background: var(--base---white); position: relative; padding-right: 8px; }

.article--share { display: none; position: absolute; width: 200px; bottom: 0; top: 860px; }

@media screen and (min-width: 1024px) { .article--share { display: block; } }
.article--sticky { display: flex; flex-direction: column; position: -webkit-sticky; position: sticky; top: 104px; }

.article--sticky a { align-items: center; background: var(--neutrals---neutrals-200); border-radius: 100px; color: var(--base---black); display: inline-flex; justify-content: center; margin: 4px 0; padding: 8px; width: 36px; }

.article--title { font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }

.article--thumbnail { border: solid 1px var(--neutrals---neutrals-200); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }

.article table { color: var(--base---black); }

/* Addon: Extending Wordpress Native Styles */
.wp-block { max-width: 1280px; }
.wp-block-image img { width: 100%; }
.wp-block-button.is-style-outline a { border: solid 1px var(--neutrals---neutrals-300); }
.wp-block-button__link { border-radius: 4px; padding: 0.667em 1.333em; }
.wp-block-button__link:hover { text-decoration: none; }

.alignwide { margin: 0 auto; max-width: 700px; width: 100%; }

.alignfull { margin: 0 -20px; max-width: 100vw; width: 100vw; }
@media (min-width: 960px) { .alignfull { margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; } }

#author-bio-box { display: none; }

/* Design System - Element: Accordion */
.accordion--content { padding: 12px 24px 24px; }
.accordion--container { display: flex; flex-direction: column; gap: 12px; margin: 0 auto; max-width: 800px; width: 100%; }
.accordion--icon { background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 48px; flex: 0 0 24px; height: 36px; margin-left: auto; padding: 4px; width: 36px; }
.accordion--icon .icons:last-child { display: none; }
.accordion--item { background: var(--neutrals--50); border: solid 1px var(--neutrals--200); border-radius: 8px; }
.accordion--item button { align-items: center; background: transparent; border: none; cursor: pointer; display: flex; gap: 24px; padding: 16px 16px 16px 24px; text-align: left; width: 100%; font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 500; }
.accordion--item button[aria-expanded=true] .accordion--icon .icons:first-child { display: none; }
.accordion--item button[aria-expanded=true] .accordion--icon .icons:last-child { display: block; }
.accordion div[hidden] { height: fit-content; overflow: hidden; transition: height 0.3s ease; -webkit-overflow-scrolling: touch; }
.accordion div[hidden=true] { height: 0px; }

/* Design System - Element: Tag */
.badge { background: var(--neutrals--100); border-radius: 2px; color: var(--base---black); display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 800; height: 20px; letter-spacing: 0.75px; line-height: 16px; padding: 2px 6px; text-transform: uppercase; }
.badge.new { background: var(--yellow--200); }
.badge.popular { background: var(--indigo--200); }

/* Design System - Component: Banner */
.banner { border-bottom: solid 1px var(--neutrals--200); font-size: 11px; font-weight: 700; left: 0; line-height: 18px; position: fixed; right: 0; top: 0; z-index: 999999; }
@media screen and (min-width: 1024px) { .banner { font-size: 14px; } }
.banner--content { align-items: center; display: flex; flex-direction: column; height: 80px; margin: 0 auto; max-width: 1280px; padding: 0 48px; width: 100%; }
@media screen and (min-width: 1024px) { .banner--content { flex-direction: row; height: 52px; } }
.banner--close { background: transparent; border: none; color: inherit; cursor: pointer; font-family: inherit; margin: 0; padding: 0; outline: none; position: absolute; right: 0; height: 40px; top: 50%; transform: translateY(-50%); width: 40px; }
.banner--close span { color: inherit; height: 24px; width: 24px; }
.banner--close svg { fill: currentColor; }
.banner + .header { top: 80px; }
@media screen and (min-width: 1024px) { .banner + .header { top: 52px; } }
.banner + .header + .main > .main--container { padding-top: 80px; }
@media screen and (min-width: 1024px) { .banner + .header + .main > .main--container { padding-top: 52px; } }

/* Design System - Block: Basics */
.basics { background: var(--indigo--50); margin-left: calc(50% - 50vw); margin-top: 48px; margin-bottom: 48px; max-width: 100vw; width: 100vw; }
.basics--container { align-items: center; display: flex; flex-direction: column; gap: 24px; margin: 0 auto; max-width: 1280px; padding: 20px 20px 48px; width: 100%; }
.basics--container ul { display: flex; flex-direction: column; gap: 16px; margin: -48px 0 24px; padding: 0; list-style-type: none; }
@media screen and (min-width: 1024px) { .basics--container ul { flex-direction: row; } }
.basics--container li { background: var(--base---white); border-radius: 8px; box-shadow: var(--box--shadow); display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 24px; }

/* Design System - Element: Button */
.blockquote { background-color: var(--indigo--50); background-image: url(https://www.projectbroadcast.com/m/wp-content/uploads/2022/06/pull-quote.png); background-size: cover; border: none; border-radius: 12px; color: var(--indigo--900); display: flex; flex-direction: column; gap: 24px; padding: 40px 32px 32px; position: relative; margin: 48px 0; }
.blockquote:nth-of-type(1) { background-color: var(--indigo--50); color: var(--indigo--900); }
.blockquote:nth-of-type(2) { background-color: var(--cyan--50); color: var(--cyan--900); }
.blockquote:nth-of-type(3) { background-color: var(--emerald--50); color: var(--emerald--900); }
.blockquote:nth-of-type(4) { background-color: var(--yellow--50); color: var(--yellow--900); }
.blockquote:nth-of-type(5) { background-color: var(--fuchsia--50); color: var(--fuchsia--900); }
.blockquote:nth-of-type(6) { background-color: var(--orange--50); color: var(--orange--900); }
.blockquote:before { align-items: center; background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 60px; box-shadow: var(--box--shadow); content: "“"; display: flex; height: 40px; justify-content: center; left: 50%; font-family: Georgia; font-size: 48px; font-weight: 700; padding-top: 20px; position: absolute; top: -30px; transform: translateX(-50%); width: 60px; }
.blockquote.non-quote { padding: 24px; }
.blockquote.non-quote:before { display: none; }
.blockquote--action { text-align: center; }
.blockquote--action:empty { display: none; }
.blockquote--text { text-align: center; }
.blockquote--text:empty { display: none; }
.blockquote p { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; margin: 0; text-align: center; }
.blockquote p.blockquote--shrink { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
@media screen and (min-width: 1200px) { .blockquote p { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; } }
.blockquote strong { color: var(--neutrals--700); text-transform: uppercase; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; }
.blockquote cite { display: block; font-style: normal; margin-top: 16px; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }

/* Design System - Element: Button */
.button { align-items: center; background: var(--base---primary--action); border: solid 1px var(--base---primary--action); border-radius: 4px; color: var(--base---white); cursor: pointer; display: inline-flex; font-weight: 600; gap: 8px; height: 44px; justify-content: center; margin: 0; padding: 0 16px; text-align: center; white-space: nowrap; }
.button:hover { color: var(--base---white); text-decoration: none; }
.button.secondary { background: var(--base---white); border: solid 1px var(--neutrals--300); color: var(--base---black); }
.button.tertiary { background: var(--blue--50); border: solid 1px var(--blue--50); color: var(--base---primary--action); }
.button.text { background: transparent; border: solid 1px transparent; color: var(--base---primary--action); height: auto; padding: 0; }
.button.text.sm { height: auto; padding: 0; }
.button.soft { background: var(--blue--50); border: solid 1px var(--blue--50); color: var(--base---primary--action); height: 52px; padding: 0 24px; }
.button.plain { background: transparent; border: solid 1px transparent; color: var(--base---black); text-align: left; white-space: inherit; }
.button.plain.sm { height: auto; padding: 0; }
.button .icons { margin-left: -4px; }
.button.sm { height: 36px; padding: 0 12px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.button.md { padding: 0 20px; height: 48px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }

/* Design System - Component: Calculator */
.calculator { align-items: center; display: flex; gap: 24px; justify-content: center; padding: 12px 0; }
.calculator--active { overflow: hidden !important; }
.calculator.open .calculator--modal { opacity: 1; user-select: auto; visibility: visible; transform: scale(1); }
.calculator.open .calculator--overlay { opacity: 1; user-select: auto; visibility: visible; }
.calculator--additional { align-items: center; border-top: solid 1px var(--neutrals--300); cursor: pointer; display: flex; gap: 16px; padding: 16px 0 0; }
.calculator--additional .button { background: var(--base---white); color: var(--base---primary--action); }
.calculator--business-voicemail label { align-items: center; cursor: pointer; display: flex; flex-direction: row !important; gap: 12px !important; }
.calculator--business-voicemail input { display: none; width: fit-content; }
.calculator--business-voicemail input:checked + span { background: var(--base---primary--action); }
.calculator--business-voicemail input:checked + span::before { left: 21px; }
.calculator--business-voicemail span { background: var(--neutrals--200); border-radius: 31px; display: flex; height: 32px; padding: 2px; position: relative; width: 52px; transition: background 0.3s ease; }
.calculator--business-voicemail span::before { background: var(--base---white); border-radius: 31px; content: ""; display: block; height: 28px; position: absolute; top: 2px; left: 2px; width: 28px; transition: left 0.3s ease; }
.calculator--content { background: var(--base---white); border-radius: 8px; display: flex; flex-direction: column; gap: 16px; max-width: 375px; padding: 24px 24px 32px; width: 100%; }
@media screen and (min-width: 768px) { .calculator--content { max-width: 768px; } }
@media screen and (min-width: 1024px) { .calculator--content { max-width: 992px; } }
.calculator--container { display: flex; flex-direction: column-reverse; gap: 12px; }
@media screen and (min-width: 1024px) { .calculator--container { flex-direction: row; } }
.calculator--form { background: var(--neutrals--50); border: solid 1px var(--neutrals--300); border-radius: 8px; display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px; }
@media screen and (min-width: 768px) { .calculator--form { gap: 16px; padding: 24px; } }
.calculator--form input { border: solid 1px var(--neutrals--300); border-radius: 4px; font-family: inherit; padding: 12px 12px; }
.calculator--form label { display: flex; flex-direction: column; gap: 4px; }
.calculator--form strong { display: block; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.calculator--close { cursor: pointer; }
.calculator--modal { align-items: center; bottom: 0; left: 0; right: 0; top: 0; justify-content: center; display: flex; position: fixed; z-index: 9999999; visibility: hidden; opacity: 0; user-select: none; transition: opacity 0.3s ease, transform 0.3s ease; transform: scale(0.8); }
.calculator--overlay { background: var(--utility---overlay-1); position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 999999; visibility: hidden; opacity: 0; user-select: none; transition: opacity 0.3s ease; }
.calculator--expand { transform: rotate(0deg); transition: transform 0.5s ease; }
.calculator--expand.open { transform: rotate(180deg); }
.calculator--more { display: flex; flex-direction: column; gap: 12px; overflow: hidden; max-height: 0px; transition: max-height 0.7s ease; }
.calculator--more.open { max-height: 1000px; transition: max-height 0.5s ease; }
.calculator--plan { align-items: flex-start; background: var(--base---primary--action); border-radius: 8px; color: var(--base---white); display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 365px; padding: 16px; position: relative; text-align: center; width: 100%; }
@media screen and (min-width: 768px) { .calculator--plan { gap: 24px; padding: 24px; } }
@media screen and (min-width: 1024px) { .calculator--plan { align-items: center; flex-direction: column; max-width: 320px; } }
.calculator--plan .button { background: var(--base---white); color: var(--base---primary--action); flex: 1 1 100%; max-height: 48px; width: 100%; }
@media screen and (min-width: 768px) { .calculator--plan .button { flex: 1; max-width: 140px; width: fit-content; } }
@media screen and (min-width: 1024px) { .calculator--plan .button { max-width: 100%; width: 100%; } }
.calculator--plan .button:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.calculator--planCost { display: flex; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
@media screen and (min-width: 1024px) { .calculator--planCost { flex-direction: column; } }
.calculator--planDetails { align-items: flex-start; display: flex; flex-direction: column; flex: 1; text-align: left; }
@media screen and (min-width: 1024px) { .calculator--planDetails { align-items: center; gap: 24px; justify-content: center; text-align: center; width: 100%; } }
.calculator--planCurrency { align-items: flex-start; display: flex; justify-content: center; }
.calculator--planCurrency span:first-child { font-size: 20px; font-weight: 700; line-height: 28px; padding-top: 2px; }
.calculator--planCurrency span:nth-child(2) { font-size: 60px; font-weight: 900; line-height: 60px; letter-spacing: -1px; }
.calculator--planTitle { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; flex: 1 1 100%; text-align: left; }
@media screen and (min-width: 768px) { .calculator--planTitle { flex: 0; } }
.calculator--planInfo { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.calculator--text { flex: 1; }
.calculator--text p { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.calculator--title { flex: 1; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }
.calculator--titlebar { align-items: center; display: flex; }

/* Design System - Component: Card */
.card { background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 6px; box-shadow: var(--box--shadow); color: var(--base---black); display: flex; flex: 0 0 100%; flex-direction: column; overflow: hidden; position: relative; text-align: left; width: 100%; }
.card:focus-within { outline: solid 2px var(--base---primary--action); }
.card--action { padding-top: 12px; }
.card--action:after { align-items: center; background: var(--base---white); border: solid 1px var(--neutrals--300); border-radius: 4px; color: var(--base---black); content: "Read Article"; display: inline-flex; height: 36px; justify-content: center; margin: 0; padding: 0 12px; text-align: center; white-space: nowrap; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.card--highlight .card--action { background: var(--base---white); border-top: solid 1px var(--neutrals--200); flex: 1 0 100%; margin: 12px -16px -16px -16px; order: 2; padding: 8px 16px; width: calc(100% + 32px); }
.card--highlight .card--text { background: var(--neutrals--50); }
.card--horizontal { flex-direction: row; gap: 16px; padding: 16px; }
.card--horizontal .card--image { border-radius: 8px; height: 100px; flex: 0 0 100px; width: 100px; }
.card--horizontal .card--image img { left: 50%; height: 100%; top: 0; transform: translate(-50%, 0); width: auto; }
.card--horizontal .card--text { order: 1; padding: 0; }
.card--horizontal .card--text a { min-height: 28px; }
.card--image { background-color: var(--neutrals--200); background-size: cover; background-position: center center; border: solid 1px var(--neutrals--200); height: 160px; flex: 0 0 160px; overflow: hidden; position: relative; width: 100%; }
.card--image img { position: absolute; top: 50%; transform: translate(0, -50%); width: 100%; }
.card--mini { border: none; border-top: solid 1px var(--neutrals--200); border-radius: 0; box-shadow: none; padding: 8px; width: 100%; }
.card--mini .card--play { transform: scale(0.6) translate(-80%, -80%); }
.card--mini .card--image { flex: 0 0 80px; height: 80px; width: 80px; }
.card--mini .card--text a { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.card--play { align-items: center; background-color: var(--base---black); border-radius: 56px; color: var(--base---white); display: flex; justify-content: center; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); }
.card--play .icons { position: relative; left: 2px; }
.card--text { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; padding: 16px; order: 1; gap: 4px; }
.card--text a { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; color: var(--base---black); display: -webkit-box; min-height: 56px; overflow: hidden; outline: none; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card--text a::after { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 9; }
.card--text a:hover { text-decoration: none; }
.card--text p { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: var(--neutrals--600); display: -webkit-box; overflow: hidden; margin: 0 0 8px 0; min-height: 52px; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card--text small { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; color: var(--neutrals--500); }

/* Design System - Block: Features */
.catchall { display: flex; flex-direction: column; gap: 16px; padding: 80px 0; }
@media screen and (min-width: 1024px) { .catchall { flex-direction: row; } }
.catchall--item { border-radius: 10px; flex: 1; padding: 100px 60px; position: relative; text-align: center; }
.catchall--item strong { display: block; margin-bottom: 36px; font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; }
.catchall--item a:after { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; }
.catchall--item:first-child { background: var(--blue--50) url(https://www.projectbroadcast.com/m/wp-content/uploads/2022/10/catchall-left-bg.png); }
.catchall--item:last-child { background: #F5F3FF url(https://www.projectbroadcast.com/m/wp-content/uploads/2022/10/catchall-right-bg.png); }

/* Design System - Block: Commerical */
.commerical { margin-bottom: 48px; padding: 48px 0; }
.commerical--container { overflow: hidden; border-radius: 16px; position: relative; }
.commerical--overlay { background: url(https://i0.wp.com/www.projectbroadcast.com/m/wp-content/uploads/2023/01/project-broadcast-growing-a-business-overlay.png?w=1240&ssl=1); background-size: contain; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; z-index: 999; }
.commerical iframe { display: block; width: 100%; }

/* Design System - Block: Comparison */
.comparison--column { flex: 1; }
.comparison--columns { display: flex; flex-direction: column; gap: 48px; }
@media screen and (min-width: 768px) { .comparison--columns { flex-direction: row; } }
.comparison--container { margin: 0 auto; max-width: 1280px; padding: 48px 0; width: 100%; }
@media screen and (min-width: 1024px) { .comparison--container { padding: 48px 20px; } }
.comparison--headline { padding: 24px 0; text-align: center; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.comparison table { background: var(--base---white); border: solid 1px var(--neutrals--200); border-collapse: collapse; border-radius: 8px; box-shadow: var(--box--shadow); margin: 16px auto; position: relative; width: 100%; }
.comparison thead { background: var(--neutrals--100); border-bottom: solid 1px var(--neutrals--200); }
.comparison th { font-size: 12px; line-height: 16px; padding: 8px; }
.comparison th:first-child { font-size: 12px; font-weight: 700; padding-left: 12px; text-align: left; white-space: nowrap; }
@media screen and (min-width: 1024px) { .comparison th:first-child { font-size: 16px; padding-left: 24px; } }
.comparison th i { display: block; font-size: 12px; font-weight: 400; }
.comparison th.highlight { background: var(--base---primary--action); border-left: solid 4px var(--base---primary--action); border-right: solid 4px var(--base---primary--action); color: var(--base---white); padding: 0 8px 8px 8px; position: relative; }
.comparison th.highlight:before { background: var(--base---primary--action); border-top-right-radius: 8px; border-top-left-radius: 8px; content: ""; display: block; height: 12px; left: -4px; position: absolute; right: -4px; top: -12px; }
.comparison tr:nth-child(even) { background: var(--neutrals--50); }
.comparison tr:last-child td.highlight { border-left: solid 4px var(--base---primary--action); border-right: solid 4px var(--base---primary--action); position: relative; }
.comparison tr:last-child td.highlight span { background: var(--base---primary--action); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; bottom: -48px; color: var(--base---white); font-size: 10px; font-weight: 700; line-height: 16px; left: -4px; padding: 8px; position: absolute; right: -4px; }
@media screen and (min-width: 1024px) { .comparison tr:last-child td.highlight span { bottom: -32px; } }
.comparison td { font-size: 12px; padding: 16px 8px; text-align: center; width: 80px; }
@media screen and (min-width: 1024px) { .comparison td { font-size: 16px; width: 120px; } }
.comparison td.highlight { border-left: solid 4px var(--base---primary--action); border-right: solid 4px var(--base---primary--action); }
.comparison td:nth-child(4) { color: var(--green--600); font-weight: 600; }
.comparison td:first-child { font-weight: 700; padding-left: 12px; text-align: left; width: auto; white-space: nowrap; }
@media screen and (min-width: 1024px) { .comparison td:first-child { font-size: 16px; padding-left: 24px; } }

.cost { display: flex; flex-direction: column; gap: 16px; padding: 48px 0 36px; text-align: center; }
.cost--cell { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; border-right: solid 1px var(--neutrals--200); border-bottom: solid 1px var(--neutrals--200); display: flex; justify-content: flex-start; flex: 1; padding: 8px; }
@media screen and (min-width: 1024px) { .cost--cell { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; justify-content: center; } }
.cost--head { align-items: center; background: var(--neutrals--50); font-weight: 700; justify-content: flex-start; }
.cost--head span { color: var(--red--500); }
@media screen and (min-width: 1024px) { .cost--head { justify-content: center; } }
.cost--legal { font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; color: var(--neutrals--700); }
.cost--legal span { color: var(--red--500); }
.cost--row { display: flex; flex-direction: column; flex: 1; }
@media screen and (min-width: 1024px) { .cost--row { flex-direction: row; } }
.cost--table { border: solid 1px var(--neutrals--200); border-bottom: none; border-right: none; display: flex; flex-direction: row; }
@media screen and (min-width: 1024px) { .cost--table { flex-direction: column; } }
.cost--title { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }

/* Design System - Component: Dialog */
body.overlay { overscroll-behavior: none; overflow-y: hidden; height: 100%; }
body.overlay #app { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; }

.dialog { display: none; }
.dialog.active { display: block; }
.dialog.animate .dialog--container, .dialog.animate .dialog--box { opacity: 1; }
.dialog--box { background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 8px; box-sizing: border-box; color: var(--base---black); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: all 0.3s ease 0.6s; width: 100%; }
@media screen and (min-width: 1024px) { .dialog--box { max-width: 800px; min-height: 400px; } }
.dialog--container { align-items: center; background: rgba(32, 41, 56, 0.5); box-sizing: border-box; bottom: 0; display: flex; justify-content: center; left: 0; padding: 8px; opacity: 0; position: fixed; right: 0; transition: opacity 0.3s ease 0.3s; top: 0; z-index: 99999999; }
.dialog--content { padding: 24px 12px; }
.dialog--title { flex: 1; text-align: center; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
@media screen and (min-width: 1024px) { .dialog--title { font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 700; } }
.dialog--toolbar { align-items: center; background: var(--neutrals--50); border-bottom: solid 1px var(--neutrals--200); display: flex; position: relative; padding: 12px 52px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
@media screen and (min-width: 1024px) { .dialog--toolbar { height: 48px; } }
.dialog--toolbar button { background: var(--base---white); border: none; border: solid 1px var(--neutrals--200); color: var(--base---black); cursor: pointer; position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; }
.dialog--toolbar button:focus { border: solid 1px var(-base---primary-action); }
.dialog--toolbar button span { pointer-events: none; }

/* Design System - DLC */
.dlc { background-color: var(--indigo--50); background-image: url("https://projectbroadcast.com/wp-content/uploads/2024/03/10dlc-bg.png"); background-position: center top; background-size: 1720px auto; margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.dlc--actions { padding-top: 24px; }
.dlc--container { align-items: center; display: flex; flex-direction: column; padding: 0 20px; position: relative; margin: 0 auto; max-width: 1280px; padding: 36px 48px; text-align: center; width: 100%; }
.dlc--lead { color: var(--neutrals--600); font-size: 24px; font-weight: 400; line-height: 36px; letter-spacing: 0em; max-width: 800px; }
.dlc--title { font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }

/* Design System - Component: Dialog */
.event { align-items: center; background: var(--base---white); box-shadow: inset 8px 0 0 var(--indigo--200); border: solid 1px var(--neutrals--200); display: flex; flex-direction: column; height: 100%; padding: 24px; position: relative; }
@media screen and (min-width: 768px) { .event { gap: 24px; flex-direction: row; } }
@media screen and (min-width: 768px) { .event--image { flex: 0 0 120px; width: 120px; } }
.event--image img { display: block; width: 100%; }
.event--meta { color: var(--neutrals--600); margin-bottom: 12px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.event--title { color: var(--base---black); font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 700; }
.event--subtitle { color: var(--indigo--500); text-transform: uppercase; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; }
.event .button:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* Design System - Block: Featured */
.featured { margin-left: calc(50% - 50vw); max-width: 100vw; padding: 0 48px 48px; width: 100vw; }
.featured--container { background: var(--indigo--600) url(https://www.projectbroadcast.com/m/wp-content/uploads/2023/03/project-broadcast-featured-bg.png); background-size: cover; border-radius: 12px; color: var(--base---white); margin: 0 auto; max-width: 1220px; padding: 48px; position: relative; width: 100%; }
.featured strong { display: block; margin-bottom: 12px; max-width: 600px; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.featured p { max-width: 600px; }
.featured a:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.featured .tag { margin-bottom: 12px; }

/* Design System - Block: Features */
.features { padding: 48px 0; text-align: center; }
.features--container { margin: 0 auto; max-width: 1280px; padding: 0; width: 100%; }
@media screen and (min-width: 1024px) { .features--container { padding: 0 48px; } }
.features--headline { padding: 24px 0; text-align: center; }
@media screen and (min-width: 1024px) { .features--headline { padding: 48px 0; } }
.features--headline h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.features--item { padding: 0; text-align: left; width: 100%; }
@media screen and (min-width: 1024px) { .features--item { padding: 0 24px; } }
.features--item strong { display: block; margin-bottom: 4px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.features--item p { color: var(--neutrals--600); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.features--items { background: var(--base---white); border: solid 1px var(--neutrals--200); box-shadow: var(--shadow-----standard); border-radius: 10px; padding: 20px; }
@media screen and (min-width: 1024px) { .features--items { padding: 24px; } }
.features--list { padding: 4px 0; }
@media screen and (min-width: 1024px) { .features--list { padding: 4px 24px; } }
.features--title { align-items: center; background: var(--indigo--50); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; padding: 20px; text-align: center; }
.features--title h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }
@media screen and (min-width: 1024px) { .features--title h3 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; } }
.features--title p { color: var(--neutrals--600); margin: 0 0 0 12px; }

.flyout { align-items: center; background: var(--base---white); display: flex; flex-direction: column; max-height: 0; justify-content: center; overflow: hidden; top: 78px; transition: max-height 0.5s ease; width: 100vw; z-index: 999; }
@media screen and (min-width: 1024px) { .flyout { border: none; border-top: solid 1px var(--neutrals--200); box-shadow: var(--box--shadow); display: none; left: 50%; max-height: 1000px; overflow: visible; position: absolute; transform: translateX(calc(-50% - 100px)); } }
.flyout--container { border-bottom: solid 1px var(--neutrals--200); display: flex; flex-direction: column; flex-wrap: wrap; max-width: 1100px; width: 100%; }
@media screen and (min-width: 1024px) { .flyout--container { border: none; flex-direction: row; } }
.flyout--aside { padding: 0 24px; }
@media screen and (min-width: 1024px) { .flyout--aside { flex: 0 0 300px; padding: 24px 24px 24px 0; width: 300px; }
  .flyout--aside .taxonomy { padding-left: 0; } }
.flyout--foot { align-items: center; background: var(--neutrals--100); display: flex; justify-content: center; width: 100%; }
@media screen and (min-width: 1024px) { .flyout--foot { flex: 0 0 100%; } }
.flyout--foot .flyout--container { gap: 16px; padding: 24px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.flyout--foot .flyout--container a { padding: 0 8px; }
@media screen and (min-width: 1024px) { .flyout--foot .flyout--container { padding: 24px 48px; } }
.flyout--foot a { color: var(--neutrals--600); text-decoration: none; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.flyout--foot strong { padding: 0 8px; }
.flyout--main { display: flex; flex: 1; flex-direction: column; padding: 24px; }
@media screen and (min-width: 1024px) { .flyout--main { flex-direction: row; } }

.taxonomy { flex: 1; padding-bottom: 24px; }
@media screen and (min-width: 1024px) { .taxonomy { padding: 0 16px; } }
.taxonomy--body { display: flex; flex-direction: column; padding: 12px 0; }
@media screen and (min-width: 1024px) { .taxonomy--body { flex-direction: row; } }
.taxonomy--desc { border-radius: 4px; padding: 4px 8px; position: relative; transition: background 0.3s ease; }
.taxonomy--desc:hover { background: var(--blue--50); }
.taxonomy--desc a { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.taxonomy--desc p { color: var(--neutrals--600); margin: 0; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.taxonomy--desc strong { font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.taxonomy--foot a { align-items: center; border-radius: 4px; color: var(--base---primary--action); display: flex; gap: 4px; padding: 8px; text-decoration: none; transition: background 0.3s ease; width: fit-content; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.taxonomy--foot a:hover { background: var(--blue--50); text-decoration: none; }
.taxonomy--groups { display: flex; flex-direction: column; gap: 16px; }
.taxonomy--head { border-bottom: solid 1px var(--neutrals--200); padding: 0 8px 12px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.taxonomy--list { display: flex; flex: 1; flex-direction: column; }
.taxonomy--list a { align-items: center; border-radius: 4px; color: var(--base---black); display: flex; gap: 8px; padding: 8px; text-decoration: none; transition: background 0.3s ease; }
.taxonomy--list a svg { height: 20px; width: 20px; }
.taxonomy--list a:hover { background: var(--blue--50); text-decoration: none; }

/* Design System - Block: Footer */
.footer { background: var(--neutrals--50); border-top: solid 1px var(--neutrals--200); font-size: 12px; line-height: 16px; }
.footer--brand { color: var(--neutrals--700); display: none; margin: 0 auto 24px; max-width: 240px; }
@media screen and (min-width: 1024px) { .footer--brand { display: block; margin: 0 0 24px; } }
.footer--brand svg { fill: currentColor; }
.footer--columns { display: flex; flex: 1; flex-direction: column; }
@media screen and (min-width: 1024px) { .footer--columns { flex-direction: row; } }
.footer--container { flex-direction: column-reverse; display: flex; gap: 24px; margin: 0 auto; max-width: 1280px; padding: 0 0 24px 0; width: 100%; }
@media screen and (min-width: 1024px) { .footer--container { flex-direction: row; gap: 80px; padding: 48px 24px; } }
.footer--download { align-items: center; display: flex; flex-direction: column; gap: 8px; padding: 24px; }
@media screen and (min-width: 1024px) { .footer--download { flex-direction: row; justify-content: flex-start; padding: 24px 0; } }
.footer--download .button { width: fit-content; }
.footer--info { text-align: center; margin: 0 auto; max-width: 760px; width: 100%; }
@media screen and (min-width: 1024px) { .footer--info { text-align: left; max-width: 400px; } }
.footer--info p { color: var(--neutrals--700); font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.footer--item { flex: 1; }
@media screen and (min-width: 1024px) { .footer--item { padding-right: 12px; } }
.footer--item:first-child button { border: none; }
.footer--item strong { color: var(--neutrals--700); display: none; font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 16px; margin-bottom: 16px; text-transform: uppercase; }
@media screen and (min-width: 1024px) { .footer--item strong { display: block; } }
.footer--item button { align-items: center; background: transparent; border: none; border-top: solid 1px var(--neutrals--200); display: flex; height: 40px; justify-content: flex-start; padding: 0 20px; width: 100%; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
@media screen and (min-width: 1024px) { .footer--item button { display: none; } }
.footer--item button:after { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7763 13.2679L16.3418 7.70237C16.7751 7.28023 16.7751 6.58038 16.3418 6.15825C15.9086 5.725 15.2198 5.725 14.7977 6.15825L9.99869 10.9572L5.19969 6.15824C4.76645 5.725 4.07771 5.725 3.65557 6.15824C3.4445 6.36931 3.33341 6.65814 3.33341 6.93586C3.33341 7.21358 3.4445 7.5024 3.65557 7.71347L9.22108 13.279C9.65432 13.7122 10.3431 13.7122 10.7652 13.279L10.7763 13.2679Z' fill='black'/%3E%3C/svg%3E%0A"); content: ""; display: block; height: 20px; margin-left: auto; transition: transform 0.3s ease; width: 20px; }
.footer--item button[aria-expanded=true]:after { transform: rotate(180deg); }
.footer--item ul { display: flex; flex-direction: column; list-style-type: none; margin: 0; padding: 0; }
.footer--item ul[aria-hidden] { height: fit-content; overflow: scroll; transition: height 0.3s ease; -webkit-overflow-scrolling: touch; }
.footer--item ul[aria-hidden=true] { height: 0px; overflow: hidden; }
@media screen and (min-width: 1024px) { .footer--item ul[aria-hidden=true] { height: fit-content; } }
.footer--item li:last-child { margin-bottom: 12px; }
.footer--item a { color: var(--base---black); display: block; padding: 8px 20px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
@media screen and (min-width: 1024px) { .footer--item a { padding: 4px 0; } }
.footer--social { display: flex; justify-content: center; margin: 24px 0 12px; gap: 16px; }
@media screen and (min-width: 1024px) { .footer--social { justify-content: flex-start; } }
.footer--story { padding: 0 20px; }
@media screen and (min-width: 1024px) { .footer--story { padding: 0; } }
.footer--story a { align-items: center; color: var(--base---black); display: flex; gap: 4px; justify-content: center; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
@media screen and (min-width: 1024px) { .footer--story a { justify-content: flex-start; } }
.footer--legal p { color: var(--neutrals--700); margin: 0; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0em; }
.footer--legal a { color: var(--neutrals--700); }

/* Design System - Component: Gallery */
body.gallery--open { height: 100vh; overflow: hidden; }
body.gallery--open .gallery { pointer-events: initial; visibility: visible; }
body.gallery--open .gallery--container { background: var(--base---white); opacity: 1; transform: scale(1); }

.gallery { bottom: 0; left: 0; position: fixed; pointer-events: none; right: 0; top: 0; visibility: hidden; z-index: 9999999; }
.gallery button { background: transparent; border: none; border-left: solid 1px var(--neutrals--200); cursor: pointer; height: 48px; position: absolute; right: 0; top: 0; width: 48px; }
.gallery--body { height: 100%; overflow: scroll; text-align: center; }
.gallery--body img { max-width: 1024px; width: 100%; }
.gallery--container { background: var(--base---white); height: 100%; opacity: 0; transform: scale(0.89); transition: all 0.5s ease 0.3s; }
.gallery--title { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.gallery--toolbar { align-items: center; border-bottom: solid 1px var(--neutrals--200); display: flex; height: 48px; justify-content: center; padding: 0 12px; position: relative; }

.glossary { align-items: center; display: flex; flex-direction: column; justify-content: center; margin-left: calc(50% - 50vw); width: 100vw; padding: 40px 20px 160px; }
.glossary--alphabet { display: flex; gap: 8px; padding: 24px 0; }
.glossary--alphabet a { color: var(--base---black); font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.glossary--anchor { border-bottom: solid 1px var(--neutrals--200); color: var(--base---black); padding: 12px 0; margin: 24px 0; font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }
.glossary--container { color: var(--neutrals--700); max-width: 760px; position: relative; width: 100%; font-size: 18px; font-weight: 400; line-height: 32px; letter-spacing: 0em; }
.glossary--container .breadcrumb { display: flex; margin: 0; padding: 0; }
.glossary--container .breadcrumb li { display: flex; list-style-type: none; margin: 0; padding: 0; }
.glossary--container .breadcrumb li:after { color: var(--neutrals--700); content: "/"; display: block; padding: 0 8px; }
.glossary--container .breadcrumb li:last-child::after { display: none; }
.glossary--container h1 { color: var(--base---black); margin-bottom: 24px; font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }
.glossary--container h4 { color: var(--base---black); font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }
.glossary--container h4:first-child { margin: 0; }
.glossary--container li { margin: 0 0 12px; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.glossary--letters { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.glossary--letters li { background: var(--neutrals--100); border-radius: 8px; color: var(--base---black); font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; list-style-type: none; margin: 0; padding: 16px; position: relative; flex: 0 0 100%; }
.glossary--letters a { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.glossary--letters p { color: var(--neutrals--700); margin: 0; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.glossary--list { margin: 0; max-width: 760px; width: 100%; }

.guides { background: var(--neutrals--50); margin-left: calc(50% - 50vw); max-width: 100vw; overflow: hidden; width: 100vw; }
.guides--avatar { background: var(--base---white); border: solid 1px var(--neutrals--300); border-radius: 200px; height: 80px; flex: 0 0 80px; margin-top: 4px; overflow: hidden; padding: 10px; width: 80px; }
.guides--avatar img { aspect-ratio: 1/1; display: block; height: auto; width: 100%; }
.guides--container { display: flex; flex-direction: column; gap: 16px; padding: 120px 20px; margin: 0 auto; max-width: 720px; width: 100%; }
.guides--head { display: flex; flex-direction: column; gap: 24px; }
@media screen and (min-width: 1024px) { .guides--head { flex-direction: row; } }
.guides--head h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.guides--meta { align-items: center; color: var(--neutrals--500); display: flex; gap: 8px; padding: 8px 0; }
.guides--meta span { border-right: solid 1px var(--neutrals--300); display: flex; height: 16px; line-height: 16px; padding-right: 8px; }
.guides--meta span:last-child { border: none; }

.hamburger:focus { outline: solid 2px var(--base---primary--action); }
.hamburger:hover { border-radius: 4px; }
.hamburger button { background: transparent; border: none; cursor: pointer; height: 48px; padding: 0; position: relative; width: 48px; }
.hamburger span { background: black; height: 2px; left: 50%; position: absolute; transition: background 10ms 300ms ease; transform: translate(-51%, -50%); top: 50%; width: 24px; }
.hamburger span:after, .hamburger span:before { background: black; content: ""; height: 2px; left: 0; position: absolute; transition: top 300ms 350ms ease, transform 300ms 50ms ease; width: 24px; }
.hamburger span:after { top: 8px; }
.hamburger span:before { top: -8px; }
.hamburger--open .header--navigation { display: flex; }
.hamburger--open .hamburger button span { background: transparent; transition: background 10ms 300ms ease; }
.hamburger--open .hamburger button span:after, .hamburger--open .hamburger button span:before { transition: top 300ms 50ms ease, transform 300ms 350ms ease; }
.hamburger--open .hamburger button span:after { top: 0; transform: rotate(-45deg); }
.hamburger--open .hamburger button span:before { top: 0; transform: rotate(45deg); }

.header { align-items: center; background: var(--base---white); border-bottom: solid 1px var(--neutrals--200); display: flex; flex-direction: column; left: 0; position: fixed; right: 0; top: 0; z-index: 99999; }
.header--actions { display: flex; justify-content: center; padding: 24px 8px; }
@media screen and (min-width: 1200px) { .header--actions { padding: 20px 0; } }
.header--actions ul { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; list-style-type: none; margin: 0; padding: 0; }
.header--branding { border-radius: 4px; height: 70px; overflow: hidden; min-width: 240px; position: relative; width: 240px; }
@media screen and (min-width: 1200px) { .header--branding { left: 0; margin-right: 0; min-width: 180px; width: 180px; } }
.header--branding:focus, .header--branding:focus-within { outline: solid 2px var(--base---primary--action); }
.header--branding a { border-radius: 4px; }
.header--branding a:focus { outline: solid 2px var(--base---primary--action); }
.header--branding .branding { padding: 0 20px; }
.header--branding svg { left: -25px; position: relative; top: 11px; width: 250px; }
@media screen and (min-width: 1200px) { .header--branding svg { left: -28px; top: 15px; width: 200px; } }
.header--container { align-items: center; display: flex; height: 80px; gap: 16px; padding: 0 20px; position: relative; margin: 0 auto; max-width: 1280px; width: 100%; }
.header--hamburger { align-items: center; display: flex; flex: 1; justify-content: flex-end; }
@media screen and (min-width: 1200px) { .header--hamburger { display: none; } }
.header--navigation { background: var(--base---white); bottom: 0; box-shadow: var(--box--shadow); display: none; height: calc(100vh - 81px); flex: 1; flex-direction: column; left: 0; overflow: auto; position: absolute; right: 0; top: 81px; transition: transform 0.5s ease; }
@media screen and (min-width: 1200px) { .header--navigation { background: transparent; box-shadow: none; display: flex; flex-direction: row; flex: 1; height: 80px; overflow: visible; position: unset; transform: translateY(0); top: 80px; } }
.header--utilities { border-bottom: solid 1px var(--neutrals--200); width: 100%; }
.header--utilities .header--container { justify-content: flex-end; height: 32px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.header--utilities .header--container a { color: var(--neutrals--600); display: block; padding: 8px 0; }

/* Design System - Component: Headline */
.headlines { background-size: cover; background-position: center center; background-repeat: no-repeat; text-align: center; }
.headlines.tall { padding: 120px 0; }
.headlines.full { margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.headlines.short { padding: 24px; }
.headlines--container { padding: 24px; max-width: 780px; margin: 0 auto; width: 100%; }
.headlines strong { color: var(--base---black); display: block; margin: 0; }
.headlines p { color: var(--neutrals--700); }

/* Design System - Block: Hero */
.hero { align-items: center; background: var(--neutrals--50); display: flex; justify-content: center; margin: 0 -24px; max-width: 100vw; overflow: hidden; width: 100vw; }
@media screen and (min-width: 1024px) { .hero { flex-direction: row; margin-right: 0; margin-left: calc(50% - 50vw); height: 600px; } }
.hero--actions { align-items: center; display: flex; flex-direction: column; gap: 12px; }
@media screen and (min-width: 1024px) { .hero--actions { flex-direction: row; } }
.hero--actions .button { width: fit-content; }
.hero--container { display: flex; flex-direction: column-reverse; justify-content: center; max-width: 1280px; padding: 0 20px; }
@media screen and (min-width: 1024px) { .hero--container { flex-direction: row; gap: 0px; height: 600px; } }
.hero--image { align-items: center; display: flex; flex: 1; justify-content: flex-end; width: 100%; }
.hero--image img { height: auto; width: 100%; }
.hero--text { align-items: center; display: flex; flex: 0 0 100%; flex-direction: column; justify-content: center; max-width: 100vw; padding: 24px; text-align: center; }
@media screen and (min-width: 1024px) { .hero--text { align-items: flex-start; flex: 0 0 440px; padding: 0; text-align: left; } }
.hero--text h1 { margin: 0 0 12px 0; }

/* Design System - Block: Highlights */
.highlights { display: flex; flex-direction: column; gap: 48px; padding: 48px 0; }
@media screen and (min-width: 768px) { .highlights { flex-direction: row; gap: 80px; padding: 80px 0px 48px; } }
.highlights--actions { padding: 24px 0; text-align: center; }
.highlights--feature { display: flex; flex-direction: column; gap: 4px; }
.highlights--headline { font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -0.01em; }
.highlights--icon { align-items: center; border-radius: 12px; display: flex; flex: 0 0 58px; height: 58px; justify-content: center; width: 58px; }
.highlights--lead { color: var(--neutrals--600); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.highlights--list { flex: 1; }
@media screen and (min-width: 1024px) { .highlights--list { flex: 0 0 56%; } }
.highlights--list ul { display: flex; flex-wrap: wrap; list-style-type: none; column-gap: 36px; margin: 0; padding: 0; row-gap: 24px; }
.highlights--list li { display: flex; gap: 20px; list-style-type: none; margin: 0; padding: 0; }
@media screen and (min-width: 1024px) { .highlights--list li { flex: 0 0 calc(50% - 18px); } }
.highlights--list li strong { color: var(--base---black); font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.highlights--list li p { color: var(--neutrals--600); font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.highlights--subtext { color: var(--blue--500); font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0.07em; text-transform: uppercase; }
.highlights--text { display: flex; flex-direction: column; flex: 1; gap: 12px; }
.highlights--text .button { width: fit-content; }

/* Design System - Elements: Icons */
.icons { align-items: center; display: inline-flex; justify-content: center; height: 24px; width: 24px; }
.icons.lg { height: 48px; width: 48px; }
.icons.md { height: 36px; width: 36px; }
.icons.sm { height: 20px; width: 20px; }
.icons.xs { height: 16px; width: 16px; }
.icons svg { fill: currentColor; flex: 1; }

/* Design System - Block: Industries */
.industries { border: solid 1px var(--neutrals--200); border-radius: 8px; display: flex; gap: 16px; padding: 24px; position: relative; }
.industries--text p { margin: 0 0 12px 0; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.industries--text a:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* Design System - Block: Intro */
.intro { background-size: 2800px 600px; background-position: center center; margin-bottom: 48px; margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; text-align: center; }
.intro h1 { color: var(--base---black); margin: 0; }
.intro p, .intro strong { color: var(--neutrals--600); }
.intro.short .intro--container { padding: 160px 24px 40px; }
.intro--actions { display: flex; gap: 12px; justify-content: center; }
.intro--container { margin: 0 auto; max-width: 800px; padding: 180px 24px 80px; width: 100%; }
.intro--subtext { color: var(--neutrals--600); margin-top: 24px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }

/* Design System - Component: Join */
.joins { padding: 0; }
@media screen and (min-width: 1024px) { .joins { padding: 48px; } }
.joins--container { align-items: center; border: solid 1px var(--neutrals--200); box-shadow: var(--shadow-----standard); border-radius: 12px; display: flex; flex-direction: column-reverse; padding-top: 24px; }
@media screen and (min-width: 1024px) { .joins--container { flex-direction: row; padding-top: 0; } }
.joins--image img { display: block; height: auto; width: 100%; }
.joins--text { padding: 20px; max-width: 400px; text-align: center; width: 100%; }
@media screen and (min-width: 1024px) { .joins--text { text-align: left; padding: 48px; } }
.joins--text strong { display: block; margin-bottom: 12px; }
.joins--text p { color: var(--neutrals--500); }

/* Design System - Block: Lead */
.leads { background: var(--indigo--50); margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.leads--container { align-items: center; display: flex; flex-direction: column; gap: 24px; margin: 0 auto; max-width: 1280px; min-height: 600px; padding: 120px 20px 48px; width: 100%; }
@media screen and (min-width: 1024px) { .leads--container { flex-direction: row; gap: 80px; padding: 100px 48px 48px; } }
.leads--expand { height: 0; overflow: hidden; text-align: left; }
.leads--form { margin-left: auto; max-width: 400px; width: 100%; }
.leads--new { background: var(--base---white); border-radius: 8px; border: solid 1px var(--neutrals--200); box-shadow: var(--box--shadow); color: var(--neutrals--600); padding: 24px; margin-bottom: 12px; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.leads--new strong { display: block; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.leads--support { background: var(--base---white); border-radius: 8px; border: solid 1px var(--neutrals--200); box-shadow: var(--box--shadow); color: var(--neutrals--600); padding: 24px; margin-bottom: 12px; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.leads--support strong { display: block; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.leads--text { display: flex; flex-direction: column; gap: 8px; text-align: center; }
@media screen and (min-width: 1024px) { .leads--text { text-align: left; } }
.leads--text h1, .leads--text small, .leads--text p { max-width: 560px; width: 100%; }
.leads--text small { color: var(--neutrals--600); font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0.07em; text-transform: uppercase; }
.leads--text h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
@media screen and (min-width: 1024px) { .leads--text h1 { font-size: 40px; font-weight: 900; line-height: 44px; letter-spacing: -0.01em; } }
.leads--text p { color: var(--neutrals--600); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
@media screen and (min-width: 1024px) { .leads--text p { font-size: 24px; font-weight: 400; line-height: 36px; letter-spacing: 0em; } }

/* Design System - Component: Listview */
.listview { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 20px 0; }
@media screen and (min-width: 1024px) { .listview.columns--two li { flex: 0 0 50%; width: 50%; } }
@media screen and (min-width: 1024px) { .listview.columns--four li { flex: 0 0 25%; width: 25%; } }
@media screen and (min-width: 1024px) { .listview.columns--five li { flex: 0 0 20%; width: 20%; } }
.listview.list { flex-direction: column; }
.listview.list li { flex: 0 0 100%; width: 100%; padding: 0 0 12px 0; }
.listview.edge { margin: 0 -24px; }
.listview li { flex: 0 0 100%; list-style-type: none; margin: 0; padding: 8px; width: 100%; }
@media screen and (min-width: 1024px) { .listview li { flex: 0 0 33.33%; width: 33.33%; } }

/* Design System - Block: Media */
.media { align-items: center; display: flex; flex-direction: column-reverse; gap: 24px; padding: 24px 0; }
@media screen and (min-width: 1024px) { .media { flex-direction: row; gap: 80px; } }
.media.long .media--image { flex: 0 0 100%; width: 100%; }
@media screen and (min-width: 1024px) { .media.long .media--image { flex: 0 0 calc(45% - 80px); width: calc(45% - 80px); } }
@media screen and (min-width: 1024px) { .media.long .media--text { flex: 0 0 55%; width: 55%; } }
@media screen and (min-width: 1024px) { .media.reverse { flex-direction: row-reverse; } }
.media--subtitle { color: var(--neutrals--600); margin-bottom: -12px; text-transform: uppercase; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.media--copy { color: var(--neutrals--700); }
.media--image { flex: 0 0 100%; width: 100%; }
@media screen and (min-width: 1024px) { .media--image { flex: 0 0 calc(55% - 80px); width: calc(55% - 80px); } }
.media--text { display: flex; flex-direction: column; gap: 16px; }
@media screen and (min-width: 1024px) { .media--text { flex: 0 0 45%; width: 45%; } }
.media--text strong { display: block; }
.media--text ul { color: var(--neutrals--700); margin: 0 0 0 20px; padding: 0; }
.media--text ul li { margin-bottom: 8px; }
.media img { display: block; width: 100%; }

.nav { display: flex; }
@media screen and (min-width: 1200px) { .nav { display: flex; flex: 1; height: 80px; } }
.nav--primary { align-items: center; background: transparent; border: none; border-bottom: solid 1px var(--neutrals--200); cursor: pointer; color: var(--base---black); display: flex; font-family: inherit; gap: 4px; justify-content: space-between; padding: 16px 24px; position: relative; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 500; flex: 1; width: 100%; }
@media screen and (min-width: 1200px) { .nav--primary { border: none; padding: 28px 8px; } }
@media screen and (min-width: 1200px) { .nav ul li:nth-child(n+4) .nav--primary { padding: 28px 12px; } }
.nav--primary:hover { color: var(--base---black); text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; flex-direction: column; }
@media screen and (min-width: 1200px) { .nav ul { flex-direction: row; } }
.nav ul li { display: flex; flex-direction: column; margin: 0; padding: 0; }
@media screen and (max-width: 1200px) { .nav ul li.active .flyout { display: flex; max-height: 2000px; } }
@media screen and (max-width: 1200px) { .nav ul li.active .nav--primary .icons { transform: rotate(180deg); } }
.nav ul li .icons { transition: transform 0.3s ease; }
@media screen and (min-width: 1200px) { .nav ul li:hover .flyout { display: flex; } }
@media screen and (min-width: 1200px) { .nav ul li:hover .nav--primary .icons { transform: rotate(180deg); } }

/* Design System - Block: Media */
.onboarding { margin: 48px 0; }
.onboarding ul { display: flex; flex-direction: column; gap: 36px; list-style-type: none; margin: 0; padding: 0; }
@media screen and (min-width: 1024px) { .onboarding ul { flex-direction: row; } }
.onboarding ul img { margin: 0 auto; max-width: 140px; width: 100%; }
.onboarding ul li { border: solid 1px var(--neutrals--100); border-radius: 6px; box-shadow: var(--box--shadow); padding: 48px; display: flex; flex-direction: column; flex: 1; gap: 12px; text-align: center; }
.onboarding ul p { font-size: 18px; font-weight: 400; line-height: 32px; letter-spacing: 0em; }
.onboarding ul strong { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }

/* Design System - Block: Pillars */
.pillars { padding: 80px 24px; }
.pillars--icon { align-items: center; background: var(--blue--50); border-radius: 12px; display: flex; justify-content: center; height: 48px; width: 48px; }
.pillars ul { align-items: center; display: flex; flex-direction: column; list-style-type: none; gap: 36px; margin: 0 auto; max-width: 1280px; padding: 0; width: 100%; }
@media screen and (min-width: 1024px) { .pillars ul { align-items: flex-start; flex-direction: row; } }
.pillars li { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: flex-start; margin: 0; max-width: 600px; padding: 0; text-align: center; }
.pillars li strong { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }

/* Design System - Block: Plans */
.plans--currency { display: flex; font-size: 36px; font-weight: 800; gap: 4px; list-style-type: none; padding: 0; margin: 0; }
.plans--currency span { letter-spacing: -1px; }
.plans--currency span:first-child { align-items: flex-start; display: flex; font-size: 18px; letter-spacing: 0; line-height: 16px; }
.plans--currency span:last-child { align-items: flex-end; color: var(--neutrals--500); display: flex; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 8px; }
.plans--exclusive { background: var(--blue--50); border-radius: 16px; display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; margin: 0 0 0 8px; padding: 12px; }
@media screen and (min-width: 768px) { .plans--exclusive { padding: 16px; } }
@media screen and (min-width: 768px) { .plans--exclusive li { flex: 0 0 33.33% !important; width: 33.33% !important; } }
.plans--exclusiveTitle { margin: 0 0 12px 0; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; flex: 0 0 100%; padding: 8px 8px 0; width: 100%; }
.plans--exclusiveTitle strong { display: block; }
.plans--item { background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 10px; box-shadow: var(--shadow-----standard); display: flex; flex-direction: column; gap: 24px; list-style-type: none; margin: 0; padding: 24px; position: relative; transition: transform 0.3s ease; }
.plans--item:hover { transform: scale(1.05); z-index: 9; }
.plans--item:focus-within { outline: solid 1px var(--base---primary--action); transform: scale(1.05); }
.plans--item small { color: var(--neutrals--500); display: block; font-size: 12px; line-height: 16px; }
.plans--item a.button:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.plans--item .plans--freetrial a { position: relative; z-index: 1 }
.plans--item .tooltip { position: absolute; left: 126px; top: -3px; }
.plans--item .tooltip svg { fill: var(--neutrals--500); }
.plans--item .tooltip table th, .plans--item .tooltip table td { padding: 1px 4px; }
@media screen and (min-width: 1024px) { .plans--push { margin-top: 70px; } }
.plans--highlight { background: var(--base---primary--action); color: var(--base---white); }
.plans--highlight .button { background: var(--base---white); color: var(--base---primary--action); }
.plans--highlight .plans--currency span:last-child { color: var(--neutrals--200); }
.plans--highlight .plans--meta small { color: var(--neutrals--200); }
.plans--highlight .plans--meta small:first-child { color: var(--base---white); }
.plans--highlight .plans--popular { display: block; }
.plans--highlight .plans--footer  .plans--freetrial a{ color: var(--base---white); }

.plans--meta { position: relative; }
.plans--meta small:first-child { color: var(--base---primary--action); font-weight: 700; }
.plans--popular { color: var(--base---white); background: var(--base---black); border-radius: 20px; display: none; left: 50%; padding: 6px 16px; position: absolute; top: -14px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; }
.plans.monthly [data-term=year] { display: none; }
.plans.yearly [data-term=month] { display: none; }

.plans--footer { text-align:center; font-size: 12px; font-weight: 700;}
.plans--footer .plans--freetrial { }

/* Design System - Components: Player */
.player { border: solid 1px var(--neutrals---neutrals--200); border-radius: 8px; box-shadow: var(--shadow-----standard); overflow: hidden; padding-bottom: 56.25%; position: relative; }
.player iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

/* Design System - Block: Questions */
.questions--container { margin: 0 auto; max-width: 1280px; padding: 0; width: 100%; }
@media screen and (min-width: 1024px) { .questions--container { padding: 0 48px; } }
@media screen and (min-width: 1024px) { .questions--item { padding-right: 24px; } }
.questions--item p { color: var(--neutrals--600); font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.questions--item h3 { display: block; margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }

/* Design System - Component: Quote */
.quotes { background: var(--base---white); border-radius: 12px; box-shadow: var(--shadow-----standard); color: var(--neutrals--600); display: flex; flex-direction: column; justify-content: center; gap: 16px; margin: 12px; padding: 48px 48px 12px; position: relative; }
.quotes author { border-top: solid 1px var(--neutrals--200); color: var(--neutrals--600); display: block; padding: 16px 0; text-align: left; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 400; }
.quotes p { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0em; margin: 0; }
.quotes--icon { align-items: center; background: var(--red--300); border-radius: 48px; box-shadow: var(--shadow-----standard); color: var(--base---white); display: flex; height: 48px; justify-content: center; left: 24px; position: absolute; top: -24px; width: 48px; }
.quotes--icon svg { position: relative; left: -2px; }

/* Design System - Block: 3rd Party Ratings */
.ranking { align-items: center; background: #EEF2FE; display: flex; justify-content: center; padding: 40px 0; }
.ranking .headline--small { color: var(--base---black); }
.ranking--container { display: flex; flex-direction: column; row-gap: 24px; flex-wrap: wrap; max-width: 1280px; padding: 0 24px; width: 100%; }
.ranking--text { text-align: center; width: 100%; }
.ranking--text strong { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; }
.ranking--text p { font-size: 22px; line-height: 32px; margin: 0 auto; max-width: 800px; }
.ranking--item { align-items: center; display: flex; flex: 1; justify-content: center; }
.ranking--item img { height: 60px; display: block; width: auto; }
@media screen and (min-width: 1024px) { .ranking--container { flex-direction: row; }
  .ranking--item:nth-child(2) { justify-content: flex-end; }
  .ranking--item:nth-child(3) { flex: 0 0 276px; }
  .ranking--item:nth-child(4) { justify-content: flex-start; }
  .ranking--item img { height: 80px; } }

/* Design System - Block: Recent */
.recent { margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.recent.gray { background: var(--neutrals--50); }
.recent--actions { align-items: center; display: flex; justify-content: center; padding: 12px 24px 24px; }
.recent--container { padding: 60px 12px; margin: 0 auto; max-width: 1280px; width: 100%; }

.related { padding: 80px 0; margin-left: calc(50% - 50vw); width: 100vw; }
.related--container { padding: 0 20px; margin: 0 auto; max-width: 1280px; }
.related--list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.related--list .card { flex: 1; max-width: 33%; }

/* Design System - Block: Statistics */
.statistics ul { display: flex; flex-direction: column; gap: 16px; margin: -48px 0 24px; padding: 0; list-style-type: none; }
@media screen and (min-width: 1024px) { .statistics ul { flex-direction: row; } }
.statistics ul strong { font-family: alternate-gothic-atf, sans-serif; font-weight: 600; font-style: normal; font-size: 100px; line-height: 80px; letter-spacing: -3px; }
.statistics li { color: var(--neutrals--600); display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; text-align: center; }
@media screen and (min-width: 1024px) { .statistics li { text-align: left; } }

.step { background: var(--neutrals--50); background: var(--base---white); border: solid 1px var(--neutrals--200); box-shadow: var(--box--shadow); border-radius: 8px; display: flex; flex-direction: column; gap: 16px; margin: 24px 0; padding: 16px; }
.step--action { position: absolute; right: -1px; top: -1px; }
.step--action .button.sm { background: transparent; border-radius: 0; border-bottom-left-radius: 4px; padding: 0 8px; }
.step--action .button .sm { margin-left: 0; }
.step--dialog { align-items: center; border: 1px solid var(--neutrals--200); background: var(--base---white); box-shadow: 2px 4px 9px 0px rgba(187, 187, 187, 0.3); border-radius: 4px; bottom: 12px; display: flex; gap: 12px; opacity: 0; padding: 12px 16px 12px 20px; position: absolute; transition: opacity 0.5s ease; user-select: none; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 500; }
.step--dialog:before { background: var(--base---primary--action); border-radius: 4px; content: ""; display: block; height: 30px; left: 8px; position: absolute; width: 4px; }
.step--head { display: flex; flex-direction: column; gap: 16px; }
@media screen and (min-width: 1024px) { .step--head { flex-direction: row; } }
.step--message { background: var(--indigo--100); border-radius: 12px; color: var(--indigo--900); max-width: 280px; padding: 12px; width: 100%; }
.step--number { align-items: center; background: var(--indigo--100); border-radius: 80px; color: var(--indigo--900); display: flex; height: 40px; flex: 0 0 40px; justify-content: center; width: 40px; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.step--stage { align-items: center; aspect-ratio: 9/5 auto; border: solid 1px var(--neutrals--300); border-radius: 4px; display: flex; justify-content: center; overflow: hidden; padding: 40px 0 12px; position: relative; }
@media screen and (min-width: 1024px) { .step--stage { padding: 0; } }
.step--stage.active .step--dialog { opacity: 1; }
.step--text strong { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.step--text p { color: var(--neutrals--600); margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }

/* Design System - Component: Success Blocks */
.success--card { align-items: center; border: solid 1px var(--neutrals--200); box-shadow: var(--shadow-----standard); border-radius: 10px; display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 0; padding: 24px; text-align: center; transition: transform 0.3s ease; }
@media screen and (min-width: 1024px) { .success--card { flex-direction: row; gap: 16px; padding: 8px 24px; text-align: left; }
  .success--card:hover { transform: scale(1.025); }
  .success--card:focus-within { outline: solid 1px var(--base---primary--action); transform: scale(1.025); } }
.success--container { display: flex; flex-direction: column; gap: 24px; padding: 0; }
@media screen and (min-width: 1024px) { .success--container { flex-direction: row; padding: 0 48px; } }
.success svg { flex: 0 0 120px; }
.success h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 0em; }
.success p { color: var(--neutrals--500); margin: 0 0 12px 0; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
@media screen and (min-width: 1024px) { .success p { margin: 0; } }

/* Design System - Block: Support */
.support { background: var(--neutrals--50); margin-left: calc(50% - 50vw); max-width: 100vw; overflow: hidden; width: 100vw; }
.support--container { border-radius: 10px; margin: 0 auto; max-width: 1280px; padding: 24px 0 0; width: 100%; }
@media screen and (min-width: 1024px) { .support--container { padding: 24px 48px 0; } }
.support .headlines { padding: 0; }
.support--item { align-items: center; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding: 0 48px; text-align: center; }
.support--item h3 { margin: 0; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.support--item p { color: var(--neutrals--600); font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }

/* Design System - Element: Tabs */
.tabs { align-items: center; display: flex; list-style-type: none; justify-content: flex-start; margin: 0; overflow: scroll; padding: 24px 0; position: relative; }
@media screen and (min-width: 600px) { .tabs { justify-content: center; } }
@media screen and (min-width: 1024px) { .tabs { padding: 0 48px 24px; } }
.tabs--fixed button { flex: 0 0 100px; }
.tabs button { background: transparent; border-radius: 80px; border: none; color: var(--base---black); cursor: pointer; display: block; padding: 12px 20px; text-transform: capitalize; white-space: nowrap; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.tabs button:hover { text-decoration: none; }
.tabs button[aria-selected=true] { background: var(--base---black); color: var(--base---white); }
@media screen and (min-width: 1024px) { .tabs--lg button { padding: 16px 32px; font-size: 18px; line-height: 24px; letter-spacing: 0em; font-weight: 700; }
  .tabs--fixed button { flex: 0 0 160px; } }

/* Design System - Block: Testimonials */
.testimonials { background: var(--indigo--50); margin-left: calc(50% - 50vw); max-width: 100vw; overflow: hidden; width: 100vw; }
.testimonials--container { padding: 60px 20px; margin: 0 auto; max-width: 1280px; width: 100%; }
.testimonials--list { display: flex; justify-content: center; list-style-type: none; margin: -24px 0 -24px calc(50% - 50vw); max-width: 100vw; padding: 16px 0; position: relative; width: 100vw; }
.testimonials--list:before, .testimonials--list:after { background-image: linear-gradient(to left, rgba(238, 242, 254, 0), #eef2fe); bottom: 0; content: ""; display: block; left: 0; position: absolute; top: 0; width: 40px; z-index: 9; }
@media screen and (min-width: 1024px) { .testimonials--list:before, .testimonials--list:after { width: 240px; } }
.testimonials--list:after { background-image: linear-gradient(to right, rgba(238, 242, 254, 0), #eef2fe); left: unset; right: 0; }
.testimonials--list li { flex: 1 0 350px; }
.testimonials .headlines strong:first-child { color: var(--indigo--700); }

/* Design System - Blocks: Thumbnail Blocks */
.thumbnail--item { padding: 16px !important; }
.thumbnail--item p { text-align: center; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.thumbnail--image { background: var(--neutrals--50); border: solid 1px var(--neutrals--200); border-radius: 8px; overflow: hidden; margin-bottom: 12px; padding-top: 65%; position: relative; }
.thumbnail--image img { position: absolute; top: 0; width: 100%; }
.thumbnail--image:hover .thumbnail--overlay { opacity: 1; }
.thumbnail--overlay { align-items: center; background: rgba(0, 0, 0, 0.5); bottom: 0; color: var(--base---white); cursor: pointer; display: flex; justify-content: center; left: 0; opacity: 0; position: absolute; right: 0; transition: opacity 0.3s ease; top: 0; z-index: 9; }

/* Design System - Element: Toggle */
.toggle { align-items: center; display: flex; justify-content: center; }
.toggle label { cursor: pointer; }
.toggle button { background: transparent; border: none; cursor: pointer; position: relative; font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.toggle input { display: none; }
.toggle input:checked + .toggle--button:before { left: 22px; }
.toggle input:checked + .toggle--button label:first-child { display: block; }
.toggle input:checked + .toggle--button label:last-child { display: none; }
.toggle--button { background: var(--neutrals--200); border: 0; border-radius: 32px; cursor: pointer; height: 32px; margin: 12px 8px; padding: 0; position: relative; width: 52px; }
.toggle--button:before { content: ""; display: block; background: var(--base---white); border-radius: 32px; box-shadow: var(--shadow-----standard); height: 28px; left: 2px; position: absolute; top: 2px; transition: left 0.3s ease; width: 28px; }
.toggle--button label { display: block; float: left; height: 32px; position: relative; width: 52px; z-index: 999; }
.toggle--button label:first-child { display: none; }
.toggle--callout { color: var(--base---primary--action); display: none; padding-top: 2px; white-space: nowrap; width: 1px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
@media screen and (min-width: 768px) { .toggle--callout { display: block; } }

label.toggle { user-select: none; }

/* Design System - Element: Toggle */
.tooltip { align-items: center; display: flex; gap: 4px; z-index: 999; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }
.tooltip--icon { align-items: center; display: flex; justify-content: center; position: relative; }
.tooltip--icon:focus .tooltip--bubble, .tooltip--icon:hover .tooltip--bubble { display: block; }
.tooltip--bubble { background: var(--base---white); box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.2); border-top: solid 1px var(--neutrals--100); border-radius: 4px; bottom: 36px; color: var(--neutrals--700); display: none; position: absolute; padding: 12px; width: 200px; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 500; }
.tooltip--bubble:after { content: ""; position: absolute; width: 0; height: 0; bottom: -14px; margin-left: -12px; left: 50%; box-sizing: border-box; border: 8px solid black; border-color: transparent transparent #fff #fff; transform-origin: 0 0; transform: rotate(-45deg); box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.2); }

/* Design System - Component: Training Blocks */
.training { background: var(--base---white); border: solid 1px var(--neutrals--200); border-radius: 8px; box-shadow: var(--box--shadow); display: flex; flex-direction: column; margin: 0 auto; max-width: 800px; padding: 16px; }
.training--action { flex: 1; }
@media screen and (min-width: 768px) { .training--action { flex: 0 0 110px; } }
.training--container { align-items: center; display: flex; flex-direction: column; gap: 16px; text-align: center; }
@media screen and (min-width: 768px) { .training--container { flex-direction: row; padding-right: 24px; text-align: left; } }
.training--details { max-height: 0; overflow: hidden; }
.training--details.expanded { max-height: 2000px; }
.training--details pre { font-family: inherit; }
.training--details pre strong { font-size: 14px; }
.training--date { align-items: center; background: var(--indigo--100); border-radius: 4px; display: flex; flex: 0 0 100%; flex-direction: column; padding: 4px 12px; text-align: center; width: 100%; }
@media screen and (min-width: 768px) { .training--date { flex: 0 0 120px; height: 100px; padding: 12px; width: 120px; } }
.training--date span { color: var(--base---black); font-size: 24px; font-weight: 700; margin: -2px 0; }
@media screen and (min-width: 768px) { .training--date span { margin: 0; } }
.training--date span:first-child { color: var(--neutrals--500); font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.training--date span:last-child { color: var(--neutrals--500); font-size: 12px; text-transform: uppercase; }
.training--text { display: flex; flex-direction: column; flex: 1; padding-right: 16px; }
.training p { color: var(--neutrals--700); font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; margin: 0; }
.training strong { font-size: 16px; line-height: 20px; letter-spacing: 0em; font-weight: 700; }

/* Design System - Blocks: Videos */
.video { display: flex; flex-direction: column; gap: 48px; padding: 100px 0 0; width: 100%; }
@media screen and (min-width: 1024px) { .video { flex-direction: row; } }
.video--bg { background: var(--indigo--50); left: 0; top: 80px; right: 0; width: 100%; padding-top: 59.25%; position: absolute; }
@media screen and (min-width: 1024px) { .video--bg { padding-top: 36.25%; } }
@media screen and (min-width: 1200px) { .video--bg { box-sizing: border-box; height: 580px; outline: none; padding-top: 0; top: 0; } }
.video--divider { display: block; margin: 24px 0; position: relative; text-transform: uppercase; font-size: 12px; line-height: 16px; letter-spacing: 0em; font-weight: 700; }
.video--divider span { background: var(--base---white); position: relative; padding-right: 8px; }
.video--divider:before { border-top: solid 1px var(--neutrals--200); content: ""; display: block; left: 0; position: absolute; right: 0; top: 8px; }
.video--container { flex: 0 0 100%; position: relative; }
@media screen and (min-width: 1024px) { .video--container { flex: 0 0 60%; } }
@media screen and (min-width: 1200px) { .video--container { flex: 0 0 67%; } }
.video--content { display: flex; flex-direction: column; gap: 16px; padding: 48px 0 24px 0; max-width: 760px; font-size: 14px; line-height: 20px; letter-spacing: 0em; font-weight: 400; }
.video--content h1 { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; margin: 0; }
@media screen and (min-width: 1024px) { .video--content h1 { font-size: 32px; font-weight: 800; line-height: 40px; letter-spacing: 0em; } }
.video--content strong { display: block; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0em; }
.video--content p, .video--content ul { color: var(--neutrals--600); margin-bottom: 16px; }
.video--content .g-ytsubscribe { float: right; }
.video--description { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; }
.video--meta { color: var(--neutrals--600); display: flex; flex-direction: column; gap: 12px; }
@media screen and (min-width: 1024px) { .video--meta { align-items: center; flex-direction: row; } }
.video--meta span:nth-child(even) { display: none; }
@media screen and (min-width: 1024px) { .video--meta span:nth-child(even) { display: block; } }
.video--recs { background: var(--base---white); border: solid 1px var(--neutrals---neutrals--200); border-radius: 8px; box-shadow: var(--shadow-----standard); height: fit-content; padding: 12px; position: relative; }
.video--recs .button { margin: 16px 8px; width: 97%; }
.video--recs .card:first-child { border: none; }
.video--transcript { color: var(--neutrals--600); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; line-height: 28px; }
.text-wrap-balance {
  text-wrap: balance;
}