/* ==========================================================
   RETACH QUIZ
   Production stylesheet v1.1
   ONE FILE. NO LEGACY LAYERS.
   ========================================================== */


/* ==========================================================
   TOKENS
   ========================================================== */

:root {
    --page: #efe9df;
    --paper: #f7f1e7;
    --paper-light: #fffdf8;

    --ink: #111111;
    --muted: #6c665d;

    --blue: #1559e8;
    --orange: #ff5817;
    --yellow: #f3d45b;

    --line: #dfdbd3;

    --shadow:
        0 16px 40px
        rgba(55, 42, 26, .12);
}


/* ==========================================================
   RESET
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;

    background: var(--page);
}

body {
    margin: 0;

    min-height: 100vh;

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(21,89,232,.045),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255,88,23,.05),
            transparent 27%
        ),
        repeating-linear-gradient(
            4deg,
            rgba(45,28,8,.012) 0 1px,
            transparent 1px 5px
        ),
        var(--page);
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   OUTER LAYOUT
   ========================================================== */

.quiz-shell {
    width: min(100%, 940px);

    min-height: 100vh;

    margin: 0 auto;

    padding:
        max(14px, env(safe-area-inset-top))
        20px
        max(36px, env(safe-area-inset-bottom));
}


/* ==========================================================
   HEADER
   ========================================================== */

.quiz-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 96px;

    gap: 24px;

    padding:
        15px
        12px;
}

.brand {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: #111827;

    text-decoration: none;

    font-size:
        clamp(25px, 4vw, 34px);

    font-weight: 900;

    letter-spacing: .025em;
}


/* coloured RETACH symbol */

.brand::before {
    content: "";

    width: 44px;
    height: 38px;

    flex: 0 0 44px;

    background:
        linear-gradient(
            145deg,
            #ffbd13 0 24%,
            #ff641a 24% 47%,
            #7553e9 47% 69%,
            #1559e8 69% 100%
        );

    clip-path:
        polygon(
            0 0,
            78% 0,
            100% 22%,
            76% 48%,
            100% 100%,
            54% 100%,
            32% 64%,
            0 64%
        );
}

.restart {
    border: 0;

    padding: 8px 0;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 11px;
}


/* ==========================================================
   SCREEN
   ========================================================== */

.screen {
    position: relative;

    isolation: isolate;

    display: none;

    overflow: hidden;

    width: 100%;

    min-height: 0;

    padding:
        clamp(32px, 5.5vw, 60px)
        clamp(24px, 6vw, 70px)
        clamp(40px, 6vw, 68px);

    border: 0;

    border-radius: 5px;

    color: var(--ink);

    background:
        radial-gradient(
            circle at 23% 12%,
            rgba(255,255,255,.9),
            transparent 34%
        ),
        repeating-linear-gradient(
            7deg,
            rgba(50,30,10,.012) 0 1px,
            transparent 1px 5px
        ),
        var(--paper);

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

.screen.active,
.screen.is-active {
    display: block;
}

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


/* blue torn paper */

.screen::before,
.screen::after {
    content: "";

    position: absolute;

    z-index: -1;

    background:
        repeating-linear-gradient(
            12deg,
            rgba(255,255,255,.08) 0 1px,
            transparent 1px 7px
        ),
        var(--blue);
}

.screen::before {
    left: -88px;
    top: 235px;

    width: 155px;
    height: 360px;

    transform: rotate(-2deg);

    clip-path:
        polygon(
            12% 0,
            100% 7%,
            84% 22%,
            100% 40%,
            83% 58%,
            100% 76%,
            82% 100%,
            0 91%,
            13% 72%,
            0 51%,
            15% 30%,
            0 11%
        );
}

.screen::after {
    right: -96px;
    bottom: 24px;

    width: 185px;
    height: 330px;

    transform: rotate(2deg);

    clip-path:
        polygon(
            15% 0,
            100% 8%,
            85% 27%,
            100% 47%,
            84% 66%,
            100% 84%,
            82% 100%,
            0 92%,
            14% 69%,
            0 48%,
            14% 26%,
            0 9%
        );
}


/* ==========================================================
   PROGRESS PAPER
   ========================================================== */

.screen-top {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    width: min(100%, 730px);

    min-height: 71px;

    margin:
        34px
        auto
        0;

    padding:
        18px
        23px;

    background: var(--paper-light);

    box-shadow:
        0 8px 17px
        rgba(55,42,25,.10);

    clip-path:
        polygon(
            1% 7%,
            4% 0,
            97% 3%,
            100% 10%,
            99% 88%,
            96% 100%,
            3% 97%,
            0 89%
        );
}


/* MINI QUIZ paper */

.screen-top .eyebrow {
    position: absolute;

    right: 7px;
    top: -87px;

    padding:
        11px
        20px;

    border-radius: 0;

    color: var(--blue);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(17px, 3vw, 23px);

    font-weight: 900;

    letter-spacing: .025em;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 20px,
            rgba(21,89,232,.10) 20px 21px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(21,89,232,.09) 20px 21px
        ),
        #fffbea;

    transform: rotate(-1.5deg);

    box-shadow:
        0 6px 12px
        rgba(0,0,0,.07);
}

