:root{--palette-grey-900: #322F28;--palette-grey-800: #4A463D;--palette-grey-50: #EAE6DB;--palette-grey-0: #FDFCF9;--palette-grey-1000: #232019;--palette-grey-20: #F2EFE7;--palette-grey-1200: #16130C;--palette-grey-1100: #1C1912;--palette-grey-10: #F8F6F0;--palette-grey-100: #E5E1D5;--palette-grey-200: #D6D0C0;--palette-grey-300: #BEB7A4;--palette-grey-400: #CBBF9E;--palette-grey-600: #B3A67E4D;--palette-grey-1000-12: #dedbd2;--palette-grey-50-20: #46433A;--palette-grey-15: #F3F0E9;--palette-blue-600: #0A3D6E;--palette-grey-0-rgb: 253, 252, 249;--palette-grey-50-rgb: 234, 230, 219;--palette-grey-400-rgb: 203, 191, 158;--palette-grey-600-rgb: 179, 166, 126;--palette-grey-1000-rgb: 35, 32, 25;--palette-grey-1200-rgb: 22, 19, 12;--theme-surface-surface: var(--palette-grey-0);--theme-surface-on-surface: var(--palette-grey-1200);--theme-surface-on-surface-variant: var(--palette-grey-800);--theme-surface-surface-container: var(--palette-grey-10);--theme-surface-surface-container-high: var(--palette-grey-20);--theme-surface-surface-container-higher: var(--palette-grey-50);--theme-surface-surface-container-highest: var(--palette-grey-100);--theme-surface-inverse-surface: var(--palette-grey-1200);--theme-surface-inverse-on-surface: var(--palette-grey-10);--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);--theme-inverse-surface: var(--palette-grey-1200);--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);--theme-outline-inverse-outline-variant: rgba(234, 230, 219, .06);--theme-outline-outline-variant: rgba(35, 32, 25, .06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--theme-primary-primary: var(--theme-surface-on-surface);--theme-primary-on-primary: var(--theme-surface-surface);--theme-tonal-tonal: var(--theme-surface-surface-container);--theme-tonal-on-tonal: var(--theme-surface-on-surface);--theme-outlined-outlined: var(--theme-surface-surface-transparent);--theme-outlined-on-outlined: var(--theme-surface-on-surface);--theme-protected-protected: var(--theme-surface-surface-container);--theme-protected-on-protected: var(--theme-surface-on-surface);--theme-text-text: var(--theme-surface-surface-transparent);--theme-text-on-text: var(--theme-surface-on-surface);--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);--theme-text-link-states-hovered: var(--palette-grey-1000);--theme-text-link-states-focused: var(--palette-grey-1100);--theme-text-link-states-pressed: var(--palette-grey-1000);--theme-text-link-states-disabled: #6E6A5E;--theme-button-states-primary-enabled: var(--theme-primary-primary);--theme-button-states-primary-disabled: var(--palette-grey-10);--theme-button-states-primary-hovered: var(--palette-grey-900);--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);--theme-button-secondary-hover: var(--palette-grey-15);--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);--theme-button-states-tonal-disabled: var(--palette-grey-10);--theme-button-states-protected-enabled: var(--theme-protected-protected);--theme-button-states-protected-hovered: var(--palette-grey-20);--theme-button-states-protected-disabled: var(--palette-grey-100);--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);--theme-button-states-disabled: var(--palette-grey-100);--theme-button-states-on-disabled: #6E6A5E;--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);--divider: var(--theme-outline-outline-variant)}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,button,input,label{line-height:1.1}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}.no-scroll{overflow:hidden}:root{--breakpoint-max: 1600px;--breakpoint-xl: 1600px;--breakpoint-lg: 1440px;--breakpoint-md: 1024px;--breakpoint-sm: 767px;--breakpoint-xs: 425px;--landing-main-text-size: 107px;--landing-main-text-line-height: 107px;--landing-main-text-letter-spacing: -2.14px;--9xl-size: 148px;--9xl-line-height: 145.04px;--9xl-letter-spacing: -2.96px;--8xl-size: 124px;--8xl-line-height: 121.52px;--8xl-letter-spacing: -2.48px;--7xl-size: 98px;--7xl-line-height: 82.04px;--7xl-letter-spacing: -1.8px;--6xl-size: 72px;--6xl-line-height: 72px;--6xl-letter-spacing: -1.44px;--5xl-size: 54px;--5xl-line-height: 56.16px;--5xl-letter-spacing: -.95px;--4xl-size: 42px;--4xl-line-height: 43.68px;--4xl-letter-spacing: -.73px;--3xl-size: 32px;--3xl-line-height: 33.92px;--3xl-letter-spacing: -.15px;--2xl-size: 28px;--2xl-line-height: 30.24px;--2xl-letter-spacing: -.1px;--xl-size: 24px;--xl-line-height: 25.92px;--xl-letter-spacing: -.07px;--lg-size: 22px;--lg-line-height: 24.64px;--lg-letter-spacing: -.08px;--md-size: 20px;--md-line-height: 26px;--md-letter-spacing: -.05px;--base-size: 17.5px;--base-line-height: 25.38px;--base-letter-spacing: .18px;--sm-size: 14.5px;--sm-line-height: 21.02px;--sm-letter-spacing: .16px;--xs-size: 12.5px;--xs-line-height: 15.5px;--xs-letter-spacing: .11px;--cta-size: 17.5px;--cta-line-height: 25.38px;--cta-letter-spacing: .18px;--cta-sm-size: 14.5px;--cta-sm-line-height: 21.02px;--cta-sm-letter-spacing: .11px;--icon-size-10xl: 120px;--icon-size-9xl: 112;--icon-size-8xl: 104px;--icon-size-7xl: 96px;--icon-size-6xl: 88px;--icon-size-5xl: 80px;--icon-size-4xl: 72px;--icon-size-3xl: 64px;--icon-size-2xl: 56px;--icon-size-xl: 48px;--icon-size-lg: 36px;--icon-size-md: 24px;--icon-size-sm: 18px;--icon-size-xs: 12px;--grid-gutter-sm: 56px;--grid-gutter: 64px;--grid-columns: 12;--page-margin: 72px;--shape-corner-xs: 2px;--shape-corner-sm: 6px;--shape-corner-md: 10px;--shape-corner-lg: 14px;--shape-corner-xl: 20px;--shape-corner-2xl: 28px;--shape-corner-rounded: 9999px;--space-none: 0px;--space-xs: 6px;--space-sm: 12px;--space-md: 18px;--space-lg: 28px;--space-xl: 40px;--space-2xl: 52px;--space-3xl: 64px;--space-4xl: 84px;--space-5xl: 92px;--space-6xl: 126px;--space-7xl: 188px;--nav-height: 52px;--ease-in-quad: cubic-bezier(.55, .085, .68, .53);--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);--ease-in-quart: cubic-bezier(.895, .03, .685, .22);--ease-in-quint: cubic-bezier(.755, .05, .855, .06);--ease-in-expo: cubic-bezier(.95, .05, .795, .035);--ease-in-circ: cubic-bezier(.6, .04, .98, .335);--ease-out-quad: cubic-bezier(.25, .46, .45, .94);--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);--ease-out-quart: cubic-bezier(.165, .84, .44, 1);--ease-out-quint: cubic-bezier(.23, 1, .32, 1);--ease-out-expo: cubic-bezier(.19, 1, .22, 1);--ease-out-circ: cubic-bezier(.075, .82, .165, 1);--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);--ease-out-back: cubic-bezier(.34, 1.85, .64, 1)}@media (max-width: 1600px){:root{--landing-main-text-size: 72px;--landing-main-text-line-height: 72.04px;--landing-main-text-letter-spacing: -1.44px;--grid-gutter: 48px}}@media (max-width: 1024px){:root{--landing-main-text-size: 56px;--landing-main-text-line-height: 56.04px;--landing-main-text-letter-spacing: -1.12px;--grid-gutter: 28px;--grid-columns: 8;--9xl-size: 38px;--9xl-line-height: 40.28px;--9xl-letter-spacing: -.76px;--8xl-size: 36px;--8xl-line-height: 38.16px;--8xl-letter-spacing: -.72px;--7xl-size: 34px;--7xl-line-height: 36.04px;--7xl-letter-spacing: -.68px;--6xl-size: 34px;--6xl-line-height: 36.04px;--6xl-letter-spacing: -.68px;--5xl-size: 34px;--5xl-line-height: 36.04px;--5xl-letter-spacing: -.68px;--4xl-size: 28px;--4xl-line-height: 29.6px;--4xl-letter-spacing: -.28px;--3xl-size: 28px;--3xl-line-height: 29.6px;--3xl-letter-spacing: -.28px;--2xl-size: 24px;--2xl-line-height: 25.92px;--2xl-letter-spacing: -.14px;--xl-size: 24px;--xl-line-height: 25.92px;--xl-letter-spacing: -.14px;--lg-size: 20px;--lg-line-height: 22.8px;--lg-letter-spacing: -.08px;--md-size: 20px;--md-line-height: 22.8px;--md-letter-spacing: -.08px;--base-size: 15px;--base-line-height: 22px;--base-letter-spacing: .16px;--sm-size: 15px;--sm-line-height: 22pxx;--sm-letter-spacing: .16px;--cta-size: 15px;--cta-line-height: 22px;--cta-letter-spacing: .16px;--cta-sm-size: 15px;--cta-sm-line-height: 22px;--cta-sm-letter-spacing: .16px;--grid-gutter: 40px;--page-margin: 40px}.hidden-sm{display:none!important}}@media (max-width: 767px){:root{--landing-main-text-size: 40px;--landing-main-text-line-height: 44.04px;--landing-main-text-letter-spacing: -.8px;--grid-gutter: 16px;--grid-columns: 4;--page-margin: 16px}.hidden-xs{display:none!important}}@media (max-width: 425px){:root{--landing-main-text-size: 44px;--landing-main-text-line-height: 46.04px;--landing-main-text-letter-spacing: -.6px;--grid-columns: 4;--shape-corner-xl: 16px}}*{box-sizing:border-box}body{color:var(--theme-surface-on-surface);margin:0;padding:0;font-family:Public Sans,sans-serif;font-weight:400;font-optical-sizing:auto;width:100%}h1,h2,h3,h4{font-weight:450;font-optical-sizing:auto}p{margin:0}a{color:var(--theme-surface-on-surface-variant);text-decoration:none}app-recursive-renderer a{color:#8A6D23!important;text-decoration:underline!important}.container{max-width:calc(1728px + var(--page-margin) * 2);margin:0 auto;padding:0 var(--page-margin)}.landing-main{font-size:var(--landing-main-text-size);line-height:var(--landing-main-text-line-height);letter-spacing:var(--landing-main-text-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 144}.heading-00{font-size:var(--9xl-size);line-height:var(--9xl-line-height);letter-spacing:var(--9xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 144}.heading-0{font-size:var(--8xl-size);line-height:var(--8xl-line-height);letter-spacing:var(--8xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 124}.heading-1{font-size:var(--7xl-size);line-height:var(--7xl-line-height);letter-spacing:var(--7xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 98}.heading-2{font-size:var(--6xl-size);line-height:var(--6xl-line-height);letter-spacing:var(--6xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 72}.heading-3{font-size:var(--5xl-size);line-height:var(--5xl-line-height);letter-spacing:var(--5xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 54}.heading-4{font-size:var(--4xl-size);line-height:var(--4xl-line-height);letter-spacing:var(--4xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 42}.heading-5{font-size:var(--3xl-size);line-height:var(--3xl-line-height);letter-spacing:var(--3xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 32}.heading-6{font-size:var(--2xl-size);line-height:var(--2xl-line-height);letter-spacing:var(--2xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 28}.heading-7{font-size:var(--xl-size);line-height:var(--xl-line-height);letter-spacing:var(--xl-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 24}.heading-8{font-size:var(--lg-size);line-height:var(--lg-line-height);letter-spacing:var(--lg-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 22}.heading-9{font-size:var(--md-size);line-height:var(--md-line-height);letter-spacing:var(--md-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 20}.body{font-size:var(--base-size);line-height:var(--base-line-height);letter-spacing:var(--base-letter-spacing);font-weight:400;font-variation-settings:"wdth" 100,"opsz" 17.5}.body strong{font-weight:450}.body em{font-style:italic}.body code{font-family:Courier New,monospace;background-color:#0000000d;padding:2px 6px;border-radius:12px;font-size:.9em}.body a{color:#8A6D23;text-decoration:underline}.body a:hover{color:#6B541B}.body h2{margin-top:var(--space-2xl)}.body h3{margin-top:var(--space-xl)}.caption{font-size:var(--sm-size);line-height:var(--sm-line-height);letter-spacing:var(--sm-letter-spacing);font-weight:400;font-variation-settings:"wdth" 100,"opsz" 15}.small{font-size:var(--xs-size);line-height:var(--xs-line-height);letter-spacing:var(--xs-letter-spacing);font-weight:450}.code{font-size:var(--sm-size);line-height:var(--sm-line-height);letter-spacing:var(--sm-letter-spacing)}.call-to-action{font-size:var(--cta-size);line-height:var(--cta-line-height);letter-spacing:var(--cta-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 17.5}.call-to-action--nav{cursor:pointer;font-size:var(--cta-sm-size);line-height:var(--cta-sm-line-height);letter-spacing:var(--cta-sm-letter-spacing);font-weight:450;font-variation-settings:"wdth" 100,"opsz" 14.5}.symbol{font-family:Google Symbols;font-size:var(--symbol-font, 24px);font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"ROND" 50,"opsz" 48}.grid-container{width:100%;max-width:calc(var(--breakpoint-max) + var(--page-margin) * 2);margin:0 auto;padding:0 var(--page-margin)}.grid-row{display:flex;flex-flow:var(--grid-flex-flow, row) wrap;margin-left:calc(-1 * var(--grid-gutter) / 2);margin-right:calc(-1 * var(--grid-gutter) / 2);gap:var(--grid-gap, 0)}.grid-col{flex:1 1 auto;padding-left:calc(var(--grid-gutter) / 2);padding-right:calc(var(--grid-gutter) / 2)}.col-xs-1{flex-basis:25%;max-width:25%}.col-xs-2{flex-basis:50%;max-width:50%}.col-xs-3{flex-basis:75%;max-width:75%}.col-xs-4{flex-basis:100%;max-width:100%}@media (min-width: 768px){.col-sm-1{flex-basis:12.5%;max-width:12.5%}.col-sm-2{flex-basis:25%;max-width:25%}.col-sm-3{flex-basis:37.5%;max-width:37.5%}.col-sm-4{flex-basis:50%;max-width:50%}.col-sm-5{flex-basis:62.5%;max-width:62.5%}.col-sm-6{flex-basis:75%;max-width:75%}.col-sm-7{flex-basis:87.5%;max-width:87.5%}.col-sm-8{flex-basis:100%;max-width:100%}}@media (min-width: 1024px){.col-md-1{flex-basis:8.3333333333%;max-width:8.3333333333%}.col-md-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.col-md-3{flex-basis:25%;max-width:25%}.col-md-4{flex-basis:33.3333333333%;max-width:33.3333333333%}.col-md-5{flex-basis:41.6666666667%;max-width:41.6666666667%}.col-md-6{flex-basis:50%;max-width:50%}.col-md-7{flex-basis:58.3333333333%;max-width:58.3333333333%}.col-md-8{flex-basis:66.6666666667%;max-width:66.6666666667%}.col-md-9{flex-basis:75%;max-width:75%}.col-md-10{flex-basis:83.3333333333%;max-width:83.3333333333%}.col-md-11{flex-basis:91.6666666667%;max-width:91.6666666667%}.col-md-12{flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.3333333333%}.col-md-offset-2{margin-left:16.6666666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.3333333333%}.col-md-offset-5{margin-left:41.6666666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.3333333333%}.col-md-offset-8{margin-left:66.6666666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.3333333333%}.col-md-offset-11{margin-left:91.6666666667%}}.sticky-left-container{display:grid}.sticky-left-container>*{align-self:start}.sticky-left-container .sticky-element{position:sticky;z-index:10}chevron-right-icon,chevron-left-icon{display:flex;align-items:center;justify-content:center}.template-content-image{border-radius:var(--shape-corner-md);max-width:100%}.template-content-heading{padding:var(--space-lg) 0 0}.template-content-heading:before{content:"";display:block;height:var(--nav-height);margin-top:-60px;visibility:hidden;pointer-events:none}.template-content-paragraph a{text-decoration:underline}.template-content-paragraph a:hover{text-decoration:none}.template-content-list{padding-inline-start:var(--space-xl)}.template-content-list li{margin:0 0 var(--space-md)}ul.template-content-list{list-style-type:disc}ul.template-content-list li::marker{font-size:.75em}ol.template-content-list{list-style-type:decimal}.arrow-link,.arrow-link-left{display:inline-flex;align-items:center;transition:.2s opacity}.arrow-link:not(.arrow-link-left):after{content:"keyboard_arrow_right";display:inline-flex;font-size:1.25em;font-family:Google Symbols;margin:0 0 0 var(--space-xs);height:inherit;opacity:inherit;transition:.3s transform}.arrow-link:not(.arrow-link-left):focus,.arrow-link:not(.arrow-link-left):hover{outline:none}.arrow-link:not(.arrow-link-left):focus:after,.arrow-link:not(.arrow-link-left):hover:after{transform:translate(50%)}.arrow-link-left:before{content:"keyboard_arrow_left";display:inline-flex;font-size:1.25em;font-family:Google Symbols;margin:0 var(--space-xs) 0 0;height:inherit;opacity:inherit;transition:.3s transform}.arrow-link-left:focus,.arrow-link-left:hover{outline:none}.arrow-link-left:focus:before,.arrow-link-left:hover:before{transform:translate(-50%)}.carousel-nav{margin-top:60px;border-radius:9999px;background:var(--theme-tonal-tonal);display:inline-flex;align-items:center;padding:4px;width:fit-content;gap:var(--space-xs)}.carousel-nav button{color:var(--theme-surface-on-surface);font-family:Google Symbols;display:flex;padding:8px 12px;justify-content:center;align-items:center;gap:var(--space-sm);flex:1 0 0;background:#F8F6F0;border:none;height:36px;width:48px;flex-grow:0;border-radius:12px;cursor:pointer}.carousel-nav button:hover{border-radius:var(--shape-corner-rounded, 9999px);background:#F0EDE4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.video-control-button{background:var(--theme-surface-overlay-low);border-radius:var(--shape-corner-rounded);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:inline-flex;justify-content:center;align-items:center;position:absolute;bottom:var(--space-md);right:var(--space-md);height:48px;width:48px;font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"ROND" 50,"opsz" 48!important}.second-line{color:var(--palette-grey-800)}.smooth-scroll-wrapper{min-height:100vh}.special-text{color:var(--palette-grey-1200);font-family:Google Sans Code;font-size:20px;font-style:normal;font-weight:400;line-height:28px;letter-spacing:-.08px}.invisible-div{height:0px}
/* ===== EPAX logo swap (brand only — layout and animations untouched) ===== */
epax-logo{display:inline-flex!important;align-items:center;gap:.5em;font-size:21px;line-height:1}
epax-logo svg{display:none!important}
epax-logo::before{content:"";display:inline-block;width:1.15em;height:1.15em;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cline x1='8' y1='8' x2='24' y2='24' stroke='%23042C53' stroke-width='3.2' stroke-linecap='round'/%3E%3Cline x1='24' y1='8' x2='8' y2='24' stroke='%23042C53' stroke-width='3.2' stroke-linecap='round'/%3E%3Cline x1='16' y1='4' x2='16' y2='28' stroke='%23C9A84C' stroke-width='2.6' stroke-linecap='round'/%3E%3Cline x1='4' y1='16' x2='28' y2='16' stroke='%23C9A84C' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
epax-logo::after{content:"EPAX";font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:500;font-size:.92em;letter-spacing:.14em;color:#042C53}
google-logo{display:inline-flex!important;align-items:center}
google-logo svg{display:none!important}
google-logo::after{content:"EPAX";font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:500;font-size:17px;letter-spacing:.14em;color:#4A463D}
/* ===== ship pass: comfortable tap targets on touch devices (visual design unchanged) ===== */
@media (pointer:coarse){
header .call-to-action--nav a,header .nav-item app-button,.call-to-action--nav{min-height:44px}
a.call-to-action,button.call-to-action,footer a{min-height:44px;display:inline-flex;align-items:center}
#epaxLangTg button{padding:12px 14px}
}
/* cookie bar removed — hide its orphaned footer control */
.glue-cookie-notification-bar-control{display:none!important}
/* "Built for hospitality" video carousel removed from the landing page */
use-cases{display:none!important}
/* hero headline: no static flash before the typing animation starts —
hide the text until SplitText has split it into animatable chars */
.typed-container.landing-main .typed-content{visibility:hidden}
/* a11y: pricing chip label was #3279f9 (3.94:1); AA needs 4.5:1 */
.pricing-card label.small{color:#8A6D23!important}
/* ===== EPAX Heritage retheme (token layer only — selectors/structure untouched) ===== */
:root{
--heritage-navy:#042C53;--heritage-navy-int:#0A3D6E;--heritage-gold:#C9A84C;
--heritage-gold-ink:#8A6D23;--heritage-paper:#FDFCF9;
--shadow-low:0 1px 2px rgba(4,44,83,.08),0 4px 12px rgba(4,44,83,.06);
--shadow-mid:0 1px 2px rgba(4,44,83,.08),0 12px 32px rgba(4,44,83,.10);
}
/* display serif for headings; body stays Public Sans */
.landing-main,.heading-00,.heading-0,.heading-1,.heading-2,.heading-3,.heading-4,
.heading-5,.heading-6,.heading-7,.heading-8,.heading-9{
font-family:Fraunces,Georgia,serif;font-weight:520;
}
/* CTAs and nav keep the sans voice */
.call-to-action,.call-to-action--nav{font-family:Public Sans,sans-serif}
/* warm paper wash — gradient stops + tint, sits under all component surfaces */
body{
background-color:#FDFCF9;
background-image:
radial-gradient(80% 60% at 8% 0%, rgba(201,168,76,.055), transparent 60%),
radial-gradient(70% 55% at 96% 100%, rgba(4,44,83,.045), transparent 55%);
}
/* neutralize remaining Google-blue literals baked into component styles */
.special-text{color:#16130C}
epax-logo::after{color:#042C53;font-family:Fraunces,Georgia,serif;font-weight:560}
google-logo::after{font-family:Fraunces,Georgia,serif;font-weight:560}
/* hero brand film is color-graded in the asset itself (hero_video_gold.mp4) —
never put a CSS filter on a playing video: it froze scrolling on iOS (2026-07-16) */
/* blog switched off until there is real content — posts removed from the
bundle data, Blog dropped from nav/footer. The component and the /blog
route still exist; delete this rule and refill the data to turn it back on */
landing-latest-blogs{display:none!important}
app-blog .featured-article-content,app-blog .featured-article-image{display:none!important}
/* ═══════════════════════════════════════════════════════════════════════════
EPAX DESIGN SYSTEM v1 — 2026-07-24
Token layer only: no selector or structure in the compiled bundle is
touched, so this is reversible by deleting this block.
Audit before (7 routes × 2 viewports, computed styles):
36 colors · 17 border radii · 14 CTA heights · 8 font families
27 distinct styles · 44 spacing values
The biggest defect was invisible: Fraunces and Public Sans ship NO Cyrillic
subset (latin, latin-ext, vietnamese only), and this site is Mongolian by
default — so every MN heading and paragraph rendered in a system fallback,
not the brand face. Playfair Display + Inter both carry Cyrillic, and /la
already used them. Unifying on that pair fixes MN typography site-wide and
gets the whole site to two text families.
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* ---- 1. FIVE CORE COLOURS ------------------------------------------- */
--ds-ink:#16130C; /* primary text */
--ds-ink-soft:#4A463D; /* secondary text */
--ds-paper:#FDFCF9; /* surface / background */
--ds-navy:#042C53; /* accent, every CTA */
--ds-gold:#8A6D23; /* secondary accent, AA-safe on paper */
/* every legacy palette slot is remapped onto the five above, so component
styles compiled into the bundle inherit the system without being edited */
--palette-grey-1200:var(--ds-ink);
--palette-grey-1100:var(--ds-ink);
--palette-grey-1000:var(--ds-ink);
--palette-grey-900:var(--ds-ink-soft);
--palette-grey-800:var(--ds-ink-soft);
--palette-grey-0:var(--ds-paper);
--palette-blue-600:var(--ds-navy);
--heritage-navy:var(--ds-navy);
--heritage-gold-ink:var(--ds-gold);
/* ---- 2. 8-POINT SPACING SCALE --------------------------------------- */
/* was 6/12/18/28/40/52/64/84/92/126/188 — off-grid values removed */
--space-xs:8px;
--space-sm:12px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--space-3xl:64px;
--space-4xl:80px;
--space-5xl:96px;
--space-6xl:128px;
--space-7xl:192px;
/* ---- 3. ONE SURFACE RADIUS ------------------------------------------ */
/* every card, input, image, panel and container: 12px. Buttons keep the
pill — it is a shape, not a radius choice, and it is the brand's
signature. Flip --ds-btn-radius to 12px to make even that uniform. */
--ds-radius:12px;
--ds-btn-radius:9999px;
--shape-corner-xs:var(--ds-radius);
--shape-corner-sm:var(--ds-radius);
--shape-corner-md:var(--ds-radius);
--shape-corner-lg:var(--ds-radius);
--shape-corner-xl:var(--ds-radius);
--shape-corner-2xl:var(--ds-radius);
/* ---- 4. TWO SHADOWS ------------------------------------------------- */
/* flat but layered; no heavy gradients */
--shadow-low:0 1px 2px rgba(4,44,83,.06), 0 4px 12px rgba(4,44,83,.05);
--shadow-mid:0 1px 2px rgba(4,44,83,.06), 0 12px 32px rgba(4,44,83,.08);
/* ---- 5. CTA GEOMETRY ------------------------------------------------ */
--ds-cta-height:48px;
--ds-cta-pad:0 28px;
}
/* ---- 6. TWO TEXT FAMILIES ---------------------------------------------
Playfair Display (display) + Inter (text). Google Symbols stays: it is the
icon font, rendering ligature glyphs, not a text face. */
body,
.body, .caption, .small, .code,
.call-to-action, .call-to-action--nav,
input, button, textarea, select{
font-family:Inter, system-ui, -apple-system, sans-serif;
}
.landing-main,
.heading-00, .heading-0, .heading-1, .heading-2, .heading-3,
.heading-4, .heading-5, .heading-6, .heading-7, .heading-8, .heading-9,
h1, h2, h3, h4{
font-family:"Playfair Display", Georgia, serif;
font-weight:600; /* was 450/520 — premium reads bolder */
letter-spacing:-.02em;
/* Playfair has no optical-size axis; the Fraunces settings were inert */
font-variation-settings:normal;
}
/* Playfair defaults to oldstyle figures: 7 and 5 drop below the baseline and
0 sits at x-height, which makes prices look like typos */
.heading-00, .heading-0, .heading-1, .heading-2, .heading-3, .heading-4,
.heading-5, .heading-6, .landing-main, .pricing-card, h1, h2, h3{
font-variant-numeric:lining-nums;
font-feature-settings:"lnum" 1;
}
/* ---- 7. BODY TEXT: ONE STYLE ------------------------------------------
the audit found 27 distinct
renderings. Paragraphs that are not
carrying a display/heading class all resolve to one size and rhythm. */
p:not([class*="heading"]):not(.landing-main):not(.special-text):not(.small):not(.caption){
font-size:17px;
line-height:1.7; /* generous — density reads cheap */
letter-spacing:.01em;
color:var(--ds-ink-soft);
}
/* ---- 8. EVERY CTA IDENTICAL -------------------------------------------
audit found 14 distinct CTA heights (21–52px). One height, one radius,
one contrast level, one interaction model — everywhere. */
.call-to-action,
app-button a, app-button button,
a.call-to-action, button.call-to-action,
.epax-shop-link,
#epaxAuditForm .af-btn,
#epaxGeoBand .geo-cta{
min-height:var(--ds-cta-height);
padding:var(--ds-cta-pad);
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--ds-btn-radius);
font-family:Inter, system-ui, sans-serif;
font-size:16px;
font-weight:600;
letter-spacing:.01em;
line-height:1;
text-decoration:none;
transition:background-color .25s cubic-bezier(.2,.6,.2,1),
color .25s cubic-bezier(.2,.6,.2,1),
transform .25s cubic-bezier(.2,.6,.2,1),
box-shadow .25s cubic-bezier(.2,.6,.2,1);
}
/* primary: high contrast, unambiguous */
app-button a, app-button button,
#epaxAuditForm .af-btn,
.call-to-action:not(.call-to-action--nav){
background:var(--ds-navy);
color:var(--ds-paper);
box-shadow:var(--shadow-low);
}
app-button a:hover, app-button button:hover,
#epaxAuditForm .af-btn:hover,
.call-to-action:not(.call-to-action--nav):hover{
background:#0A3D6E;
transform:translateY(-1px);
box-shadow:var(--shadow-mid);
}
app-button a:active, app-button button:active,
#epaxAuditForm .af-btn:active,
.call-to-action:not(.call-to-action--nav):active{
transform:translateY(0) scale(.985);
}
app-button a:focus-visible, app-button button:focus-visible,
#epaxAuditForm .af-btn:focus-visible,
.call-to-action:focus-visible,
.epax-shop-link:focus-visible{
outline:3px solid var(--ds-gold);
outline-offset:3px;
}
/* nav links are CTAs too — same height so the header never mixes 36 and 44 */
.call-to-action--nav,
header .nav-item a, header .nav-item button{
min-height:var(--ds-cta-height);
display:inline-flex;
align-items:center;
font-family:Inter, system-ui, sans-serif;
font-size:15px;
font-weight:500;
}
/* ---- 9. SURFACES: ONE RADIUS, ONE SHADOW ------------------------------- */
.pricing-card, .featured-card, .card, .grid-body,
#epaxTeam .team-card, #epaxTeam .team-note,
.template-content-image, img.template-content-image{
border-radius:var(--ds-radius);
}
/* images: consistent corner treatment everywhere */
.featured-card .img, .featured-card .img img,
.landing-card img, .use-cases-detail img,
#epaxTeam .team-photo{
border-radius:var(--ds-radius);
overflow:hidden;
}
/* ---- 10. WHITESPACE ---------------------------------------------------- */
/* premium = generous margins. Section rhythm lifted onto the 8pt scale. */
section + section{margin-block-start:var(--space-2xl)}
/* ---- 11. FONT REACH (conservative) ------------------------------------
An earlier attempt blanket-!importanted span/a/button to Inter. That
overrode the Google Symbols ICON font, so nav chevrons rendered as the
literal text "keyboard_arrow_down", and a 48px min-height on nav items
wrapped the whole header. Both reverted.
No !important is needed: this file loads after the compiled component
styles, so equal-specificity class selectors already win, and body-level
inheritance carries Inter everywhere the bundle does not override it. */
.body, .caption, .small, .code,
.call-to-action, .call-to-action--nav,
.button, .button-primary, .button-secondary, .button-compact,
input, button, textarea, select{
font-family:Inter, system-ui, -apple-system, sans-serif;
}
/* headings, including their inner spans — but never an icon glyph */
h1 span, h2 span, h3 span, h4 span,
.landing-main span, .typed-container span,
.heading-1 span, .heading-2 span, .heading-3 span,
.heading-4 span, .heading-5 span, .heading-6 span{
font-family:"Playfair Display", Georgia, serif;
}
.symbol, .symbol *, i, [class*="arrow"]::after, [class*="arrow"]::before{
font-family:"Google Symbols" !important; /* icons are glyphs, never remapped */
}
/* ---- 12. CTA GEOMETRY (real CTAs only) ---------------------------------
Deliberately NOT applied to .call-to-action--nav or header nav items —
forcing 48px there wrapped the header. Nav links get their tap target from
the existing pointer:coarse rule instead. */
app-button a, app-button button,
.epax-shop-link,
#epaxAuditForm .af-btn,
#epaxGeoBand .geo-cta{
min-height:var(--ds-cta-height);
border-radius:var(--ds-btn-radius);
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:600;
}
/* ---- 13. COMPILED BUTTON CLASSES ---------------------------------------
The bundle scopes these as .button[_ngcontent-*], which outranks a bare
.button. Narrow !important — these are text buttons, never icon glyphs,
so this cannot repeat the ligature bug from the reverted sweep. */
.button:not(.call-to-action--nav),
.button-primary:not(.call-to-action--nav),
.button-secondary:not(.call-to-action--nav),
.button-compact:not(.call-to-action--nav),
.button-primary-inverse:not(.call-to-action--nav){
font-family:Inter, system-ui, -apple-system, sans-serif !important;
}
/* the hamburger is .button.button-compact.button-primary.call-to-action--nav
and its GLYPH is the literal word "menu" — excluded above, re-asserted here */
/* ONLY the hamburger, which lives in .header-actions-right and whose glyph
is the literal word "menu". Targeting button.call-to-action--nav instead put
every DESKTOP nav label ("Services", "Pricing") into the icon font, which has
no Latin letters — the nav rendered as wrapped uppercase fallback glyphs. */
.header-actions-right button, .call-to-action--nav .symbol{
font-family:"Google Symbols" !important;
}
/* ---- 14. REMAINING SUB-48px CONTROLS -----------------------------------
Measured on /, /pricing, /product, /faq, /shop: the language pill rendered
at 26px, carousel/slider controls at 36px, inverse buttons at 41px. Every
interactive control now clears the 48px thumb target. Icon buttons are
included — only their box grows, never their font. */
#epaxLangTg button, .langtg button,
.button-compact, .slider-control-button,
.button-primary-inverse, .button-secondary-inverse,
.carousel-nav button{
min-height:var(--ds-cta-height);
min-width:var(--ds-cta-height);
display:inline-flex;
align-items:center;
justify-content:center;
}
/* the shop page is standalone and styles its own headings */
#epaxTeam h2, #epaxTeam h3, .shop h2{
font-family:"Playfair Display", Georgia, serif;
}
/* ---- 15. HAMBURGER TOUCH TARGET ----------------------------------------
The desktop nav buttons stay at 36px on purpose: forcing 48px on
.call-to-action--nav wrapped the entire header twice during this work, and
the existing @media (pointer:coarse) rule already gives them 44px on touch.
The hamburger is the one that must clear 48px — it is the only control on
mobile — and it is safely scoped to .header-actions-right. */
.header-actions-right button,
.header-actions-right app-button{
min-height:48px !important;
min-width:48px !important;
}