@font-face {
  font-family: "Slanter-Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Book.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Book-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: normal;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: italic;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Bold-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 100 200;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Extra-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: italic;
  font-weight: 100 200;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Extra-Light-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Book.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: italic;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Bold-Italic.woff2") format("woff2");
}

html, body, *, *::before, *::after {
  font-synthesis: none;
}

:root {
  --background-color: #F3F3F1;
  --light-bg: #F7F7F8;
  --white-bg: #fff;
  --text-color: #292929;
  --text-color-dark-light: rgba(41, 41, 41, 0.5);
  --text-color-light-med: rgba(243, 243, 241, 0.5);
  --text-color-light: rgba(243, 243, 241, 0.7);
  --user-bubble: #DCDCD6;
  --border-color: #cccccc;
  --border-color-opacity: rgba(204, 204, 204, 0.5);
  --border-color-dark: #42423D;
  --contrast: #1B1B18;
  --contrast-text: #ffffff;
  --med-dark-text: #262626;
  --med-text: #676767;
  --med-light-text: #3D3D3D;
  --light-text: #8e8e8e;
  --sidebar-border-color: #e3e3e3;
  --black-shadow: rgba(0, 0, 0, 0.14);

  --color-green-slanter: #969640;

  --file-btn-mobile-bg: #DCDCD6;
  --file-btn-mobile-bg-trans: rgba(220, 220, 214, 0.8);

  --mobile-quiz-bg: rgba(255, 255, 255, 0.35);
  --mobile-quiz-pill: rgba(41, 41, 41, 0.42);

  --thinking-gradient: rgba(255, 255, 255, 0.7);

  --sidebar-controls: rgba(0, 0, 0, 0.35);
  
  --image-controls: #ffffff;
  
  --no-avatar: #40403d;

  --circle-bg-correct: rgba(113, 196, 58, 0.3);
  --circle-bg-wrong: rgba(224, 62, 51, 0.3);
  
  --green-text: #71C43A;
  --green-border: rgba(113, 196, 58, 0.6);
  --green-bg-transp: rgba(113, 196, 58, 0.1);
  --green-bg-not-transp: #DEF1E9;

  --blue-accent: #3471c7;
  --highlight-text: #104c96;
  --blue-accent-light: hsla(215, 70%, 51%, 0.15);
  --blue-accent-med: rgba(43, 116, 217, 0.30);
  --blue-accent-med-bg: #B3D5F4;
  --blue-accent-dark: #3471c7;

  --input-box-bg: #F6F6F7;
  --input-border: #E8E8E9;
  --darker-box-bg: #fff;

  --hover-color: #41413E;
  --darker-hover-color: rgba(0, 0, 0, 0.14);

  --red-bg: #fde8e6;
  --red-text: #e03e33;
  --red-bg-transp: rgba(224, 62, 51, 0.15);
  --red-bg-not-transp: #FAE2E0;

  --disabled-bg: #F2F2F2;
  --disabled-text: #4C4C4C;
  --skeleton-base: #e4e8ed;
  --skeleton-highlight: #f3f6f9;
  --invite-skeleton-base: #e4e8ed;
  --invite-skeleton-highlight: #f3f6f9;
}

:root[data-skeleton-theme="dark"] {
  --invite-skeleton-base: #31353a;
  --invite-skeleton-highlight: #42474e;
}

:root[data-skeleton-theme="light"] {
  --invite-skeleton-base: #e4e8ed;
  --invite-skeleton-highlight: #f3f6f9;
}



html {
  color: var(--text-color);
  font-family: 'Slanter-Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  background-color: var(--background-color);
}

button {
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
}

body {
    margin: 0;
}

.hidden{
    display: none !important;
}

.right{
    margin-left: auto;
}

.page-transition-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--background-color);
    opacity: 0;
    pointer-events: none;
    z-index: 2147483647;
    transition: opacity 360ms ease;
    will-change: opacity;
}

.page-transition-overlay.is-visible {
    opacity: 1;
}

.auth-step-transition-box {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background-color: var(--background-color);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 260ms ease;
    will-change: opacity;
}

.auth-step-transition-box.is-visible {
    opacity: 1;
}

.serif_text{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-color);
}

.serif_text.large{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-color);
}

.serif_text.xlarge{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-color);
}

.serif_text.xxlarge{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
}

.achieve_heading{
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.34em;
}

.achieve_heading_fixed{
    flex: 0 0 auto;
    max-width: 340px;
    font-size: 3.2rem;
    font-weight: 200;
}

.school_heading_fixed{
    flex: 0 0 auto;
    max-width: 500px;
    width: 150%;
    font-size: 3.2rem;
    font-weight: 200;
}

.achieve_heading_dot{
    margin-left: -0.22em;
}

.achieve_word_swap{
    color: var(--background-color);
    background: var(--color-green-slanter);
    display: inline-grid;
    grid-template-columns: auto;
    padding: 5px 10px;
    border-radius: 4px;
    position: relative;
    display: inline-grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: max-content;
    justify-items: start;
    align-items: start;
    overflow: hidden;
    height: 1.1em;
    vertical-align: baseline;
    text-align: left;
    transition: none;
}

.achieve_word_swap.is-live{
    transition: width 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.achieve_word_layer{
    grid-area: 1 / 1;
    display: block;
    white-space: nowrap;
    text-align: left;
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.42s ease;
    will-change: transform, opacity;
}

.achieve_word_swap.is-resetting .achieve_word_layer{
    transition: none !important;
}

.achieve_word_layer.current{
    transform: translateY(0%);
    opacity: 1;
}

.achieve_word_layer.next{
    transform: translateY(-115%);
    opacity: 0;
}

.achieve_word_swap.is-animating .achieve_word_layer.current{
    transform: translateY(115%);
    opacity: 0;
}

.achieve_word_swap.is-animating .achieve_word_layer.next{
    transform: translateY(0%);
    opacity: 1;
}

.serif_text.large.bold{
    font-weight: 500;
}

.serif_text.large.center{
    text-align: center;
}


.serif_text.med.width{
    max-width: 340px;
}

.sans_serif_text{
    position: relative;
    font-family: 'Slanter-Sans', serif;
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.3;
    transition: color 0.2s ease;
}

.sans_serif_text.light{
    font-size: 1rem;
    opacity: 0.9;
}

.sans_serif_text.xlarge{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.3rem;
    max-width: 670px;
    color: var(--med-text);
    margin-top: 35px;
    line-height: 1.3;
}


.sans_serif_text.large{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: center;
    max-width: 600px;
    color: var(--med-text);
    margin-top: 35px;
    line-height: 1.3;
}

.sans_serif_text.large.left{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: left;
    max-width: 600px;
    color: var(--med-text);
    margin-top: 35px;
    line-height: 1.3;
}

.sans_serif_text.slighly_smaller{
    font-family: 'Slanter-Sans', serif;
    font-size: 1rem;
    text-align: left;
    max-width: 600px;
    color: var(--text-color);
    line-height: 1.3;
}

.sans_serif_text.slighly_smaller.grey{
    color: var(--text-color-dark-light);
}

.sans_serif_text.much_smaller.grey.terms_link{
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sans_serif_text.much_smaller.grey.terms_link:hover{
    color: var(--text-color);
}

.sans_serif_text.slighly_smaller.red{
    color: var(--red-text);
}

.sans_serif_text.much_smaller.center{
    text-align: center;
    color: var(--text-color);
    margin: 14px 0;
}

.sans_serif_text.much_smaller.center.or{
    text-align: center;
    z-index: 3;
    position: relative;
    opacity: 0.3;
    margin: 0;
}

.sans_serif_text.much_smaller.center.grey{
    text-align: center;
    z-index: 3;
    position: relative;
    color: var(--text-color-dark-light);
    margin: 0;
}

.sans_serif_text.much_smaller.center.grey.terms_link{
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sans_serif_text.much_smaller.center.grey.terms_link:hover{
    color: var(--text-color);
}


.sans_serif_text.much_smaller{
    font-family: 'Slanter-Sans', serif;
    font-size: 0.85rem; /* USED TO BE 0.95rem*/
    text-align: left;
    max-width: 600px;
    color: var(--med-text);
    line-height: 1.3;
    width: 100%;
}

.sans_serif_text.much_smaller.text_color{
    color: var(--text_color);
}

.sans_serif_text.med.bold{
    display: flex;
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: left;
    max-width: 600px;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 16px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sans_serif_text.large.black{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: left;
    max-width: 600px;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 8px;
    line-height: 1.3;
}

.sans_serif_text.small{
    font-size: 1.1rem;
    text-align: left;
    max-width: 400px;
    color: var(--med-text);
    line-height: 1.3;
}

.sans_serif_text.smaller{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.05rem;
    text-align: left;
    max-width: 400px;
    color: var(--med-text);
    line-height: 1.3;
}

.sans_serif_text.smaller.right{
    margin-left: auto;
}

.sans_serif_text.smallest{
    font-family: 'Slanter-Sans', serif;
    font-size: 0.9rem;
    text-align: left;
    max-width: 400px;
    color: var(--med-text);
    line-height: 1.3;
}

.topbar{
    width: 100%;
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: 500;
    height: 65px;
    position: fixed;
    top: 0;
    user-select: none;
}

.topbar_content{
    margin: 0 12px;
    max-width: 1000px;
    display: flex;
    width: 100%;
}

.logotop{
    height: 35px;
    width: 35px;
    color: var(--text-color);
    cursor: pointer;
}

.topbar_right{
    margin-left: auto;
    display: flex;
    gap: 32px;
    align-items: center;
}

.topbar_nav_btn{
    position: relative;
    color: var(--text-color);  
    cursor: pointer;  
    display: flex;
    gap: 4px;
}

.topbar_nav_btn:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}

.topbar_nav_btn:hover .dropdown_icon{
    transform: rotate(180deg);
}

.topbar_nav_btn_dropdown{
    width: 22px;
    height: 22px;
    pointer-events: auto;
    padding: 7px 0;
    padding-left: 10px;
    margin-left: 12px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 10px;
    border-left: 1.8px solid var(--light-bg);
    background-color: var(--contrast);
    transition: background 0.15s ease;
}

.topbar_nav_btn_dropdown:hover{
    background-color: var(--hover-color);
}

.topbar_cta_btn:has(.topbar_nav_btn_dropdown:hover){
    background-color: var(--contrast);
}

.topbar_cta_btn{
    display: flex;
    align-items: center;
    background-color: var(--contrast);
    color: var(--background-color);
    padding-left: 15px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease;
    position: relative;
}

.topbar_cta_btn.outline{
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color);
    height: 22px;
    gap: 10px;
    padding: 7px 15px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.topbar_cta_btn.outline:hover{
    background-color: var(--file-btn-mobile-bg-trans);
    border-color: transparent;
}

.dropdown_icon{
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.topbar_cta_btn:hover{
    background-color: var(--hover-color);
}

.topbar_nav_btn_dropdown:hover .dropdown_icon{
    transform: rotate(180deg);
}

.hero_top{
    overflow: visible;
    margin: 0 12px;
    position: relative;
    margin-top: 155px;
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-self: center;
    padding-top: 100px;
    flex-direction: column;
}

.hero_top.pricing{
    height: fit-content !important;
    margin-bottom: 100px;
}

.hero_top.login{
    min-height: 100dvh !important;
    padding-bottom: 0;
    margin: 0 auto;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    max-width: 1300px;
    gap: 7dvw;
    justify-content: center;
    align-items: center;
}

/* Sign-in form left, Eidos banner right. The banner sits beside the
   email/verify/password steps only — onboarding takes the page alone. */
#auth_step_email{
    align-items: center;
}

#auth_step_email > .loginbtn,
#auth_step_email > .cta_btn.fw,
#auth_step_email .input_login{
    width: 400px;
    max-width: 100%;
}

/* The input's wrapper sized itself to the input's 400px, so on a phone the
   input ran past the screen; the wrapper takes the 400px cap instead. */
#auth_step_email .input_login_block{
    width: 400px;
    max-width: 100%;
}

#auth_step_email .input_login_block .input_login{
    width: 100%;
}