.screen-top .eyebrow::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -10px;

    width: 76px;
    height: 20px;

    transform:
        translateX(-50%)
        rotate(-3deg);

    background: var(--blue);
}

.progress-text {
    color: var(--ink);

    font-size:
        clamp(18px, 3vw, 25px);

    font-weight: 700;
}

.progress {
    position: relative;

    z-index: 6;

    width: min(79%, 575px);

    height: 13px;

    margin:
        -18px
        auto
        50px;

    overflow: hidden;

    border-radius: 999px;

    background: #dedcd8;
}

.progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ff4d0d,
            #ff671d
        );
}


/* ==========================================================
   QUESTION TYPOGRAPHY
   ========================================================== */

.hero-title,
.question-title,
.result-title,
.proof-title,
.lead-title {
    position: relative;

    z-index: 5;

    width: min(100%, 760px);

    color: var(--ink);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-weight: 900;

    letter-spacing: -.055em;
}

.hero-title {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin:
        0
        auto
        26px;

    font-size:
        clamp(43px, 7.3vw, 68px);

    line-height: .99;
}

.hero-line {
    display: block;
}

.hero-line-top {
    margin-bottom: 8px;
}


/* yellow highlight */

.tape-highlight {
    display: inline-block;

    align-self: flex-start;

    margin:
        0
        0
        13px;

    padding:
        4px
        21px
        9px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: .88em;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.045em;

    background:
        repeating-linear-gradient(
            7deg,
            rgba(255,255,255,.08) 0 1px,
            transparent 1px 5px
        ),
        var(--yellow);

    transform: rotate(-.8deg);

    clip-path:
        polygo
            1% 7%,
            4% 1%,
            98% 0,
            100% 13%,
            99% 88%,
            96% 100%,
            2% 95%,
            0 82%
        );
}


.question-title {
    margin:
        0
        auto
        30px;

    font-size:
        clamp(42px, 7.3vw, 66px);

    line-height: .99;
}

.question-title strong {
    padding:
        0
        
        4px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    background: var(--yellow);
}

.question-title.short {
    width: fit-content;

    margin-left: 0;

    padding:
        5px
        20px
        12px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(70px, 15vw, 120px);

    line-height: .9;

    background: var(--yellow);

    transform: rotate(-1deg);
}


/* ==========================================================
   HINT
   ========================================================== */

.lead,
.result-intro {
    position: relative;

    z-index: 5;

    color: #282828;

    font-size:
        clamp(16px, 2.5vw, 20px);

    line-height: 1.5;
}

.screen[data-screen="q1"] .lead {
    width: min(100%, 590px);

    margin:
        34px
        auto
        42px;

    padding:
        13px
        18px;

    text-align: center;
}

.screen[data-screen="q1"] .lead::before {
    content: "";

    position: absolute;

    inset:
        -4px
        -15px;

    border:
        3px solid
        var(--blue);

    border-top-color: transparent;
    border-right-color: transparent;

    border-radius: 50%;

    transform: rotate(1.2deg);
}


/* ==========================================================
   ANSWER CARDS
   ========================================================== */

.answers {
    position: relative;

    z-index: 8;

    display: grid;

    width: min(100%, 690px);

    margin:
        0
        auto;

    gap: 14px;
}

