@font-face {
  font-family: "Charles Modern";
  src: url("../assets/fonts/CharlesModern-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Charles Modern";
  src: url("../assets/fonts/CharlesModern-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #66D4FF;
  --blue: #009DDB;
  --cta: #459AD5;
  /* pill blue, sampled off the client frames */
  --chev: #55AADC;
  /* answer chevron */
  --pick: #91CCEA;
  /* answer pressed state */
  --hair: #A6A6A6;
  /* answer outline */
  --slate: #233441;
  --navy: #042858;
  --the: #6B4E9E;
  /* "THE" above the playstyle name, off the Outro export */
  --ink: #000000;
  --card: #FFFFFF;
  --paper: #FFFFFF;
  /* the exports' own ground */
  --band: #000000;
  /* desktop letterbox surround - see .cs-wrap below */

  --s: min(100vw, 56.25vh);
  --u: calc(var(--s) / 1080);

  /* Type scale, in design units. These are the ladder's top rung; js/flow.js
     steps them down per question until the headline and the four pills fit
     between the progress dots and the Schwab logo. See FIT in flow.js. */
  --qsize: 70;
  --asize: 44;
  --agap: 70;

  --font: "Charles Modern", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}


.cs-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

@media (min-aspect-ratio: 9/16) {
  .cs-wrap {
    background-color: var(--band);
  }
}

.cs-bg,
.cs-stage {
  position: absolute;
  width: var(--s);
  height: calc(var(--u) * 1920);
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
  overflow: hidden;
}

.cs-bg {
  object-fit: fill;
  /* the export IS 9:16, so fill == contain here */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Taps belong to the pills only; everything else falls through. */
.cs-stage {
  pointer-events: none;
}

.cs-frame {
  position: relative;
  width: var(--s);
  height: calc(var(--u) * 1920);
  overflow: hidden;
  text-align: center;
}


.cs-bg,
.cs-frame {
  display: none;
}

[data-step="intro"] .cs-bg[data-bg="intro"],
[data-step="intro"] .cs-frame[data-frame="intro"],
[data-step="q1"] .cs-bg[data-bg="q1"],
[data-step="q1"] .cs-frame[data-frame="q1"],
[data-step="q2"] .cs-bg[data-bg="q2"],
[data-step="q2"] .cs-frame[data-frame="q2"],
[data-step="q3"] .cs-bg[data-bg="q3"],
[data-step="q3"] .cs-frame[data-frame="q3"],
[data-step="q4"] .cs-bg[data-bg="q4"],
[data-step="q4"] .cs-frame[data-frame="q4"],
[data-step="result"] .cs-frame[data-frame="result"] {
  display: block;
}


.cs-q-h1 {
  position: absolute;
  left: calc(var(--u) * 150);
  right: calc(var(--u) * 150);
  top: calc(var(--u) * 300);
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--u) * var(--qsize));
  line-height: 1.27;
  letter-spacing: calc(var(--u) * -1);
  color: var(--ink);
}

/* ==========================================================================
   Choice stack
   ==========================================================================*/

.cs-choices {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 757);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--u) * var(--agap));
  padding: 0 calc(var(--u) * 107);
  margin: 0;
}

[data-step="intro"] .cs-choices {
  top: calc(var(--u) * 1458);
}

[data-step="result"] .cs-choices {
  top: calc(var(--u) * 1448);
}

.cs-pill {
  position: relative;
  width: 100%;
  min-height: calc(var(--u) * 160);
  margin: 0;
  padding: calc(var(--u) * 24) calc(var(--u) * 130) calc(var(--u) * 24) calc(var(--u) * 55);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: var(--card);
  border: calc(var(--u) * 3) solid var(--hair);
  border-radius: calc(var(--u) * 80);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: calc(var(--u) * var(--asize));
  line-height: 1.24;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .12s ease-out;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* pressed state - the tint the client frames show on the picked answer */
.cs-pill:active,
.cs-pill.is-picked {
  background: var(--pick);
  border-color: var(--pick);
}

/* chevron, drawn rather than shipped so CSS can tint it */
.cs-pill::after {
  content: "";
  position: absolute;
  right: calc(var(--u) * 57);
  top: 50%;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-right: calc(var(--u) * 6) solid var(--chev);
  border-top: calc(var(--u) * 6) solid var(--chev);
  transform: translateY(-50%) rotate(45deg);
}

/* ---- CTA pill: same component, different job --------------------------- */
/* Used by the intro ("Find your type") and the result ("Visit Schwab.com"). */
.cs-cta {
  width: calc(var(--u) * 596);
  min-height: calc(var(--u) * 155);
  padding: 0 calc(var(--u) * 40);
  justify-content: center;
  text-align: center;
  background: var(--cta);
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 78);
}

.cs-cta:active,
.cs-cta.is-picked {
  background: var(--cta);
  border-color: transparent;
}

.cs-cta::after {
  content: none;
}

/* ---- accessibility ------------------------------------------------------ */

.cs-pill:focus-visible {
  outline: calc(var(--u) * 6) solid var(--blue);
  outline-offset: calc(var(--u) * 4);
}

@media (prefers-reduced-motion: reduce) {
  .cs-pill {
    transition: none;
  }
}

.cs-frame[data-frame="result"] {
  background: var(--paper);
}

.cs-tick {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 118);
  width: calc(var(--u) * 128);
  height: calc(var(--u) * 128);
  transform: translateX(-50%);
}

.cs-done,
.cs-kicker,
.cs-the,
.cs-type,
.cs-body {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.cs-done {
  top: calc(var(--u) * 285);
  font-size: calc(var(--u) * 42);
  line-height: 1.2;
  font-weight: 700;
  color: var(--slate);
}

.cs-kicker {
  top: calc(var(--u) * 452);
  font-size: calc(var(--u) * 52);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

.cs-the {
  top: calc(var(--u) * 625);
  font-size: calc(var(--u) * 50);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: calc(var(--u) * 2);
  color: var(--the);
}

.cs-type {
  top: calc(var(--u) * 688);
  font-size: calc(var(--u) * 134);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: calc(var(--u) * -3);
  white-space: nowrap;
}

.cs-type>span {
  display: inline-block;
  color: #2E5CA6;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .cs-type>span {
    background-image: linear-gradient(95deg,
        #C9498E 0%, #A8438F 22%, #6E4198 42%, #2F5BA6 62%, #0C7FC4 80%, #00A0DF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.cs-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 921);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 31);
}

.cs-rule-line {
  display: block;
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 3);
  background: var(--slate);
}

.cs-rule-dot {
  display: block;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: var(--blue);
}

.cs-body {
  top: calc(var(--u) * 991);
  padding: 0 calc(var(--u) * 195);
  font-size: calc(var(--u) * 50);
  line-height: 1.24;
  font-weight: 500;
  color: var(--slate);
}

.cs-logo {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 1687);
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 144);
  transform: translateX(-50%);
}