.banner-right{
    width: 490px;
    flex-shrink: 1;
    min-width: 0;
    /* Above .auth-step-transition-box (z 4), so step fades leave it alone... */
    position: relative;
    z-index: 5;
}

/* ...except a fade into/out of onboarding, which takes the banner with it. */
.hero_top.login.auth-transition-covers-banner .banner-right{
    z-index: auto;
}

/* Model banners: full-frame 1226x1582 PNG layers per model, in one box.
   Quark is the base card; Eidos sits on top. Everything that moves in the
   slide reads ONE animated value, --seam (the Eidos card's left edge):
   87.5% with Quark active, 13% with Eidos active. The card is rigid (its art
   moves with its edge), so each peek strip shows that model's own left edge.
   The seam line + shadow ride --seam, and
   the taglines are masked either side of it with a soft edge, so the top
   text changes over exactly as the seam passes. The inline script in
   login_main.html flips data-active (and .is-active on the cards, which
   replays the incoming card's entrance) every 35s or on hovering the strip.
   Text rises out from behind a fitted limb circle (cqw = % of banner width,
   so masks scale with it): Eidos out of space onto the sun (centre
   -2751,-555 r 3814 image px; edge pushed past the resting text so it isn't
   cut), Quark up from behind Jupiter (centre 672,1552 r 1264; sharp edge on
   the limb itself). Eidos: slow irregular brightness flicker + shuttle coasting to
   a stop over 8 min. Quark: a slow push-in on the planet. */
/* Wipe edge for the text write-on; the initial value shows everything, so
   no-animation = finished frame. */
@property --reveal{
    syntax: '<percentage>';
    inherits: false;
    initial-value: 115%;
}