.answer {
    --turn: 0deg;
    --card-tape: var(--orange);

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
    min-height: 78px;

    gap: 20px;

    padding:
        16px
        84px
        16px
        25px;

    border: 0;

    border-radius: 4px;

    color: var(--ink);

    cursor: pointer;

    text-align: left;

    font-size:
        clamp(17px, 2.8vw, 22px);

    font-weight: 800;

    background:
        repeating-linear-gradient(
            2deg,
            rgba(0,0,0,.011) 0 1px,
            transparent 1px 5px
        ),
        var(--paper-light);

    box-shadow:
        0 7px 14px
        rgba(55,42,26,.12);

    transform: rotate(var(--turn));

    clip-path:
        polygon(
            1% 5%,
            4% 0,
            97% 2%,
            100% 8%,
            99% 90%,
            96% 100%,
            3% 98%,
            0 91%
        );
}

.answer:nth-child(1) {
    --turn: -.3deg;
    --card-tape: var(--orange);
}

.answer:nth-child(2) {
    --turn: .25deg;
    --card-tape: var(--blue);
}

.answer:nth-child(3) {
    --turn: -.2deg;
    --card-tape: var(--yellow);
}

.answer:nth-child(4) {
    --turn: .2deg;
    --card-tape: var(--blue);
}

.answer::after {
    content: "";

    position: absolute;

    right: -12px;
    top: 50%;

    width: 75px;
    heig

    background: var(--card-tape);

    transform:
        translateY(-50%)
        rotate(-5deg);
}

.radio {
    position: relative;

    width: 32px;
    height: 32px;

    flex:
        0 0
        32px;

    border:
        2.5px solid
        var(--ink);

    border-radius: 50%;
}

.answer.is-selected {
    background: #fff1b9;
}

.answer.is-selected .radio {
    border-color: var(--orange);
}

.answer.is-selected .radio::after {
    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background: var(--orange);
}


/* ==========================================================
   FIRST SCREEN NOTE + BUTTON
   ========================================================== */

.growth-note {
    position: relative;

    z-index: 8;

    display: flex;

    flex-wrap: wrap;

    width: fit-content;

    margin:
        30px
        auto
        18px;

    gap: 7px;

    padding:
        7px
        13px;

    color: var(--ink);

    font-size: 13px;

    font-weight: 900;

    background: var(--paper-light);

    box-shadow:
        0 5px 11px
        rgba(0,0,0,.08);

    transform: rotate(-1deg);
}

.growth-note strong {
    color: 
}

.q1-continue,
.primary {
    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: min(100%, 690px);

    min-height: 70px;

    gap: 20px;

    margin:
        28px
        auto
        0;

    padding:
        16px
        24px;

    border: 0;

    border-radius: 13px;

    color: #fff;

    cursor: pointer;

    font-size:
        clamp(18px, 3vw, 24px);

    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #ff641e,
            #f34c0c
        );

    box-shadow:
        0 7px 0
        rgba(172,48,4,.17);
}

.q1-continue:disabled {
    opacity: .4;

    cursor: default;
}


/* ==========================================================
   GENERAL RESULT LABEL
   ========================================================== */

.result-screen > .eyebrow,
.proof-screen > .eyebrow,
.video-screen > .eyebrow,
.lead-screen > .eyebrow {
    display: inline-block;

    margin-bottom: 27px;

    padding:
        10px
        18px;

    border-radius: 2px;

    color: #fff;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 15px;

    font-weight: 900;

    background: var(--blue);

    transform: rotate(-1.2deg);

    box-shadow:
        0 4px 8px
        rgba(0,0,0,.08);
}


/* ==========================================================
   RESULT 1
   ========================================================== */

.giant-answer {
    display: inline-block;

    margin:
        0
        0
        38px;

    padding:
        5px
        23px
        14px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(80px, 18vw, 145px);

    font-weight: 900;

    line-height: .88;

    letter-spacing: -.06em;

    background: var(--yellow);

    transform: rotate(-1deg);
}


/* ==========================================================
   METRIC CARDS
   ========================================================== */

.metric-card {
    position: relative;

    margin-top: 16px;

    padding:
        24px
        25px;

    border-radius: 4px;

    background: var(--paper-light);

    box-shadow:
        0 7px 15px
        rgba(55,42,26,.11);

    clip-path:
        polygon(
            1% 4%,
            4% 0,
            97% 2%,
            100% 8%,
            99% 91%,
            96% 100%,
            3% 98%,
            0 91%
        );
}

.metric-card::after {
    content: "";

    position: absolute;

    right: 17px;
    top: -7px;

    width: 70px;
    height: 19px;

    background: var(--blue);

    transform: rotate(3deg);
}

