@charset "UTF-8";
@font-face { font-family: 'Graphik'; src: url("/assets/fonts/Graphik-Regular.eot"); src: url("/assets/fonts/Graphik-Regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Graphik-Regular.woff2") format("woff2"), url("/assets/fonts/Graphik-Regular.woff") format("woff"), url("/assets/fonts/Graphik-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; font-display: swap; }

@font-face { font-family: 'Graphik'; src: url("/assets/fonts/Graphik-Medium.eot"); src: url("/assets/fonts/Graphik-Medium.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Graphik-Medium.woff2") format("woff2"), url("/assets/fonts/Graphik-Medium.woff") format("woff"), url("/assets/fonts/Graphik-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; unicode-range: U+000-5FF; font-display: swap; }

@font-face { font-family: 'Kalam'; src: url("/assets/fonts/Kalam-Bold.eot"); src: url("/assets/fonts/Kalam-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Kalam-Bold.woff2") format("woff2"), url("/assets/fonts/Kalam-Bold.woff") format("woff"), url("/assets/fonts/Kalam-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; }

@font-face { font-family: 'Kalam'; src: url("/assets/fonts/Kalam-Regular.eot"); src: url("/assets/fonts/Kalam-Regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Kalam-Regular.woff2") format("woff2"), url("/assets/fonts/Kalam-Regular.woff") format("woff"), url("/assets/fonts/Kalam-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

@font-face { font-family: 'Henrietta'; src: url("/assets/fonts/VCHenrietta-SemiBold.eot"); src: url("/assets/fonts/VCHenrietta-SemiBold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/VCHenrietta-SemiBold.woff2") format("woff2"), url("/assets/fonts/VCHenrietta-SemiBold.woff") format("woff"), url("/assets/fonts/VCHenrietta-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Henrietta'; src: url("/assets/fonts/VCHenrietta-Medium.eot"); src: url("VCHenrietta-Medium.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/VCHenrietta-Medium.woff2") format("woff2"), url("/assets/fonts/VCHenrietta-Medium.woff") format("woff"), url("/assets/fonts/VCHenrietta-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

#fader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; background: #080C14; animation-duration: 500ms; animation-timing-function: ease-in-out; }

@keyframes fade-out { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes fade-in { from { opacity: 0; }
  to { opacity: 1; } }

#fader.fade-out { opacity: 0; animation-name: fade-out; }

#fader.fade-in { opacity: 1; animation-name: fade-in; }

/** NORMALIZE */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, picture, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-adjust-hue-button, input[type="number"]::-webkit-outer-adjust-hue-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -webkit-box-sizing: content-box; box-sizing: content-box; /* 2 */ }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

.spacer-1x { height: 4px; }

.spacer-2x { height: 8px; }

.spacer-4x { height: 16px; }

.spacer-6x { height: 24px; }

.spacer-8x { height: 32px; }

.spacer-10x { height: 40px; }

.spacer-12x { height: 48px; }

.spacer-16x { height: 64px; }

.spacer-24x { height: 96px; }

.justify-space-between { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }

@media screen and (min-width: 480px) { .show-on-mobile { display: none; } }

@media screen and (max-width: 480px) { .show-on-mobile { display: block; } }

h1, h2, h3, h4, h5 { font-family: "Henrietta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-weight: 600; }

h1 { margin: 24px 0; font-size: 5rem; line-height: 1.125em; }

@media (max-width: 768px) { h1 { font-size: 3rem; } }

h2 { font-size: 4rem; line-height: 1.125em; margin: 16px 0; }

@media (max-width: 768px) { h2 { font-size: 2.5rem; } }

h3 { font-size: 1.75rem; line-height: 2.5rem; margin: 0; }

h4 { font-size: 1.25em; margin-bottom: .5rem; }

h4 i { font-size: 1em; }

h5 { font-size: 1rem; margin: 0; }

h6 { font-size: 1em; line-height: 1.8em; font-weight: 400; margin-bottom: 0em; }

p { font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin-top: 0px; margin-bottom: 0px; font-size: 1.7rem; }

@media (max-width: 768px) { p { font-size: 1.4rem; } }

p a { color: #FFBB25; transition: 0.1s all; border-bottom: 1px solid #cbd4da61; }

p a:hover { border-bottom: 1px solid #FFBB25; }

@media (max-width: 480px) { p { font-size: 1.6rem; } }

.body-small { font-size: 1.4rem; opacity: .8; }

@media (max-width: 480px) { .body-small { font-size: 1.2rem; } }

.body-small-emphasized { font-size: 1.4rem; font-weight: 500; padding-bottom: 8px; }

@media (max-width: 480px) { .body-small-emphasized { font-size: 1.2rem; } }

sup { font-family: "Fakt Mono", "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: .65em; }

b { font-weight: 500; color: white; }

p > strong { font-weight: 500; }

a { color: inherit; text-decoration: none; }

ol { padding-left: 1.5em; color: inherit; }

.subhead { font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-transform: uppercase; font-size: 1rem; letter-spacing: .05em; }

.animated-header { font-weight: 600; overflow: hidden; }

.animated-header .letter { display: inline-block; line-height: 1em; }

li { padding-bottom: 10px; color: inherit; }

u { text-decoration: none; color: #0C393C; border-bottom: 1px solid #0C393C; padding-bottom: 5px; }

.fadeIn { animation: 0.6s ease-out 0s 1 fadeInAnimation; }

@keyframes fadeInAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }

.slideUp { animation: 0.4s ease-out 0s 1 slideUp; }

@keyframes slideUp { 0% { opacity: 0;
    transform: translateY(60px); }
  100% { opacity: 1;
    transform: translateY(0); } }

@keyframes gradient { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }

.hoverScale { transition: 0.2s all; transform: scale(1); }

.hoverScale:hover { transform: scale(1.05); transform: rotateZ(1.5); }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.letter { animation: 0.6s ease-out 0s 1 color_change; }

@keyframes color_change { from { color: #e71a1a; }
  to { color: white; } }

@keyframes bounce { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); } }

.bounce { animation: bounce 2s linear infinite; display: inline-block; animation-timing-function: ease-in-out; }

nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(8, 12, 20, 0.88); z-index: 999; transform: translateY(-100%); transition: transform 0.3s; transition-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86); padding: 8px 0; border-bottom: 1px solid #474747cc; box-shadow: 0px 1px 58px 0px rgba(0, 0, 0, 0.06); backdrop-filter: saturate(180%) blur(20px); margin: 0 auto; }

@media screen and (max-width: 480px) { nav { display: none; } }

.nav-container { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; }

@media screen and (max-width: 1240px) { .nav-container { padding: 0 24px; } }

.logo { display: flex; gap: 8px; max-height: 16px; }

.logo img { height: 16px; width: auto; border-radius: 0px; }

.logo-large { display: flex; gap: 8px; height: 24px; }

.logo-large img { width: auto; border-radius: 0px; }

nav.visible { transform: translateY(0); }

@keyframes rotate { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(0deg); } }

#compass { display: inline-block; animation: rotate infinite 4s both; }

/** THE BULK OF IT ALL */
html { box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }

body { overflow-x: hidden; background: #080C14; font-family: "Graphik", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: common-ligatures; color: #f7f4dd; }

body ::selection { background: #1D2026; /* WebKit/Blink Browsers */ }

body ::-moz-selection { background: #1D2026; /* Gecko Browsers */ }

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

*, *:after, *:before { box-sizing: inherit; }

*::selection { background: gray; }

img { border-radius: 1px; width: 100%; display: block; }

hr { height: 1px; background-color: #2d3338; border: none; }

video { display: block; border-radius: 1px; }

button { font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-weight: 500; font-size: 1.25rem; border-radius: 4px; padding: 12px 24px; text-align: center; text-decoration: none; border: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; display: inline-block; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); background-color: #FFBB25; border-radius: 4px; border: 0; box-sizing: border-box; color: #080C14; margin: 0; min-height: 56px; min-width: 120px; padding: 16px 20px; position: relative; text-align: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; }

button:hover { transform: translateY(-2px); }

button:focus { outline: none; }

button:hover { background-color: #c99115; }

button.secondary-button { font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-weight: 500; font-size: 1.25rem; border-radius: 4px; padding: 12px 24px; text-align: center; text-decoration: none; border: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; display: inline-block; transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); background-color: transparent; border: 3px solid transparent; color: white; box-shadow: none; width: fit-content; }

button.secondary-button:hover { transform: translateY(-2px); }

button.secondary-button:focus { outline: none; }

button.small-button { font-size: 1rem; min-height: 32px; min-width: 120px; }

.button-group { display: flex; gap: 8px; align-items: center; justify-content: center; }

@media screen and (max-width: 1000px) { .button-group { justify-content: center; } }

@media screen and (max-width: 480px) { .button-group.hide-on-mobile { display: none; } }

.button-group-navigation { display: flex; gap: 8px; align-items: center; }

@media screen and (max-width: 1000px) { .button-group-navigation { justify-content: center; } }

.content { margin: 0 auto; padding: 48px 0; border-radius: 1px; }

body.disable-scroll { overflow: hidden; }

.input-group { display: grid; grid-template-columns: 4fr 1fr; grid-gap: 8px; }

.input-group button { border-radius: 1px; }

input { border: none; padding: 8px; border-radius: 1px; background: #2e363d; }

input:focus { outline: -webkit-focus-ring-color auto 0px; outline-color: blue; outline-style: auto; outline-width: 0px; border: 1px solid #0C393C; caret-color: #0C393C; color: white; }

body { margin: 0 auto; }

.full-width-bg { background: #080C14; }

.full-width-bg-green { background: #0C393C; }

.about-interview-kit { max-width: 800px; margin: 0 auto; padding: 96px 0; }

@media screen and (max-width: 480px) { .about-interview-kit { padding: 48px 0; } }

.hero-text h1 { margin-top: 0px; }

.hero-animation { background-color: #1a1e25; height: 100vh; animation: scaleIn 1000ms; animation-fill-mode: forwards; display: flex; align-items: center; justify-content: center; }

@keyframes scaleIn { 0% { opacity: 0;
    transform: scale(0.9, 0.9); }
  100% { opacity: 1;
    transform: scale(1, 1); } }

.hero-animation img { padding: 0 48px; animation: hover 2s infinite ease; }

.body-section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 94px; justify-content: center; align-items: center; margin-bottom: 94px; }

.icon-large { width: 64px; height: 64px; }

.content-preview-wrapper { max-width: 1200px; width: 90vw; margin: 0 auto; text-align: center; background-color: #14151D; border-radius: 16px; padding: 48px; margin-top: 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; }

@media (max-width: 480px) { .content-preview-wrapper { padding: 24px; margin: 96px 0 0 0; width: 100%; } }

.content-preview-header { display: flex; gap: 48px; flex-direction: column; align-items: center; justify-content: center; }

.chapter img { padding-bottom: 32px; }

.chapter-preview { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 48px; text-align: left; }

@media (max-width: 768px) { .chapter-preview { grid-template-columns: 1fr; } }

.chapter-preview ul { padding-left: 0; }

.chapter-preview li { font-size: 1.2rem; list-style: none; }

.chapter-preview li:before { content: "→ "; }

.purchase-cta { text-align: center; background-color: white; border-radius: 1px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 48px; display: flex; gap: 48px; flex-direction: column; align-items: center; justify-content: center; margin-top: 48px; }

.purchase-cta .button-guarantee { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }

.purchase-cta .button-guarantee p { color: #71717a; }

.purchase-cta .button-guarantee p span { border-bottom: 1px solid #71717a; padding-bottom: 4px; font-weight: 500; }

.image-large { max-width: 1200px; margin: 0 auto; }

.horizontal-margin { margin: 0 48px; }

@media screen and (max-width: 480px) { .horizontal-margin { margin: 0 24px; } }

.emphasis-underline { color: #FFBB25; text-decoration: none; font-family: 'Kalam'; word-spacing: -.5rem; }

.columns { max-width: 1200px; width: 90vw; margin: 0 auto; display: flex; gap: 12px; position: relative; overflow: hidden; width: 100%; }

.columns .column { display: flex; flex-direction: column; gap: 12px; }

.icon-starburst { width: 128px; text-align: center; display: inline-block; margin-top: -108px; }

@keyframes rotate { /* define the "rotate" animation */
  from { transform: rotate(0deg);
    /* start at 0 degrees */ }
  to { transform: rotate(360deg);
    /* end at 360 degrees (full rotation) */ } }

@keyframes hover { /* define the "hover" animation */
  0% { transform: translateY(0);
    /* start at the original position */ }
  50% { transform: translateY(-10px);
    /* end 5 pixels above the original position */ }
  100% { transform: translateY(0);
    /* end 5 pixels above the original position */ } }

@keyframes jerkrotate { /* define the "rotate" animation */
  0% { transform: rotate(-15deg);
    /* start at 0 degrees */ }
  50% { transform: rotate(15deg);
    /* end at 360 degrees (full rotation) */ }
  100% { transform: rotate(-15deg);
    /* start at 0 degrees */ } }

#mobile-scroll-hint { padding-top: 96px; }

#scroll-hint { cursor: default; opacity: 0; animation: slideUp 1s linear forwards 1s; animation-timing-function: ease-in-out; width: 100%; max-width: 600px; padding: 12px 24px; text-align: center; background: #27272a; border-radius: 24px 24px 0 0; }

@media screen and (max-width: 992px) { #scroll-hint { border-top: 1px solid #3f3f46; border-left: 1px solid #3f3f46; border-right: 1px solid #3f3f46; } }

@media screen and (max-width: 480px) { #scroll-hint { opacity: 0 !important; } }

@keyframes slideUp { 0% { opacity: 0;
    transform: translateY(60px); }
  100% { opacity: 1;
    transform: translateY(0); } }

#scroll-hint #icon { animation: jerkrotate 2s infinite ease; color: #FFBB25; display: inline-block; }

#canvas > canvas { max-width: 100%; height: 100%; }

.container { display: flex; height: 100vh; border-bottom: 2px solid #14151E; }

.column { width: 50%; }

.column-wrapper { max-width: 600px; display: flex; flex-direction: column; gap: 96px; }

.right { position: absolute; top: 0; width: 100vw; height: 100vh; z-index: -10; }

.left { width: 100%; background-color: #080c14e3 !important; padding: 40px 16px 0 16px !important; text-align: center; align-items: center; justify-content: center; }

.column { width: 100%; }

.left { background-color: #080C14; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: left; padding: 48px 48px 0 48px; }

.right { background-color: #14151E; }

.two-column { display: grid; grid-template-columns: 1fr 1fr; max-width: 800px; margin: 0 auto; padding: 0 0 64px 0; grid-gap: 48px; }

@media (max-width: 768px) { .two-column { grid-template-columns: 1fr; } }

.two-column + .two-column { padding: 0 0 96px 0; }

.icon-small { width: 48px; padding-bottom: 16px; }

.divider { max-width: 800px; margin: 0 auto; opacity: .25; }

.note { border-radius: 12px 12px 0 0; background: #f7f4dd; color: #080C14; max-width: 800px; margin: 0 auto; padding: 64px; }

@media screen and (max-width: 768px) { .note { padding: 48px; } }

@media screen and (max-width: 480px) { .note { padding: 24px; margin: 0 8px 120px 8px; border-radius: 12px; } .note p { font-size: 1.1rem !important; } }

.note p { font-size: 1.2rem; }

.note p a { color: inherit; border-bottom: 1px solid #080C14; }

.note img { width: 60px; padding-bottom: 16px; }

.note .intro { display: flex; gap: 24px; align-items: center; padding-bottom: 32px; }

.inline-CTA { max-width: 800px; margin: 0 auto; padding: 96px 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.inline-CTA img { max-width: 600px; padding-bottom: 32px; }

.bottom-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(8, 12, 20, 0.88); padding: 16px 0; border: 1px solid #474747cc; box-shadow: 0px 1px 58px 0px rgba(0, 0, 0, 0.06); backdrop-filter: saturate(180%) blur(20px); }

@media screen and (max-width: 480px) { .bottom-bar { display: block; } }

.bottom-bar button { font-size: 1.2rem; }

.small { font-size: 1.2rem; opacity: .8; }

.footer-wrapper { width: 100%; background: #14151C; box-shadow: 0px -16px 16px rgba(17, 17, 26, 0.1); z-index: 10000; }

footer { max-width: 1200px; width: 90vw; margin: 0 auto; max-width: 1200px; margin: 0 auto; padding: 32px 0; text-align: center; display: flex; justify-content: space-around; }

footer p { font-size: 1.4rem; }

@media screen and (max-width: 480px) { footer { display: none; } }

/**************************\ Basic Modal Styles \**************************/
.modal { font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; z-index: 10000000; }

.modal ::selection { background: #2e363d; /* WebKit/Blink Browsers */ }

.modal ::-moz-selection { background: #2e363d; /* Gecko Browsers */ }

.modal p { line-height: 1.4em; }

.modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000000; }

.modal__container { margin: 16px; background-color: #fff; padding: 32px; max-width: 576px; max-height: 90vh; border-radius: 1px; overflow-y: auto; box-sizing: border-box; }

.modal__header { display: flex; justify-content: space-between; align-items: center; position: sticky; }

.modal__title { margin-top: 0; margin-bottom: 0; font-weight: 600; font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1.25; color: #18181b; box-sizing: border-box; }

.modal__close { font-size: 1em; background: transparent; border: 1px solid white; padding: 8px; }

.modal__header .modal__close:before { content: "\2715"; }

.modal__content { margin-top: 2rem; margin-bottom: 1rem; line-height: 1.5; color: rgba(0, 0, 0, 0.8); }

.modal__content p { color: inherit; margin-bottom: 0px; }

.modal__btn { font-size: 2rem !important; padding: 0.5rem 1rem; background-color: #e6e6e6; color: rgba(0, 0, 0, 0.8); border-radius: 0.25rem; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; margin: 0; will-change: transform; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out,-webkit-transform 0.25s ease-out; }

.modal__btn-primary { background-color: #00449e; color: black; }

/**************************\ Demo Animation Style \**************************/
@keyframes mmfadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes mmfadeOut { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes mmslideIn { from { transform: translateY(15%); }
  to { transform: translateY(0); } }

@keyframes mmslideOut { from { transform: translateY(0); }
  to { transform: translateY(-10%); } }

.micromodal-slide { display: none; }

.micromodal-slide.is-open { display: block; }

.micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; }

/*# sourceMappingURL=main.css.map */