/* Second Quark mask layer's alpha: 0 = only the limb mask, 1 = whole text. */
@property --quark-unmask{
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --seam{
    syntax: '<percentage>';
    inherits: true;
    initial-value: 13%;
}

.auth_banner_stage{
    position: relative;
    width: 100%;
    aspect-ratio: 1226 / 1582;
    overflow: hidden;
    border-radius: 21px;
    background-color: #000;
    container-type: inline-size;
    --seam: 87.5%;
    transition: --seam 1400ms cubic-bezier(0.65, 0, 0.25, 1);
    /* The whole banner fades in as one, so no layer pops in ahead of the rest. */
    animation: auth-banner-fade-in 700ms ease-out both;
}

.auth_banner_stage[data-active="eidos"]{
    --seam: 13%;
}

.auth_banner_card,
.auth_banner_card_content,
.auth_banner_layer,
.auth_banner_textclip{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}

.auth_banner_card{
    overflow: hidden;
}

/* The card starts half a line-width before the seam and draws the hand-drawn
   line itself (::before), its left edge cut to the line's own outline (mask
   layer 1: the line's path + its right half; layer 2: everything after it).
   Line and edge are one element, so no sliver of either image can show past
   the line, even mid-slide. The mask's path is nudged ~0.1cqw right of the
   drawn one, so the cut lands inside the line instead of on its antialiased
   edge (which let a yellow fringe of Eidos through on the Quark side). */
.auth_banner_card.eidos{
    transform: translateX(calc(var(--seam) - 0.5cqw));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='791' viewBox='0 0 3 791' preserveAspectRatio='none'%3E%3Cpath transform='translate%280.35 0%29' d='M0.569666 347.831C0.769143 330.377 -0.112505 316.637 0.0121121 295.363C0.136731 274.089 0.604398 270.903 0.499175 246.539C0.393971 222.176 0.713842 197.799 0.521699 186.951C0.329501 176.104 0.910588 174.959 0.781527 159.554C0.652483 144.15 0.728333 134.814 0.91721 121.342C1.10609 107.869 1.26734 66.4794 1.03532 51.4288C0.80329 36.378 1.20589 19.2118 1.30137 8.88816C1.33111 5.67258 1.37182 3.14198 1.41416 1.20182C1.43212 0.380026 1.46968 0.000199009 1.50676 2.95517e-10C1.50678 2.96571e-10 1.50681 2.97625e-10 1.50683 2.98679e-10C1.553 0.00024091 1.59839 0.58905 1.60423 1.64526C1.63254 6.77265 1.70725 14.4359 1.87467 23.4887C2.18686 40.3686 1.84188 42.213 2.00229 65.0066C2.16271 87.8 2.48342 101.494 2.27603 128.314C2.06866 155.133 2.93649 161.293 2.44467 199.15C1.95289 237.007 2.86048 240.992 2.98117 278.717C3.10185 316.443 2.60108 364.064 2.6426 386.806C2.68412 409.548 2.78984 440.092 2.67006 472.331C2.55029 504.57 2.85264 544.368 2.63893 579.955C2.42522 615.542 2.1553 665.853 1.97444 689.097C1.79357 712.339 1.75277 718.005 1.86329 740.377C1.92681 753.237 1.86693 770.952 1.63331 785.916C1.51573 793.447 1.35202 791.74 1.27369 784.16C1.15915 773.076 1.23567 763.977 1.03107 758.265C0.622182 746.853 0.465325 742.003 0.703316 727.595C0.941278 713.189 0.400472 706.4 0.462717 698.002C0.524993 689.604 0.843984 689.742 0.598217 647.039C0.352442 604.336 0.289731 580.926 0.230728 564.754C0.171725 548.583 0.448579 514.816 0.348651 488.461C0.248731 462.105 0.340312 408.525 0.17672 386.927C0.0131403 365.329 0.370189 365.284 0.569666 347.831Z' fill='%23000'/%3E%3Crect x='1.85' y='0' width='1.5' height='791' fill='%23000'/%3E%3C/svg%3E") 0 0 / 1cqw 100% no-repeat,
        linear-gradient(90deg, transparent 1cqw, #000 1cqw);
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='791' viewBox='0 0 3 791' preserveAspectRatio='none'%3E%3Cpath transform='translate%280.35 0%29' d='M0.569666 347.831C0.769143 330.377 -0.112505 316.637 0.0121121 295.363C0.136731 274.089 0.604398 270.903 0.499175 246.539C0.393971 222.176 0.713842 197.799 0.521699 186.951C0.329501 176.104 0.910588 174.959 0.781527 159.554C0.652483 144.15 0.728333 134.814 0.91721 121.342C1.10609 107.869 1.26734 66.4794 1.03532 51.4288C0.80329 36.378 1.20589 19.2118 1.30137 8.88816C1.33111 5.67258 1.37182 3.14198 1.41416 1.20182C1.43212 0.380026 1.46968 0.000199009 1.50676 2.95517e-10C1.50678 2.96571e-10 1.50681 2.97625e-10 1.50683 2.98679e-10C1.553 0.00024091 1.59839 0.58905 1.60423 1.64526C1.63254 6.77265 1.70725 14.4359 1.87467 23.4887C2.18686 40.3686 1.84188 42.213 2.00229 65.0066C2.16271 87.8 2.48342 101.494 2.27603 128.314C2.06866 155.133 2.93649 161.293 2.44467 199.15C1.95289 237.007 2.86048 240.992 2.98117 278.717C3.10185 316.443 2.60108 364.064 2.6426 386.806C2.68412 409.548 2.78984 440.092 2.67006 472.331C2.55029 504.57 2.85264 544.368 2.63893 579.955C2.42522 615.542 2.1553 665.853 1.97444 689.097C1.79357 712.339 1.75277 718.005 1.86329 740.377C1.92681 753.237 1.86693 770.952 1.63331 785.916C1.51573 793.447 1.35202 791.74 1.27369 784.16C1.15915 773.076 1.23567 763.977 1.03107 758.265C0.622182 746.853 0.465325 742.003 0.703316 727.595C0.941278 713.189 0.400472 706.4 0.462717 698.002C0.524993 689.604 0.843984 689.742 0.598217 647.039C0.352442 604.336 0.289731 580.926 0.230728 564.754C0.171725 548.583 0.448579 514.816 0.348651 488.461C0.248731 462.105 0.340312 408.525 0.17672 386.927C0.0131403 365.329 0.370189 365.284 0.569666 347.831Z' fill='%23000'/%3E%3Crect x='1.85' y='0' width='1.5' height='791' fill='%23000'/%3E%3C/svg%3E") 0 0 / 1cqw 100% no-repeat,
        linear-gradient(90deg, transparent 1cqw, #000 1cqw);
}

.auth_banner_card.eidos::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1cqw;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%22791%22 viewBox=%220 0 3 791%22 preserveAspectRatio=%22none%22 fill=%22none%22%3E%3Cpath d=%22M0.569666 347.831C0.769143 330.377 -0.112505 316.637 0.0121121 295.363C0.136731 274.089 0.604398 270.903 0.499175 246.539C0.393971 222.176 0.713842 197.799 0.521699 186.951C0.329501 176.104 0.910588 174.959 0.781527 159.554C0.652483 144.15 0.728333 134.814 0.91721 121.342C1.10609 107.869 1.26734 66.4794 1.03532 51.4288C0.80329 36.378 1.20589 19.2118 1.30137 8.88816C1.33111 5.67258 1.37182 3.14198 1.41416 1.20182C1.43212 0.380026 1.46968 0.000199009 1.50676 2.95517e-10C1.50678 2.96571e-10 1.50681 2.97625e-10 1.50683 2.98679e-10C1.553 0.00024091 1.59839 0.58905 1.60423 1.64526C1.63254 6.77265 1.70725 14.4359 1.87467 23.4887C2.18686 40.3686 1.84188 42.213 2.00229 65.0066C2.16271 87.8 2.48342 101.494 2.27603 128.314C2.06866 155.133 2.93649 161.293 2.44467 199.15C1.95289 237.007 2.86048 240.992 2.98117 278.717C3.10185 316.443 2.60108 364.064 2.6426 386.806C2.68412 409.548 2.78984 440.092 2.67006 472.331C2.55029 504.57 2.85264 544.368 2.63893 579.955C2.42522 615.542 2.1553 665.853 1.97444 689.097C1.79357 712.339 1.75277 718.005 1.86329 740.377C1.92681 753.237 1.86693 770.952 1.63331 785.916C1.51573 793.447 1.35202 791.74 1.27369 784.16C1.15915 773.076 1.23567 763.977 1.03107 758.265C0.622182 746.853 0.465325 742.003 0.703316 727.595C0.941278 713.189 0.400472 706.4 0.462717 698.002C0.524993 689.604 0.843984 689.742 0.598217 647.039C0.352442 604.336 0.289731 580.926 0.230728 564.754C0.171725 548.583 0.448579 514.816 0.348651 488.461C0.248731 462.105 0.340312 408.525 0.17672 386.927C0.0131403 365.329 0.370189 365.284 0.569666 347.831Z%22 fill=%22%23170A01%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    z-index: 1;
}

/* Rigid card, no parallax: the artwork's left edge always sits on the seam
   (+0.5cqw cancels the card's own offset), so the Quark-active strip shows
   the sun's left edge and, with Eidos active, the art starts at 13%. */
.auth_banner_card.eidos .auth_banner_card_content{
    transform: translateX(0.5cqw);
    background-color: #170a01;
}

/* Shadow cast by whichever card is the thin strip onto the big one:
   leftwards onto Quark when Eidos is the strip, rightwards onto Eidos when
   Quark is. (The line itself is drawn by the Eidos card.) Both start at the
   seam's centre, under the line: the wavy line doesn't fill its box, and
   starting at the box edge left a bright unshadowed sliver beside it. */
.auth_banner_seam{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--seam);
    width: 1cqw;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.auth_banner_seam::before,
.auth_banner_seam::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7cqw;
    transition: opacity 700ms ease;
}

.auth_banner_seam::before{
    right: 50%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12) 35%, transparent);
    opacity: 1;
}

.auth_banner_seam::after{
    left: 50%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12) 35%, transparent);
    opacity: 0;
}

.auth_banner_stage[data-active="eidos"] .auth_banner_seam::before{
    opacity: 0;
}

.auth_banner_stage[data-active="eidos"] .auth_banner_seam::after{
    opacity: 1;
}

/* Fixed in place over the whole box; each shows only on its own side of the
   seam, fading over 6% so the swap reads as a soft wipe. */