.metric-card-main {
    background: #fff3c9;
}

.metric-card-main::after {
    background: var(--orange);
}

.metric-label {
    margin-bottom: 11px;

    color: var(--blue);

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.metric-flow {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: var(--ink);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(23px, 4.5vw, 37px);
}

.metric-flow span {
    color: var(--orange);
}

.metric-note {
    margin-top: 10px;

    color: var(--muted);
}

.metric-note b {
    color: var(--orange);
}


/* ==========================================================
   SUMMARY
   ========================================================== */

.big-summary {
    position: relative;

    z-index: 4;

    width: fit-content;

    max-width: 100%;

    margin:
        34px
        0;

    padding:
        11px
        17px;

    color: var(--ink);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(25px, 5vw, 42px);

    font-weight: 900;

    line-height: 1.05;

    background: var(--paper-

    box-shadow:
        0 6px 13px
        rgba(0,0,0,.08);

    transform: rotate(-.5deg);
}

.big-summary span {
    color: var(--orange);
}


/* ==========================================================
   RESULTS 2 / 3
   ========================================================== */

.result-title {
    margin:
        4px
        0
        32px;

    font-size:
        clamp(43px, 7.5vw, 68px);

    line-height: .98;
}

.result-title strong {
    color: var(--orange);
}

.comparison-huge {
    display: 

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 18px;

    margin:
        38px
        0
        26px;
}

.comparison-huge > div:not(.comparison-arrow) {
    position: relative;

    padding: 23px;

    background: var(--paper-light);

    box-shadow:
        0 7px 14px
        rgba(55,42,26,.11);

    clip-path:
        polygon(
            1% 4%,
            4% 0,
            97% 2%,
            100% 8%,
            99% 90%,
            96% 100%,
            3% 98%,
            0 91%
        );
}

.comparison-huge > div:not(.comparison-arrow)::after {
    content: "";

    position: absolute;

    right: 16px;
    top: -8px;

    width: 70px;
    height: 19px;

    background: var(--yellow);

    transform: rotate(3deg);
}

.comparison-huge span {
    display: block;

    margin-bottom: 9px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;
}

.comparison-huge strong {
    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(22px, 4.2vw, 34px);
}

.comparison-arrow {
    color: var(--orange);

    font-family:
        "Segoe Print",
        cursive;

    font-size: 42px;

    font-weight: 900;
}

.hero-stat {
    display: inline-block;

    margin:
        25px
        0
        30px;

    padding:
        4px
        21px
        13px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(80px, 18vw, 145px);

    font-weight: 900;

    line-height: .9;

    background: var(--yellow);

    transform: rotate(-1deg);
}


/* ==========================================================
   DRR
   ========================================================== */

.drr-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        12px
        0
        34px;

    padding:
        22px
        24px;

    color: #fff;

    background: var(--blue);

    box-shadow:
        0 8px 16px
        rgba(23,49,115,.20);

    transform: rotate(.3deg);
}

.drr-card span {
    font-size: 13px;

    font-weight: 900;
}

.drr-card strong {
    font-size:
        clamp(21px, 4vw, 34px);
}

.drr-card i {
    padding:
        0
        7px;

    color: var(--yellow);

    font-style: normal;
}


/* ==========================================================
   PROOF
   ========================================================== */

.proof-title {
    margin:
        2px
        0
        30px;

    font-size:
        clamp(47px,

    line-height: .96;
}

.proof-screen .lead,
.lead-screen > .lead {
    width: min(100%, 640px);

    margin:
        30px
        0
      

    padding:
        20px
        22px;

    background: var(--paper-light);

    box-shadow:
        0 6px 13px
        rgba(0,0,0,.08);

    transform: rotate(-.4deg);
}

.proof-message {
    display: inline-block;

    margin:
        10px
        0
        38px;

    padding:
        5px
        20px
        12px;

    color: var(--orange);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(58px, 12vw, 100px);

    font-weight: 900;

    line-height: .9;

    background: var(--yellow);

    transform: rotate(-1deg);
}


/* ==========================================================
   VIDEO
   ========================================================== */

.video-screen .question-title {
    margin-left: 0;
}

.video-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    margin:
        38px
        0;

    overflow: visible;

    background: #111;

    box-shadow:
        0 14px 28px
        rgba(0,0,0,.18);
}

.video-wrap::before,
.video-wrap::after {
    content: "";

    position: absolute;

    z-index: 5;

    width: 105px;
    height: 27px;

    background: var(--blue);
}

.video-wrap::before {
    left: 20px;
    top: -12px;

    transform: rotate(-6deg);
}

.video-wrap::after {
    right: 20px;
    bottom: -12px;

    transform: rotate(-5deg);
}

.video-wrap video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.video-placeholder {
    position: absolute;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 9px;

    padding: 30px;

    color: #fff;

    text-align: center;

    background: #111;
}

.video-placeholder span {
    color: #999;

    font-size: 12px;
}

.video-summary {
    width: fit-content;

    max-width: 100%;

    padding:
        12px
        17px;

    color: var(--ink);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        clamp(25px, 5vw, 41px);

    font-weight: 900;

    line-height: 1.05;

    background: var(--yellow);

    transform: rotate(-.6deg);
}


/* ==========================================================
   LEAD FORM
   ========================================================== */

.lead-title {
    margin:
        3px
        0
        30px;

    font-size:
        clamp(48px, 8.5vw, 78px);

    line-height: .95;
}

.lead-screen form {
    display: grid;

    width: min(100%, 650px);

    margin:
        38px
        auto
        0;

    gap: 17px;
}

.lead-screen label {
    position: relative;

    display: grid;

    gap: 8px;

    padding:
        16px
        18px
        19px;

    background: var(--paper-light);

    box-shadow:
        0 6px 13px
        rgba(0,0,0,.08);
}

.lead-screen label::after {
    content: "";

    position: absolute;

    right: 16px;
    top: -7px;

    width: 68px;
    height: 18px;

    background: var(--yellow);

    transform: rotate(4deg);
}

.lead-screen label:nth-of-type(2)::after {
    background: var(--blue);
}

.lead-screen label:nth-of-type(3)::after {
    background: var(--orange);
}

.lead-screen label > span {
    color: var(--blue);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.lead-screen input {
    width: 100%;

    min-height: 58px;

    padding:
        14px
        16px;

    border:
        2px solid
        var(--line);

    border-radius: 6px;

    outline: 0;

    color: var(--ink);

    background: #fff;
}

.lead-screen input:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(21,89,232,.09);
}

.form-note {
    margin: 0;

    color: var(--muted);

    text-align: center;

    font-size: 12px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .quiz-shell {
        padding-left: 0;

        padding-right: 0;
    }

    .quiz-header {
        min-height: 82px;

        padding:
            14px
            18px
            7px;
    }

    .brand {
        font-size: 25px;
    }

    .brand::before {
        width: 34px;

        height: 30px;

        flex-basis: 34px;
    }

    .screen {
        padding:
            28px
            18px
            38px;

        box-shadow: none;
    }

    .screen::before {
        left: -120px;
    }

    .screen::after {
        right: -132px;
    }

    .screen-top {
        margin-top: 43px;

        padding:
            16px
            17px;
    }

    .screen-top .eyebrow {
        top: -69px;

        padding:
            8px
            14px;

        font-size: 18px;
    }

    .progress {
        height: 10px;

        margin:
            -14px
            auto
            38px;
    }

    .hero-title,
    .question-title,
    .result-title,
    .proof-title,
    .lead-title {
        font-size:
            clamp(37px, 10vw, 51px);
    }

    .tape-highlight {
        padding:
            3px
            13px
            7px;
    }

    .answer {
        min-height: 70px;

        gap: 14px;

        padding:
            14px
            56px
            14px
            18px;
    }

    .answer::after {
        right: -6px;

        width: 54px;
        height: 21px;
    }

    .radio {
        width: 28px;

        height: 28px;

        flex-basis: 28px;
    }

    .comparison-huge {
        grid-template-columns: 1fr;
    }

    .comparison-arrow {
        text-align: center;

        transform: rotate(90deg);
    }

    .metric-flow {
        font-size: 22px;
    }

    .drr-card {
        flex-direction: column;

        align-items: flex-start;
    }
}


/* ==========================================================
   MOTION
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

    .screen.active,
    .screen.is-active {
        animation:
            screen-in
            .28s
            ease both;
    }

    @keyframes screen-in {

        from {
            opacity: 0;

            transform:
                translateY(8px);
        }

        to {
            opacity: 1;

            transform:
                translateY(0);
        }
    }
}