.auth_banner_stage .auth_banner_tagline{
    position: absolute;
    top: 4.1%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

.auth_banner_stage .auth_banner_tagline.quark{
    color: #fff;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--seam) - 6%), transparent var(--seam));
    mask-image: linear-gradient(90deg, #000 calc(var(--seam) - 6%), transparent var(--seam));
}

.auth_banner_stage .auth_banner_tagline.eidos{
    color: #1d1606;
    -webkit-mask-image: linear-gradient(90deg, transparent var(--seam), #000 calc(var(--seam) + 6%));
    mask-image: linear-gradient(90deg, transparent var(--seam), #000 calc(var(--seam) + 6%));
}

/* Eidos */
.auth_banner_card.eidos .auth_banner_layer.bg{
    animation: auth-banner-sun-flicker 13s ease-in-out infinite;
}

.auth_banner_layer.shuttle{
    /* Starts 5% left of its artwork spot and coasts right, slowing the whole
       way (strong ease-out) until it stops at +50% after 8 minutes. */
    animation: auth-banner-shuttle-cross 480s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Frozen while Eidos is away; the switch script rewinds it to the start as
   Eidos slides back in (it sits outside the peek strip then, so the jump
   isn't seen). */
.auth_banner_card.eidos:not(.is-active) .auth_banner_layer.shuttle{
    animation-play-state: paused;
}

.auth_banner_card.eidos .auth_banner_textclip{
    -webkit-mask-image: radial-gradient(circle at -224.39cqw -45.29cqw, #000 315.2cqw, transparent 316.8cqw);
    mask-image: radial-gradient(circle at -224.39cqw -45.29cqw, #000 315.2cqw, transparent 316.8cqw);
}

.auth_banner_layer.text.eidos{
    -webkit-mask-image: linear-gradient(24deg, #000 var(--reveal), transparent calc(var(--reveal) + 12%));
    mask-image: linear-gradient(24deg, #000 var(--reveal), transparent calc(var(--reveal) + 12%));
}

/* Slides out of space and writes on bottom-to-top at the same time. */
.auth_banner_card.eidos.is-active .auth_banner_layer.text.eidos{
    animation:
        auth-banner-eidos-emerge 1600ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both,
        auth-banner-reveal-eidos 2000ms cubic-bezier(0.45, 0, 0.2, 1) 1000ms both;
}

/* Inactive, it sinks back into space the way it came, like Quark's does.
   (Eidos starts active, so there's no first-load case to skip.) */
.auth_banner_card.eidos:not(.is-active) .auth_banner_layer.text.eidos{
    animation: auth-banner-eidos-sink 900ms cubic-bezier(0.4, 0.15, 0.75, 0.4) forwards;
}

/* Quark */
.auth_banner_card.quark .auth_banner_layer.bg{
    transform-origin: 50% 18.2%;
    animation: auth-banner-planet-approach 60s ease-in-out infinite alternate;
}

/* Masks the planet itself out (limb r 1264 image px) with a sharp edge
   (~1px of antialiasing). The text's lowest bits dip onto the planet at
   rest, so once the entrance ends a second, uniform layer (union with the
   first) fades in and reveals them; it fades back out before the sink. */
.auth_banner_card.quark .auth_banner_textclip{
    -webkit-mask-image:
        radial-gradient(circle at 54.8cqw 126.62cqw, transparent 103.14cqw, #000 103.24cqw),
        linear-gradient(rgb(0 0 0 / var(--quark-unmask)), rgb(0 0 0 / var(--quark-unmask)));
    mask-image:
        radial-gradient(circle at 54.8cqw 126.62cqw, transparent 103.14cqw, #000 103.24cqw),
        linear-gradient(rgb(0 0 0 / var(--quark-unmask)), rgb(0 0 0 / var(--quark-unmask)));
}

/* Starts at 3000ms: the slide-up ends at 2600ms and the write-on at 3000ms.
   The two states use differently NAMED keyframes on purpose: with the same
   name the browser keeps the old animation running across the class flip,
   so the reveal jumped straight to its end on activation. */
.auth_banner_card.quark.is-active .auth_banner_textclip{
    animation: auth-banner-quark-unmask 900ms ease-out 3000ms both;
}

.auth_banner_card.quark:not(.is-active) .auth_banner_textclip{
    animation: auth-banner-quark-remask 300ms ease-in both;
}

.auth_banner_layer.text.quark{
    -webkit-mask-image: linear-gradient(90deg, #000 var(--reveal), transparent calc(var(--reveal) + 12%));
    mask-image: linear-gradient(90deg, #000 var(--reveal), transparent calc(var(--reveal) + 12%));
}

/* Rises from behind the planet and writes on left-to-right. */
.auth_banner_card.quark.is-active .auth_banner_layer.text.quark{
    animation:
        auth-banner-quark-emerge 1600ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both,
        auth-banner-reveal-quark 2000ms cubic-bezier(0.45, 0, 0.2, 1) 1000ms both;
}

/* Inactive, it sinks back so the left peek strip shows only the planet;
   before the first switch it starts there with no motion. */
.auth_banner_card.quark:not(.is-active) .auth_banner_layer.text.quark{
    animation: auth-banner-quark-sink 900ms cubic-bezier(0.64, 0, 0.78, 0) forwards;
}

.auth_banner_stage:not(.has-switched) .auth_banner_card.quark:not(.is-active) .auth_banner_layer.text.quark,
.auth_banner_stage:not(.has-switched) .auth_banner_card.quark:not(.is-active) .auth_banner_textclip{
    animation-duration: 0s;
}

/* Time until the next switch: fills over AUTH_BANNER_SWITCH_MS (35s, keep
   in step with the script). Spans the active card's visible part with 24px
   either side (the 13% / 12.5% strips match --seam). On a switch it fades
   out, jumps to the other card at the slide's midpoint (the 0s transitions
   delayed 700ms) while invisible, and fades back in; the script rewinds the
   fill at that same midpoint. */
.auth_banner_progress{
    position: absolute;
    left: 24px;
    right: calc(12.5% + 24px);
    transition:
        left 0s 700ms,
        right 0s 700ms;
    bottom: 3.5%;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

.auth_banner_stage[data-active="eidos"] .auth_banner_progress{
    left: calc(13% + 24px);
    right: 24px;
}

/* One keyframe set per direction, so each switch restarts the fade (a single
   shared name would not re-run). Not before the first switch: no blink on load. */
.auth_banner_stage.has-switched[data-active="eidos"] .auth_banner_progress{
    animation: auth-banner-progress-swap-to-eidos 1400ms ease-in-out both;
}

.auth_banner_stage.has-switched[data-active="quark"] .auth_banner_progress{
    animation: auth-banner-progress-swap-to-quark 1400ms ease-in-out both;
}

.auth_banner_progress::after{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
    animation: auth-banner-progress 35s linear infinite;
}

@keyframes auth-banner-progress-swap-to-eidos{
    0%{ opacity: 1; }
    40%, 60%{ opacity: 0; }
    100%{ opacity: 1; }
}

@keyframes auth-banner-progress-swap-to-quark{
    0%{ opacity: 1; }
    40%, 60%{ opacity: 0; }
    100%{ opacity: 1; }
}

@keyframes auth-banner-progress{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
}

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

/* Uneven steps and spacing so it never reads as a regular pulse; never
   below the artwork's own brightness (1), only brighter. */
@keyframes auth-banner-sun-flicker{
    0%, 100%{ filter: brightness(1); }
    11%{ filter: brightness(1.07); }
    19%{ filter: brightness(1.01); }
    34%{ filter: brightness(1.11); }
    45%{ filter: brightness(1.03); }
    52%{ filter: brightness(1.08); }
    67%{ filter: brightness(1.005); }
    79%{ filter: brightness(1.09); }
    88%{ filter: brightness(1.02); }
}

@keyframes auth-banner-shuttle-cross{
    from{ transform: translate(-5%, 0.44%); }
    to{ transform: translate(50%, -3.08%); }
}

/* 200 image px along the sun limb's outward normal (0.906, 0.423). */
@keyframes auth-banner-eidos-emerge{
    from{ transform: translate(14.8%, 5.35%); }
    to{ transform: translate(0, 0); }
}

@keyframes auth-banner-eidos-sink{
    from{ transform: translate(0, 0); }
    to{ transform: translate(14.8%, 5.35%); }
}

/* "Slanter Eidos 1" spans ~18-87% of the 24deg gradient line. */
@keyframes auth-banner-reveal-eidos{
    from{ --reveal: 6%; }
    to{ --reveal: 92%; }
}

/* Scaled about the top of the limb, so the planet grows away from the text. */
@keyframes auth-banner-planet-approach{
    from{ transform: scale(1); }
    to{ transform: scale(1.06); }
}

/* 180 image px along Jupiter's inward normal (0.111, 0.994). */
@keyframes auth-banner-quark-emerge{
    from{ transform: translate(1.63%, 11.3%); }
    to{ transform: translate(0, 0); }
}

@keyframes auth-banner-quark-unmask{
    from{ --quark-unmask: 0; }
    to{ --quark-unmask: 1; }
}

@keyframes auth-banner-quark-remask{
    from{ --quark-unmask: 1; }
    to{ --quark-unmask: 0; }
}

@keyframes auth-banner-quark-sink{
    from{ transform: translate(0, 0); }
    to{ transform: translate(1.63%, 11.3%); }
}

/* "Slanter Quark 1" spans ~4-83% of the width. */
@keyframes auth-banner-reveal-quark{
    from{ --reveal: -8%; }
    to{ --reveal: 88%; }
}

@media (prefers-reduced-motion: reduce){
    .auth_banner_stage,
    .auth_banner_layer,
    .auth_banner_textclip{
        animation: none !important;
    }

    .auth_banner_card.quark.is-active .auth_banner_textclip{
        --quark-unmask: 1;
    }

    /* No auto-switching under reduced motion, so nothing to count down. */
    .auth_banner_progress{
        display: none;
    }

    .auth_banner_card.quark:not(.is-active) .auth_banner_layer.text.quark{
        visibility: hidden;
    }
}

.sans_serif{
    position: relative;
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.3;
}

.sans_serif.larger{
    font-size: 1.1rem;
}

.hover_link{
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    cursor: pointer;
    transition: text-decoration-color 0.2s ease;
}

.hover_link:hover{
    text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
}

/* .hover_link colours itself from currentColor, so an <a> carrying it must not
   fall back to the UA link colour. .hover_link.blue still wins (!important). */
a.hover_link{
    color: inherit;
}

.hover_link.blue{
    color: var(--highlight-text) !important;
}

/* The login steps' consent links sit closer to their underline. */
.sans_serif_text.much_smaller.center.hover_link.terms_link{
    text-underline-offset: 3px;
}

.hero_top.login:has(#auth_step_onboarding:not(.hidden)) .banner-right{
    display: none;
}

@media (max-width: 900px){
    .banner-right{
        display: none;
    }
}

.hero_animation{
    width: 45%;
    position: absolute;
    right: 0;
    top: 14%;
}

.hero_animation.platform{
    top: 4%;
}

.hero_text{
    max-width: 80%;
    font-family: "Slanter-Serif", serif;
    font-weight: 800;
    font-size: 4rem;
    z-index: 1;
}

.hero_text.center{
    text-align: center;
    align-self: center;
}

.hero_top .hero_text:not(.small) .hero_word,
.hero_text.news .hero_word,
.hero_text.med .hero_word{
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
    animation: heroWordFadeIn 560ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
    animation-delay: var(--word-delay, 0ms);
    will-change: opacity, transform, filter;
}

@keyframes heroWordFadeIn{
    to{
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .hero_top .hero_text:not(.small) .hero_word,
    .hero_text.news .hero_word,
    .hero_text.med .hero_word{
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.hero_text.med.word_reveal .hero_word{
    animation-play-state: paused;
}

.hero_text.med.word_reveal.is-visible .hero_word{
    animation-play-state: running;
}

.reveal_down{
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(2px);
}

.reveal_down.is-visible{
    animation: revealDownFadeIn 520ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes revealDownFadeIn{
    to{
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce){
    .reveal_down,
    .reveal_down.is-visible,
    .fade_up,
    .fade_up.is-visible,
    .float_in,
    .float_in.is-visible{
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.fade_up{
    opacity: 0;
    transform: translateY(18px);
    filter: blur(2px);
}

.fade_up.is-visible{
    animation: fadeUpIn 560ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
    animation-delay: var(--reveal-delay, 0ms);
}

.float_in{
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(2px);
}

.float_in.is-visible{
    animation: floatInItem 620ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes fadeUpIn{
    to{
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes floatInItem{
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 900px) {
    .hero_top {
        height: auto;           /* let content determine height */
        flex-direction: column;
        align-items: center;
    }

    .hero_animation {
        position: absolute;    /* pull out of absolute so it flows */
        top: -40px;
        right: unset;
        width: 200px;            /* bigger since it has full width now */
        order: -1;             /* move ABOVE hero_text */
        margin-bottom: 20px;
    }

    .hero_text {
        max-width: 100%;
        text-align: center;
        margin-top: 125px;
    }
}

.hero_text.small{
    margin-top: 98px;
    font-weight: 700;
    font-size: 1.5rem;
}

.hero_grid{
    width: 1050px;
    overflow: hidden;
    position: absolute;
    top: -33px;
    left: 40%;
    transform: translate( -50%);
    z-index: 0;
}

.arrow_svg{
    height: 20px;
    width: 20px;
}



.cta_btn{
    width: fit-content;
    display: flex;
    margin-top: 35px;
    border: none;
    background: var(--contrast);
    color: var(--light-bg);
    padding: 8px 25px;
    border-radius: 10px;
    font-size: 0.95rem;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    align-items: center;
    transition: scale 0.15s ease, background 0.15s ease, opacity 0.2s ease;
    z-index: 4;
}

.cta_btn.lt{
    background: var(--file-btn-mobile-bg);
    color: var(--text-color);
}

.cta_btn.fw{
    width: 100%;
    justify-content: center;
}

.cta_btn.fw.is-loading{
    gap: 0;
}

/* The label span stays visibility:hidden (not display:none) while loading so
   the button doesn't reflow/resize, but that means it still occupies its full
   layout width in the flex row - leaving the spinner shoved up against its
   right edge instead of centered. Position it absolutely (relative to
   .cta_btn's own position:relative) so it centers on the button regardless of
   the hidden label's width. */
.cta_btn.fw.is-loading .auth_btn_spinner{
    position: absolute;
    inset: 0;
    margin: auto;
}

/* Same ring as dashboard.css's .action-btn-spinner: a conic sweep in
   currentColor (the button's text), masked to a 1.5px ring. */
.auth_btn_spinner,
#spinner.spinner{
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(127, 127, 127, 0.16), currentColor);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: authBtnSpinnerRotate 0.8s linear infinite;
}

@keyframes authBtnSpinnerRotate{
    to{
        transform: rotate(360deg);
    }
}

/* Standalone (not inside a .cta_btn) variant for the age-verification
   waiting screen - bigger, and dark-on-light since it isn't sitting on a
   colored button background like the base spinner is. */
.auth_btn_spinner.lg{
    display: block;
    width: 28px;
    height: 28px;
    color: var(--text-color);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    margin: 24px auto 0;
}

.cta_btn.fw:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.cta_btn.fw:disabled:hover{
    background: var(--contrast);
}

.cta_btn.fw:disabled:active{
    scale: 1;
}

.cta_btn.fw.nm{
    margin-top: 16px;
}

.cta_btn.fw.mb{
    margin-bottom: 16px;
}

.cta_btn.not_allowed{
    opacity: 0.6;
    cursor: not-allowed;
}

.cta_btn.not_allowed:hover{
    opacity: 0.6;
    background: var(--contrast);
}

.cta_btn.not_allowed:active{
    scale: 1;
}

.cta_btn:hover{
    background-color: var(--hover-color);
}

.cta_btn:active{
    scale: 0.97;
}


.cta_btn.outline{
    display: flex;
    margin-top: 30px;
    border: 1px solid var(--background-color);
    background: transparent;
    color: var(--background-color);
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 0.95rem;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    align-items: center;
    transition: scale 0.15s ease;
}

.button_darker{
    z-index: 3;
    position: relative;
    top: -66px;
    filter: blur(31.9px);
    width: 390px;
}

.btn_content {
    z-index: 1;
    mix-blend-mode: difference;
    display: flex;
    gap: 10px;
    align-items: center;
}

.cta_btn.outline::before{
    position: absolute;
    left: -350px;
    content: "";
    width: 340px;
    height: 200px;
    transform: rotate(15deg);
    background: var(--background-color);
    transition: left 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    outline-offset: 0;
}

.cta_btn.outline:hover::before{
    left: 0;
}

.cta_btn.outline:hover{
    scale: 1.03;
}


.split_block{
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--light-bg);
    padding: 100px 0; 
}

.split_block.gap{
    margin-bottom:100px;    
}

.block{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    padding: 100px 0; 
}


.block.nofill{    
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 45px;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    width: 100%;
}

.animated_section_icon{
    width: 75px;
    height: 75px;
}

.vertical_split{
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    margin-top: 55px;
    width: 100%;
    max-width: 700px;
}

.item_svg{
    width: 24px;
    height: 24px;
}

.small_item_svg{
    width: 20px;
    height: 20px;
}


@media (prefers-reduced-motion: reduce){
    .logobtm.stagger_ready .logo_primary,
    .logobtm.stagger_ready .logo_secondary{
        transition: none;
        transform: none;
        opacity: 1;
    }
}

.footer{
    background-color: var(--contrast);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
}

.footer_top{
    margin: 0 auto;
    display: flex;
    gap: 16px;
    width: calc(100% - 60px);
    max-width: 1100px;
}

.footer_left{
    display: flex;
    align-items: flex-start;}

.logo_footer{
    width: 55px;
    cursor: pointer;
}

.footer_right{
    display: flex;
    margin-left: auto;
    gap: 55px;
}

.footer_nav_columns{
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.footer_nav_rows{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title_footer_nav{
    color: var(--background-color);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Same as homepage.css: on a phone the footer's columns stack instead of
   running off the right edge. */
@media (max-width: 640px) {
    .footer_top{
        flex-direction: column;
        gap: 40px;
    }

    .footer_right{
        margin-left: 0;
        gap: 30px;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .footer_nav_columns{
        gap: 30px;
    }
}

.btn_footer_nav{
    color: var(--text-color-light-med);
    font-weight: 300;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.btn_footer_nav:hover{
    color: var(--background-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer_bottom,
.footer_btm{
    margin: 0 auto;
    border-top: 1px solid var(--border-color-dark);
    width: calc(100% - 60px);
    max-width: 1100px;
    margin-top: 50px;
    padding: 24px 0;
    display: flex;
    align-items: center;
}

.footer_text{
    color: var(--text-color-light-med);
}

.social_box{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.social{
    color: var(--text-color-light-med);
    height: 18px;
    width: 18px;
    cursor: pointer;
    transition: color 0.2s ease; 
}

.social:hover{
    color: var(--background-color);
}

.login_block{
    text-align: center;
    align-self: center;
    z-index: 2;
    margin: auto 0;
    width: 100%;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login_block.hidden{
    display: none;
}

.login_block.payment{
    flex-direction: row;
    margin-top: 100px;
    margin-bottom: 100px;
    max-width: 100%;
    gap: 32px;
    box-sizing: border-box;
    padding: 0 16px;
}

.loginbtn{
    display: flex;
    width: 100%;
    font-size: 1rem;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    align-items: center;
    padding: 10px;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, scale 0.15s ease;
    outline: none;
    outline-offset: 0;
}

.loginbtn:hover{
    background-color: var(--file-btn-mobile-bg-trans);  
    border-color: transparent;
}

.loginbtn:active{
    scale: 0.97;
}

.social_icon{
    width: 18px;
    height: 18px;
    display: flex;
}

.or_line{
    width: 100%;
    position: relative;
    z-index: 2;
}

.line{
    z-index: 0;
    border-top: 1px solid var(--border-color);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
}

.or_line::before{
    content: "";
    position: absolute;
    opacity: 1 !important;
    width: 40px;
    height: 25px;
    background-color: var(--background-color);
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
}

.input_login_block{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input_login_block.hidden{
    display: none;
}

.input_login{
    border-radius: 10px;
    border: 1px solid var(--border-color-opacity);
    background-color: var(--light-bg);
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3;
    height: 42px;
    padding: 7px 15px;
    width: 100%;
    box-sizing: border-box;
    transition: outline 0.1s ease, outline-offset 0.1s ease;
    outline: none;
    outline-offset: 0;
}

.input_login:hover{
    border-color: var(--border-color);
}

.select_wrap{
    position: relative;
}

.input_select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 42px;
    line-height: 1.3;
    padding: 7px 44px 7px 15px;
    cursor: pointer;
    background-image: none;
}

.select_chevron{
    width: 20px;
    height: 20px;
    color: var(--text-color);
    opacity: 0.3;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.input_select::-ms-expand{
    display: none;
}

.input_login:-webkit-autofill,
.input_login:-webkit-autofill:hover,
.input_login:-webkit-autofill:focus,
.email_verification_input:-webkit-autofill,
.email_verification_input:-webkit-autofill:hover,
.email_verification_input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--text-color);
    font-family: 'Slanter-Sans', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    -webkit-text-size-adjust: 100%;
    box-shadow: 0 0 0 1000px var(--white-bg) inset;
    -webkit-box-shadow: 0 0 0 1000px var(--white-bg) inset;
    transition: background-color 9999s ease-out 0s;
}

.input_login:-webkit-autofill::first-line,
.email_verification_input:-webkit-autofill::first-line{
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3;
}

input:focus,
select:focus{
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

.input_login::placeholder{
    color: var(--text-color);
    opacity: 0.5;
}


.cta_btn.fw{
    width: 100%;
    height: 42px;
    margin: 0;
}


.acknowledge_block{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    gap: 15px;
}

.checkbox {
    width: 13px;
    height: 13px;
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--white-bg);
    color: transparent;
    padding: 0;
    cursor: pointer;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.can_focus, div, button{
    transition: outline 0.1s ease, outline-offset 0.1s ease ;
    outline: none ;
    outline-offset: 0 ;
}

.can_focus:focus-visible, div:focus-visible, button:focus-visible{
    outline: 2px solid var(--blue-accent) !important;
    outline-offset: 2px !important; 
}

.checkmark{
    width: 9px;
    height: 9px;
    aspect-ratio: 1;
    display: flex;
}

.checkbox.active{
    background-color: var(--blue-accent);
    color: var(--white-bg) !important;
    border-color: var(--blue-accent);
}

.selector{
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--white-bg);
    font-size: 1rem;
    max-height: 42px;
    height: 26px;
    display: flex;
    align-items: center;
    padding: 7px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.selector:hover{
    background-color: var(--light-bg);  
}

.selector_placeholder{
    color: var(--text-color);
    opacity: 0.3;
}

.chevron_icon{
    width: 20px;
    height: 20px;
    color: var(--text-color);
    opacity: 0.3;
    margin-left: auto;
}

.payment_left{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.Plan_options{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    height: 120px;
}

.Plan_option{
    max-height: 85.5px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    width: 100%;
    border-radius: 13px;
    border: 1px solid var(--border-color);
    background-color: var(--white-bg);
    box-shadow: 0px 34px 0px 0px #DCDCD6;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.Plan_option.not_active{
    opacity: 0.5;
}

.Plan_option.blue{
    box-shadow: 0px 34px 0px 0px rgba(43, 116, 217, 0.15);
}

.Plan_option_title{
    text-align: left;
    font-size: 0.95rem;
    color: var(--text-color);
}

.Plan_option_number{
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.Plan_option_small{
    font-size: 0.8rem;
    width: 90px;
    text-align: left;
    opacity: 0.5;
}

.Plan_option_title.grey{
    position: absolute;
    bottom: -27px;
    color: var(--text-color);
    opacity: 0.5;
}

.Plan_option_title.blue{
    position: absolute;
    bottom: -27px;
    color: var(--blue-accent);
}

.line_fw{
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.payment_details{
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: gap 0.28s ease;
}

.payment_details.is-collapsed{
    gap: 0;
}

.payment_details_content{
    overflow: visible;
    height: auto;
    opacity: 1;
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.payment_details.is-collapsed .payment_details_content{
    pointer-events: none;
    overflow: hidden;
}

.payment_details[hidden]{
    display: none !important;
}

.payment_details.btm{
    gap: 0;
}

.Payment_title{
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.Payment_title:hover{
    opacity: 1;
}

.Payment_title .chevron_icon.large{
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment_details.is-collapsed .Payment_title .chevron_icon.large{
    transform: rotate(-90deg);
}

.chevron_icon.large{
    width: 22px;
    height: 22px;
    opacity: 1;
}

.bold {
    font-weight: 600;
}

.payment_right{
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--border-color);
    background-color: rgba(220, 220, 214, 0.5);
    border-radius: 21px;
    padding: 24px;
    height: fit-content;
    text-align: left;
    max-width: 370px;
}

.right_text_title{
    margin-bottom: 16px;
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 600;
}

.right_text{
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.6;
    display: flex;
    align-content: center;
}

.right{
    margin-left: auto;
}

.right.large{
    font-size: 1.3rem;
}

.right_text_bold{
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    font-weight: 600;
}




.payment_message {
    min-height: 1.2em;
    font-size: 0.9rem;
    color: var(--med-text);
    margin-right: auto;
    display: block;
}

.payment_message.hidden{
    display: none;
}

.payment_message.error {
    color: var(--red-text);
}

.input_login_block:has(.payment_message.error:not(.hidden)) .input_login,
#auth_step_password:has(#auth_password_errors.error:not(.hidden)) .input_login,
#auth_step_verify:has(#auth_verify_errors.error:not(.hidden)) .email_verification_input{
    color: var(--red-text) !important;
    caret-color: var(--red-text);
    outline: 2px solid var(--red-text) !important;
    outline-offset: 2px !important;
}

.payment_message.success {
    color: var(--green-text);
}

.email_verification{
    text-align: center;
    align-items: center;
    gap: 4px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--white-bg);
    overflow: hidden;
    position: relative;
    border-radius: 21px;
    max-width: 250px;
    height: 90px;
    width: 100%;
    align-self: center;
    transform-origin: center;
    transform: scale(1);
    transition: height 0.25s ease, transform 0.25s ease;
}

.email_verification.code{
    height: 110px;
}

.email_verification.is-code{
    height: 110px;
    transform: scale(1.02);
}

.email_verification:hover .mail_icon{
    transform: rotate(8deg);
    bottom: -15px;
}

.mail_icon{
    transform-origin: center;
    position: absolute;
    bottom: -20px;
    width: 100%;
    margin: auto 0;
    transition: transform 0.3s ease, bottom 0.3s ease, opacity 0.25s ease;
}

.email_verification.is-code .mail_icon{
    transform: translateY(24px) scale(0.92);
    bottom: -90px;
    opacity: 0;
}

.email_verification.is-code:hover .mail_icon{
    transform: translateY(24px) scale(0.92);
    bottom: -90px;
}

.blue_text_btn{
    color: var(--blue-accent);
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 8px;
}

.blue_text_btn:hover{
    text-decoration: underline;
}

.blue_text_btn.inline{
    display: inline;
    margin-bottom: 0;
}

.blue_text_btn.disabled{
    color: var(--grey-text, #8b8b8b);
    cursor: default;
    pointer-events: none;
}

.sans_serif_text.email{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sans_serif_text.email::after{
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    top: 13px;
    background-color: var(--text-color);
    left: 0;
    transition: width 0.3s ease;
}

.login_block:has(.blue_text_btn:hover) .sans_serif_text.email::after {
    width: 100%;
}

.email_verification_input{
    border: 1px solid var(--border-color);
    background-color: var(--white-bg);
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--text-color);
    border-radius: 10px;
    width: 100%;
    height: 42px;
    padding: 7px 15px;
    text-align: center;
    box-sizing: border-box;
    margin-top: auto;
    transition: opacity 0.2s ease, transform 0.25s ease, max-height 0.25s ease, margin-top 0.25s ease;
}

.email_verification_input.auth_verification_input_hidden{
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    max-height: 0;
    margin-top: 0;
}

.email_verification.is-code .email_verification_input.auth_verification_input_hidden{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    max-height: 42px;
    margin-top: auto;
}

.email_verification_input::-webkit-outer-spin-button,
.email_verification_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.email_verification_input[type=number] {
  -moz-appearance: textfield;
}

.onboarding_box{
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 85px;
}

.onboarding_box.hidden{
    display: none;
}

.sans_serif_text.onboarding_text,
.serif_text.onboarding_text{
    line-height: 115%;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.sans_serif_text.onboarding_text_block,
.serif_text.onboarding_text_block{
    line-height: 2.3rem;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.sans_serif_text.onboarding_text.large,
.serif_text.onboarding_text.large{
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.sans_serif_text.onboarding_text.large {
    margin-bottom: 21px;
}

.sans_serif_text.onboarding_text.row,
.serif_text.onboarding_text.row{
    flex-direction: row;
}

.type{
    display: inline-flex;
}

.type span{
    word-break: break-all;
    height: 1.2em;
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    animation: t 2s linear forwards;
}

.type span::before{
    content: " ";
    display: inline-block;
}

/* Removing the `hidden` utility class from a box restarts any CSS animations
   inside it from scratch (browsers reset animations across a display:none <->
   visible transition) - so re-showing a box that's already been through its
   typewriter once (e.g. returning to step two to change the guardian email)
   would replay it. Add this class to skip straight to the fully-typed state. */
.no-typewriter .type span{
    animation: none !important;
    width: 100% !important;
}

@keyframes t{
    90%,100%{
        width: 100%;
    }
}

.intro_typewriter .type span{
    animation-duration: var(--typewriter-duration, 1.6s);
    animation-delay: var(--typewriter-delay, 0s);
    animation-timing-function: var(--typewriter-easing, linear);
}

.intro_typewriter .type_line_1 span{
    --typewriter-duration: 0.7s;
    --typewriter-delay: 0s;
    --typewriter-easing: ease-out;
}

.intro_typewriter .type_line_2 span{
    --typewriter-duration: 1.2s;
    --typewriter-delay: 0.8s;
}

.intro_typewriter .type_line_3 span{
    --typewriter-duration: 1.2s;
    --typewriter-delay: 2.3s;
}

.intro_typewriter .type_line_4 span{
    --typewriter-duration: 0.50s;
    --typewriter-delay: 3.5s;
    --typewriter-easing: ease-in;
}

.intro_typewriter .onboarding_text.row{
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.intro_typewriter .onboarding_text.row.intro_row_reveal{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.intro_typewriter .onboarding_text.row.intro_row_reveal.is-visible{
    opacity: 1;
    pointer-events: auto;
}

.intro_typewriter .onboarding_text.row.intro_row_reveal #intro_name_input{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.intro_typewriter .onboarding_text.row.intro_row_reveal.is-input-visible #intro_name_input{
    opacity: 1;
    pointer-events: auto;
}

.step_two_typewriter .type span{
    animation-duration: var(--typewriter-duration, 1s);
    animation-delay: var(--typewriter-delay, 0s);
    animation-timing-function: var(--typewriter-easing, linear);
}

.step_two_typewriter .step2_line_1 span{
    --typewriter-duration: 0.95s;
    --typewriter-delay: 0s;
    --typewriter-easing: ease-in;
}

.step_two_typewriter .step2_line_2 span{
    --typewriter-duration: 0.25s;
    --typewriter-delay: 0s;
}

.step_two_typewriter .step2_row_reveal{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.step_two_typewriter .step2_row_reveal .type span{
    animation-play-state: paused;
}

.step_two_typewriter .step2_row_reveal.is-visible{
    opacity: 1;
    pointer-events: auto;
}

.step_two_typewriter .step2_row_reveal.is-visible .type span{
    animation-play-state: running;
}

.step_three_typewriter .step3_review_line .type span{
    animation-duration: var(--typewriter-duration, 1.1s);
    animation-delay: var(--typewriter-delay, 0s);
    animation-timing-function: var(--typewriter-easing, linear);
    animation-play-state: paused;
}

.step_three_typewriter .step3_line_1 span{
    --typewriter-duration: 1.1s;
    --typewriter-delay: 0s;
    --typewriter-easing: ease-in;
}

.step_three_typewriter .step3_review_line.is-visible .type span{
    animation-play-state: running;
}

.step_three_fade{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.step_three_fade.is-visible{
    opacity: 1;
    pointer-events: auto;
}

.step_four_typewriter .step4_type_line .type span{
    animation-duration: var(--typewriter-duration, 1s);
    animation-delay: var(--typewriter-delay, 0s);
    animation-timing-function: var(--typewriter-easing, linear);
    animation-play-state: paused;
}

.step_four_typewriter .step4_type_line{
    opacity: 0;
}

.step_four_typewriter .step4_text_1 span{
    --typewriter-duration: 0.65s;
    --typewriter-delay: 0s;
    --typewriter-easing: ease-out;
}

.step_four_typewriter .step4_text_2 span{
    --typewriter-duration: 1.8s;
    --typewriter-delay: 0s;
}

.step_four_typewriter .step4_text_3 span{
    --typewriter-duration: 1.4s;
    --typewriter-delay: 0s;
}

.step_four_typewriter .step4_type_line.is-visible .type span{
    animation-play-state: running;
}

.step_four_typewriter .step4_type_line.is-visible{
    opacity: 1;
}

.step_four_typewriter .step_four_fade{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.step_four_typewriter .step_four_fade.is-visible{
    opacity: 1;
    pointer-events: auto;
}

.cta_btn.btm{
    margin-bottom: 85px;
}

.cta_btn.fw.intro_button_reveal{
    transition: opacity 0.4s ease;
}

.cta_btn.fw.intro_button_reveal:not(.is-visible){
    opacity: 0;
    pointer-events: none;
}

.cta_btn.fw.intro_button_reveal.is-visible{
    pointer-events: auto;
    transition: 0.3s ease;
}

/* Same reveal pattern as the primary onboarding buttons above, for the
   waiting screen's secondary text-link actions (not .cta_btn elements). */
#age_gate_resend_row.intro_button_reveal,
#age_gate_back_btn.intro_button_reveal,
#institution_step_back_btn.intro_button_reveal,
#institution_lost_signout_btn.intro_button_reveal,
#institution_lost_delete_btn.intro_button_reveal{
    transition: opacity 0.4s ease;
}

#age_gate_resend_row.intro_button_reveal:not(.is-visible),
#age_gate_back_btn.intro_button_reveal:not(.is-visible),
#institution_step_back_btn.intro_button_reveal:not(.is-visible),
#institution_lost_signout_btn.intro_button_reveal:not(.is-visible),
#institution_lost_delete_btn.intro_button_reveal:not(.is-visible){
    opacity: 0;
    pointer-events: none;
}

#age_gate_resend_row.intro_button_reveal.is-visible,
#age_gate_back_btn.intro_button_reveal.is-visible,
#institution_step_back_btn.intro_button_reveal.is-visible,
#institution_lost_signout_btn.intro_button_reveal.is-visible,
#institution_lost_delete_btn.intro_button_reveal.is-visible{
    pointer-events: auto;
}

/* Benefits list on the under-16 organisation step
   (#intro_step_institution_box): the same bordered box the age switches sit
   in, with Policies_block rows stacked inside instead of centred beside an
   avatar. */
.user_box.institution_benefits{
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
}

.user_box.institution_benefits .Policies_block{
    margin-bottom: 0;
    align-items: center;
}

.onboarding_input{
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
    border-bottom: 1.5px solid rgba(40, 40, 40, 0.5);
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 1.03rem;
    font-weight: 300;
    padding-bottom: 1px;
    color: var(--text-color);
    margin-left: 3px;
    width: 100%;
    transition: width 0.2s ease, border 0.1s ease;
    width: 200px;
    box-sizing: border-box;
}

.onboarding_input::placeholder{
    color: var(--text-color);
    opacity: 0.5;
}

.onboarding_input:focus{
    outline: none;
}

.onboarding_input.resize{
    border-bottom: 1.5px solid rgba(40, 40, 40, 0);
}

.onboarding_input.resize:focus{
    border-bottom: 1.5px solid rgba(40, 40, 40, 0.5);
}

#step2_name_input,
#step2_nickname_input{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
}

#step2_name_input:focus,
#step2_nickname_input:focus{
    text-overflow: clip;
}

.onboarding_input.dob_segment{
    width: 44px;
    text-align: center;
    margin-left: 8px;
    flex: none;
}

.onboarding_input.dob_segment.dob_year{
    width: 78px;
}

.dob_separator{
    color: var(--text-color);
    opacity: 0.5;
    margin-left: 8px;
}

.input_sizer{
    font-family: 'Slanter-Sans', sans-serif;
    position: absolute; 
    visibility: hidden; 
    white-space: pre; 
    font-weight: 300;
    margin-left: 2px;
    font-size: 1.03rem;
    line-height: normal;
}

.user_box{
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    padding: 13px 16px;
    width: 100%;
    align-items: center;
    gap: 16px;
    background-color: #dcdcd64f;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.user_box.age {
    margin-top: 16px;
}

.user_icon{
    min-height: 35px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: var(--no-avatar);
    border-radius: 10px;
    color: var(--white-bg);
}

.user_box_right{
    display: flex;
    flex-direction: column;
    font-size: 1.03rem;
    gap: 2px;
}

.user_box_small_text{
    color: var(--text-color);
    opacity: 0.5;
    font-size: 0.95rem;
}

.text-color {
    color: var(--text-color) !important;
    opacity: 1;
}

.Policies_block{
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.Policy_Icon{
    width: 25px;
    color: var(--med-text);
    margin-bottom: auto;
}

.Policy_Icon.text{
    color: var(--text-color);
    opacity: 0.8;
}

.button_icon{
    height: 17px;
    width: 17px;
}

.sans_serif_text.acknowledge{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.03rem;
    text-align: left;
    max-width: 600px;
    color: #282828cc;
    line-height: 1.3;
    width: 100%;
    transition: color 0.2s ease;
}

.sans_serif_text.acknowledge.terms_link{
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sans_serif_text.acknowledge.terms_link:hover{
    color: var(--text-color);
}

.sans_serif_text.acknowledge.bold.m{
    padding-top: 1px;
    margin-bottom: 4px;
    font-weight: 600;
}

.sans_serif_text.much_smaller.terms{
    font-size: 1.03rem !important;
}

.switch{
    margin-left: 31.4px;
    width: 53px;
    border-radius: 25px;
    height: 22px;
    padding: 2px;
    cursor: pointer;
    background-color: var(--text-color);
    transition: opacity 0.2s ease;
    position: relative;
}

.switchicon{
    background-color: var(--white-bg);
    border-radius: 25px;
    width: 35px;
    height: 22px;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    top: 2px;
    transition: left 0.1s ease, scale 0.1s ease, border 0.1s ease, opacity 0.1s ease;
    border: none;
}
.switch:active .switchicon{
    scale: 1.4;
    opacity: 0.8;
}

.switch.off{
    opacity: 0.5;
}

.switchicon.off{
    left: 2px;
}

.Policies_block_switch{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

a {
    text-decoration: none;
}

.BreakLine{
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}

.flex-direction-column {
    flex-direction: column;
}

.width-100-pc {
    width: 100%;
}

.margin-bottom-none {
    margin-bottom: 0;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-top-8-px {
    margin-top: 8px;
}

.margin-bottom-24-px{
    margin-bottom: 24px;
}

.margin-top-14-px{
    margin-top: 14px;
}

#consent_already_box,
#consent_request_box,
#consent_pending_box {
    text-align: center;
    margin-top: 0;
}

#auth_step_email,
#auth_step_verify,
#auth_step_password {
    max-width: 440px;
}

.align-self-center {
  align-self: center;
}


/* "Delete account" on the under-16 lockout screen: same text-button shape as
   Sign out above it, in the danger colour, since it is irreversible. */
#institution_lost_delete_btn{
    color: var(--red-text);
}

/* ------------------------------------------------------------------------
   Institution sign-in and creation (login_institution.html, served as
   the platform host's /login). Built from the onboarding pieces above (.onboarding_box,
   .user_box, .Policies_block_switch, .switch); only what they lack is here.
   ------------------------------------------------------------------------ */
.inst_page .hero_top.login{
    padding: 0 16px;
    box-sizing: border-box;
}

/* A stored session is being checked: no sign-in form flashes before the
   dashboard or the wizard takes over. */
.hero_top.login.is-resolving > .login_block{
    visibility: hidden;
}

#auth_step_notice{
    max-width: 440px;
    align-items: center;
}

#auth_step_notice .cta_btn.fw{
    width: 400px;
    max-width: 100%;
}

.inst_onboarding .onboarding_box{
    margin-bottom: 85px;
}

/* The country menu (about 300px tall) opens under the last field of the
   card; this much room keeps it clear of the footer. */
.inst_onboarding .onboarding_box[data-inst-box="address"]{
    margin-bottom: 230px;
}

/* Typed lines: the full text laid out invisibly, the typed part over it, so
   the box never reflows while it types (and long lines wrap, which the
   width-clip .type typewriter above cannot). */
.inst_type_line{
    position: relative;
}

.inst_type_line .inst_type_ghost{
    visibility: hidden;
}

.inst_type_line .inst_type_live{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

/* Cards, inline rows and buttons fade in once their box has finished typing. */
.inst_onboarding [data-inst-reveal]{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.inst_onboarding [data-inst-reveal].is-visible{
    opacity: 1;
    pointer-events: auto;
}

.inst_inline_row{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.onboarding_input.inst_inline_input{
    flex: 1 1 220px;
    min-width: 0;
    width: auto;
}

.user_box.inst_card{
    align-items: stretch;
    gap: 14px;
    margin-top: 8px;
}

.inst_field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0;
}

.inst_field .input_login{
    background-color: var(--white-bg);
}

.inst_field_row{
    display: flex;
    gap: 12px;
}

.inst_field.inst_field_narrow{
    flex: 0 0 34%;
}

.inst_hint{
    font-size: 0.85rem;
}

@media (max-width: 480px){
    .inst_field_row{
        flex-direction: column;
        gap: 14px;
    }
}

.inst_actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.inst_actions .blue_text_btn{
    margin-bottom: 0;
}

.inst_actions .payment_message{
    align-self: flex-start;
}

/* Icon picker: one state at a time (data-state), as on the dashboard's
   Institution page. */
.inst_icon_row{
    display: flex;
    align-items: center;
    gap: 14px;
}

.inst_icon_tile{
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    background-color: var(--white-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    color: var(--med-text);
    transition: border-color 0.15s ease;
}

.inst_icon_tile:hover{
    border-color: var(--text-color);
}

.inst_icon_tile:focus-within{
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

.inst_icon_glyph{
    width: 22px;
    height: 22px;
}

.inst_icon_tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.inst_icon_tile[data-state="ready"]{
    border-style: solid;
}

.inst_icon_tile[data-state="ready"] img{
    display: block;
}

.inst_icon_tile[data-state="ready"] .inst_icon_glyph{
    display: none;
}

.inst_icon_text{
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.sans_serif_text.inst_icon_title{
    font-size: 1rem;
}

.inst_icon_text .user_box_small_text{
    font-size: 0.85rem;
}

/* The two pickers (country, tax ID type): an input-shaped button and a
   listbox under it. */
.inst_select{
    position: relative;
}

.inst_select_btn{
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    padding-right: 44px;
    color: var(--text-color);
}

.inst_select_btn:disabled{
    cursor: default;
    color: var(--text-color);
    opacity: 1;
}

.inst_select_btn:disabled .select_chevron{
    display: none;
}

.inst_select_btn:focus-visible{
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

.inst_select_placeholder{
    opacity: 0.5;
}

.inst_select_menu{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background-color: var(--white-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(27, 27, 24, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inst_select_menu.hidden{
    display: none;
}

.input_login.inst_select_search{
    height: 36px;
    background-color: var(--light-bg);
}

.inst_select_list{
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.inst_select_option{
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left;
}

.inst_select_option:hover,
.inst_select_option.is-focused{
    background-color: var(--light-bg);
}

.inst_select_option.is-active{
    font-weight: 600;
}

.inst_select_empty{
    padding: 8px 10px;
    font-size: 0.9rem;
}

/* The tax register's answer under the number. */
.inst_tax_status{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    text-align: left;
    color: var(--med-text);
}

.inst_tax_status.hidden{
    display: none;
}

.inst_tax_status .sans_serif_text{
    font-size: 0.95rem;
    color: inherit;
}

.inst_tax_status_spinner{
    color: var(--text-color);
}

.inst_tax_status_icon{
    flex: none;
    display: none;
}

.inst_tax_status[data-state="verified"]{
    color: var(--green-text);
}

.inst_tax_status[data-state="verified"] .inst_tax_status_icon{
    display: block;
}

.inst_tax_status[data-state="unverified"]{
    color: var(--red-text);
}

/* Review card. */
.inst_review_row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
}

.inst_review_row .user_box_right{
    flex: 1 1 auto;
    min-width: 0;
}

.inst_review_row .sans_serif_text{
    font-size: 1.03rem;
    overflow-wrap: anywhere;
}

.inst_review_multiline{
    white-space: pre-line;
}

.inst_review_edit{
    flex: none;
    font-size: 0.95rem;
}

.user_icon.inst_review_icon{
    overflow: hidden;
}

.user_icon.inst_review_icon.has-image{
    background-color: transparent;
}

.user_icon.inst_review_icon img{
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.inst_status_chip{
    align-self: flex-start;
    margin-top: 4px;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--file-btn-mobile-bg);
    color: var(--med-text);
}

.inst_status_chip:empty{
    display: none;
}

.inst_status_chip[data-state="verified"]{
    background-color: rgba(113, 196, 58, 0.16);
    color: #3f7d16;
}

.inst_review_confirm_line{
    margin-top: 16px;
}

/* Agreement switches: the age switches' rows, with wrapping text. */
.inst_agreement{
    cursor: pointer;
    align-items: flex-start;
    text-align: left;
    border-radius: 8px;
}

.inst_agreement:focus-visible{
    outline: 2px solid var(--blue-accent);
    outline-offset: 4px;
}

.inst_agreement .user_box_small_text{
    line-height: 1.35;
}

.inst_agreement .switch{
    flex: none;
    margin-top: 1px;
}

.inst_agreement .terms_link{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Setting up (after "Create institution"): one row per step, each waiting,
   working, done or failed (data-state). */
.inst_setup_row{
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.inst_setup_row.hidden{
    display: none;
}

.inst_setup_row .sans_serif_text{
    font-size: 1rem;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.inst_setup_mark{
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}

.inst_setup_mark .auth_btn_spinner,
.inst_setup_mark svg{
    display: none;
}

.inst_setup_row[data-state="waiting"] .sans_serif_text{
    opacity: 0.45;
}

.inst_setup_row[data-state="waiting"] .inst_setup_mark::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
}

.inst_setup_row[data-state="active"] .auth_btn_spinner{
    display: inline-block;
}

.inst_setup_row[data-state="done"] .inst_setup_mark{
    color: var(--green-text);
}

.inst_setup_row[data-state="done"] svg{
    display: block;
    animation: instSetupCheckIn 0.3s ease-out;
}

.inst_setup_row[data-state="failed"] .sans_serif_text{
    color: var(--med-text);
}

.inst_setup_row[data-state="failed"] .inst_setup_mark::before{
    content: "–";
    color: var(--med-text);
}

@keyframes instSetupCheckIn{
    from{
        transform: scale(0.4);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}

.inst_setup_note{
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
}

.inst_setup_note.hidden{
    display: none;
}

@media (prefers-reduced-motion: reduce){
    .inst_setup_row[data-state="done"] svg{
        animation: none;
    }
}