:root {
     --ink: #14171C;
     --ink2: #2B3039;
     --paper: #FBF9F4;
     --paper2: #F2EEE5;
     --rule: #DDD7C9;
     --rule-ink: #3A404B;
     --mute: #8A8577;
     --mute-ink: #9AA0AB;
     --accent: #1e6955;
     --accent-d: #013e2c;
     --accent-l: #8FB9BD;
     --accent-xl: #D5E4E4;
     --flag: #C6702A;
     --neut: #B9B4A6;
     --ice: #D9DCE1;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 body {
     background: var(--paper);
     color: var(--ink);
     line-height: 1.5;
 }


 #intro,
 #quiz,
 #results {
     padding: 60px 0px;
 }

 .eyebrow {
     font-size: 12px;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 14px
 }

 /* signal motif */
 .signal {
     display: flex;
     gap: 3px;
     align-items: flex-end;
     height: 34px;
     margin: 22px 0 30px
 }

 .signal i {
     display: block;
     width: 7px;
     background: var(--accent-l)
 }

 .signal i:nth-child(3n) {
     background: var(--accent)
 }

 h1 {
     font-weight: 700;
     font-size: 40px;
     line-height: 1.03;
     letter-spacing: -.02em;
     margin-bottom: 18px
 }

 .lede {
     font-size: 18px;
     color: var(--ink2);
     max-width: 60ch;
     margin-bottom: 26px
 }

 .meta {
     display: flex;
     gap: 26px;
     flex-wrap: wrap;
     margin-bottom: 30px
 }

 .meta div {
     font-size: 12px;
     color: var(--mute);
     letter-spacing: .04em
 }

 .meta b {
     display: block;
     font-size: 26px;
     color: var(--ink);
     font-weight: 700;
     letter-spacing: -.01em
 }

 /* progress */
 .progress {
     position: sticky;
     top: 0;
     background: var(--paper);
     padding: 14px 0 12px;
     z-index: 5;
     /* border-bottom: 1px solid var(--rule); */
     margin-bottom: 28px
 }

 .progress .bar {
     height: 5px;
     background: var(--accent);
     border-radius: 99px;
     overflow: hidden;
     margin: 12px 0px;
     margin-bottom: 40px;
     position: relative;
 }

 .progress .bar span {
     display: block;
     height: 100%;
     background: #E65F46;
     width: 0;
     position: absolute;
     left: 0px;
     bottom: 0px;
     line-height: 0px;
     transition: width .35s cubic-bezier(.4, 0, .2, 1)
 }

 .progress .lab {
     display: flex;
     justify-content: space-between;
     margin-top: 8px;
     font-size: 14px;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--mute)
 }

 /* question card */
 .q {
     animation: fade .4s ease
 }

 @keyframes fade {
     from {
         opacity: 0;
         transform: translateY(8px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .qnum {
     font-size: 12px;
     letter-spacing: .16em;
     color: var(--accent);
     margin-bottom: 10px
 }

 .qtext {
     font-size: 26px;
     line-height: 1.18;
     letter-spacing: -.01em;
     margin-bottom: 6px;
     font-weight: 600;
 }

 .qdim {
     font-size: 11px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--mute);
     margin-bottom: 22px
 }

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

 .opt {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px 18px;
     background: #fff;
     border: 1px solid var(--rule);
     border-radius: 3px;
     cursor: pointer;
     transition: all .16s;
     font-size: 16px;
     color: var(--ink2);
     text-align: left;
     width: 100%;
 }

 .opt:hover {
     border-color: var(--accent-l);
     background: var(--accent-xl)
 }

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

 .opt.sel {
     border-color: var(--accent);
     background: var(--accent-xl);
     color: var(--ink)
 }

 .opt .dot {
     flex-shrink: 0;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: 2px solid var(--rule);
     transition: all .16s
 }

 .opt.sel .dot {
     border-color: var(--accent);
     background: var(--accent);
     box-shadow: inset 0 0 0 3px #fff
 }

 .opt .k {
     font-size: 12px;
     color: var(--mute);
     margin-left: auto
 }

 .nav {
     display: flex;
     justify-content: space-between;
     margin-top: 30px
 }

 .btn {
     font-size: 16px;
     letter-spacing: .08em;
     padding: 12px 24px;
     border-radius: 3px;
     cursor: pointer;
     border: 1px solid var(--accent);
     background: var(--accent);
     color: #fff;
     transition: all .16s;
     font-weight: 600;
 }

 .btn:hover {
     background: var(--accent-d);
     border-color: var(--accent-d)
 }

 .btn:disabled {
     opacity: .35;
     cursor: not-allowed
 }

 .btn.ghost {
     background: transparent;
     color: var(--accent-d)
 }

 .btn.ghost:hover {
     background: var(--paper2)
 }

 .btn.big {
     width: 100%;
     padding: 14px;
     font-size: 14px;
     margin-top: 8px
 }

 /* form */
 .box .field {
     margin-bottom: 16px
 }

 .field label {
     display: block;
     font-size: 11px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--mute);
     margin-bottom: 6px;
     text-align: start;
 }

 .consent span {
     text-align: start;
 }

 .field input {
     width: 100%;
     padding: 14px 16px;
     border: 1px solid var(--rule);
     border-radius: 3px;
     font-size: 16px;
     background: #fff;
     color: var(--ink)
 }

 .field input:focus {
     outline: none;
     border-color: var(--accent)
 }

 .consent {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin: 16px 0 4px;
     font-size: 13px;
     color: var(--mute)
 }

 .consent input {
     margin-top: 3px
 }

 /* results */
 .res {
     animation: fade .5s ease
 }

 .scorehero {
     background: var(--accent);
     color: #fff;
     border-radius: 4px;
     padding: 38px 34px;
     margin-bottom: 22px;
     display: flex;
     align-items: center;
     gap: 34px;
     flex-wrap: wrap
 }

 .scorehero .num {
     font-weight: 700;
     font-size: 96px;
     line-height: .85;
     letter-spacing: -.03em
 }

 .scorehero .num small {
     font-size: 34px;
     color: var(--accent-l)
 }

 .scorehero .stage {
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--accent-l);
     margin-bottom: 8px
 }

 .scorehero .stagename {
     font-size: 30px;
     font-weight: 700;
     margin-bottom: 8px
 }

 .scorehero .vs {
     font-size: 14px;
     color: var(--ice)
 }

 .scorehero .vs b {
     color: #fff
 }

 .panel {
     background: #fff;
     border: 1px solid var(--rule);
     border-radius: 4px;
     padding: 26px;
     margin-bottom: 22px
 }

 .panel h3 {
     font-size: 20px;
     margin-bottom: 4px
 }

 .panel .sub {
     font-size: 13px;
     color: var(--mute);
     margin-bottom: 20px
 }

 /* dimension bars */
 .dim {
     margin-bottom: 16px
 }

 .dim .top {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 5px
 }

 .dim .name {
     font-size: 14px;
     color: var(--ink)
 }

 .dim .vals {
     font-size: 12px
 }

 .dim .you {
     color: var(--accent-d);
     font-weight: 600
 }

 .dim .bm {
     color: var(--mute)
 }

 .track {
     position: relative;
     height: 8px;
     background: var(--paper2);
     border-radius: 2px;
     overflow: visible
 }

 .track .fill {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     background: var(--accent);
     border-radius: 2px;
     transition: width .8s cubic-bezier(.4, 0, .2, 1)
 }

 .track .mark {
     position: absolute;
     top: -3px;
     width: 2px;
     height: 18px;
     background: var(--ink);
     transition: left .8s cubic-bezier(.4, 0, .2, 1)
 }

 .track .mark::after {
     content: 'BM';
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 8px;
     color: var(--mute)
 }

 .legend {
     display: flex;
     gap: 20px;
     margin-top: 6px;
     font-size: 11px;
     color: var(--mute);
     letter-spacing: .06em
 }

 .legend i {
     display: inline-block;
     width: 12px;
     height: 8px;
     vertical-align: middle;
     margin-right: 5px
 }

 /* radar */
 .radarwrap {
     display: flex;
     justify-content: center;
     margin: 6px 0
 }

 /* guidance */
 .guide {
     border-left: 2px solid var(--accent);
     padding: 4px 0 4px 18px;
     margin-bottom: 18px
 }

 .guide h4 {
     font-size: 16px;
     margin-bottom: 4px
 }

 .guide p {
     font-size: 14px;
     color: var(--ink2)
 }

 .strengths {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-top: 6px
 }

 .chip {
     padding: 12px 14px;
     border-radius: 3px;
     font-size: 13px
 }

 .chip .lab {
     font-size: 10px;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 4px
 }

 .chip.pos {
     background: var(--accent-xl)
 }

 .chip.pos .lab {
     color: var(--accent-d)
 }

 .chip.neg {
     background: #F6E8DB
 }

 .chip.neg .lab {
     color: var(--flag)
 }

 .cta {
     background: var(--ink);
     color: #fff;
     border-radius: 4px;
     padding: 30px 28px;
     text-align: left
 }

 .cta h3 {
     font-size: 24px;
     margin-bottom: 10px;
     color: #fff;
 }

 .cta p {
     color: var(--ice);
     font-size: 15px;
     margin-bottom: 20px;
     max-width: 75%;
 }

 .cta .row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }

 .cta .btn2 {
     font-size: 16px;
     letter-spacing: 1px;
     padding: 12px 24px;
     border-radius: 3px;
     text-decoration: none;
     display: inline-block;
     background: #F6E8DB;
     color: #000;
     font-weight: 600;
 }

 .cta .btn2.solid {
     background: var(--accent);
     color: #fff
 }

 .cta .btn2.line {
     border: 1px solid var(--accent-l);
     color: var(--accent-l)
 }

 .disc {
     font-size: 11px;
     color: var(--mute);
     margin-top: 14px;
     line-height: 1.55
 }

 h1 em {
     font-style: italic;
     color: var(--accent)
 }

 .introgrid {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: 44px;
     align-items: center;
     margin-bottom: 8px
 }

 .valuelist {
     list-style: none;
     margin: 22px 0 28px;
     display: grid;
     gap: 10px
 }

 .valuelist li {
     display: flex;
     align-items: flex-start;
     gap: 11px;
     font-size: 15px;
     color: var(--ink2)
 }

 .valuelist li::before {
     content: "";
     flex-shrink: 0;
     width: 18px;
     height: 18px;
     margin-top: 1px;
     border-radius: 50%;
     background: var(--accent-xl);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6F78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
     background-size: 12px;
     background-repeat: no-repeat;
     background-position: center
 }

 .friction {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin-top: 16px;
     font-size: 11px;
     letter-spacing: .06em;
     color: var(--mute)
 }

 .preview {
     position: relative
 }

 .preview-tag {
     position: absolute;
     top: -11px;
     left: 20px;
     z-index: 2;
     background: var(--flag);
     color: #fff;
     font-size: 10px;
     letter-spacing: .14em;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: 2px
 }

 .preview-card {
     background: var(--ink);
     border-radius: 6px;
     padding: 30px 26px 22px;
     color: #fff;
     box-shadow: 0 24px 50px -24px rgba(20, 23, 28, .5)
 }

 .preview-score {
     font-weight: 700;
     font-size: 60px;
     line-height: .85;
     letter-spacing: -.03em
 }

 .preview-score small {
     font-size: 22px;
     color: var(--accent-l)
 }

 .preview-stage {
     font-size: 20px;
     margin-top: 6px
 }

 .preview-vs {
     font-size: 12px;
     color: var(--accent-l);
     margin-top: 2px
 }

 .preview-radar {
     margin: 10px 0 4px;
     display: flex;
     justify-content: center
 }

 .preview-legend {
     display: flex;
     gap: 16px;
     justify-content: center;
     font-size: 10px;
     color: var(--mute-ink)
 }

 .preview-legend i {
     display: inline-block;
     width: 10px;
     height: 7px;
     vertical-align: middle;
     margin-right: 4px
 }

 .preview-caption {
     text-align: center;
     font-size: 12px;
     color: var(--mute);
     margin-top: 12px;
     font-style: italic
 }

 .cred {
     margin-top: 30px;
     padding-top: 18px;
     border-top: 1px solid var(--rule);
     font-size: 13px;
     color: var(--mute);
     font-style: italic
 }

 .locked {
     position: relative
 }

 .locked .lockmask {
     filter: blur(7px);
     opacity: .55;
     pointer-events: none;
     user-select: none
 }

 .unlock {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     text-align: center;
     padding: 80px 20px
 }

 .unlock .box {
     background: #fff;
     border: 1px solid var(--rule);
     border-radius: 6px;
     padding: 30px 28px;
     max-width: 560px;
     box-shadow: 0 24px 50px -28px rgba(20, 23, 28, .35)
 }

 .unlock h3 {
     font-size: 24px;
     margin-bottom: 8px;
     font-weight: 600;
 }

 .unlock p {
     font-size: 15px;
     color: var(--ink2);
     margin-bottom: 18px
 }

 .hidden {
     display: none !important
 }

 @media(max-width:720px) {

     #intro,
     #quiz,
     #results {
         padding: 32px 0px;
     }

     .signal {
         height: 32px;
         margin: 0px;
         width: 180px;
         overflow: hidden;
     }

     .btn {
         font-size: 14px;
         letter-spacing: .08em;
         padding: 8px 20px;
     }

     .eyebrow {
         margin-bottom: 20px;
         margin-top: 20px;
         letter-spacing: 0.4px;
     }

     .panel,
     .cta {
         padding: 16px;
     }

     .cta p {
         font-size: 14px;
         max-width: 100%;
     }

     .cta h3 {
         font-size: 20px;
     }

     .cta .btn2 {
         font-size: 14px;
         letter-spacing: 0px;
         padding: 10px 20px;
         display: block;
         width: 100%;
         text-align: center;
     }

     .scorehero .stagename {
         font-size: 24px;
         font-weight: 700;
         margin-bottom: 8px;
         letter-spacing: 1px;
     }

     .introgrid {
         grid-template-columns: 1fr;
         gap: 30px
     }

     .preview {
         max-width: 100%;
         margin: 0 auto;
         width: 100%;
     }

     h1 {
         font-size: 28px;
         line-height: 1.2;
     }

     h1 br {
         display: none;
     }

     .lede {
         font-size: 16px;
         max-width: 100%;
         margin-bottom: 20px;
     }

     .valuelist li {
         font-size: 14px;
     }

     .valuelist {
         margin: 22px 0 15px;
     }

     .btn.big {
         width: 100%;
         padding: 10px 18px;
         font-size: 14px;
         margin-top: 8px;
     }

     .qtext {
         font-size: 20px
     }

     .opt {
         gap: 8px;
         padding: 12px;
         font-size: 14px;
     }

     .friction {
         gap: 5px;
         font-size: 11px;
     }

     .preview-score {
         font-weight: 700;
         font-size: 46px;
     }

     .preview-score small {
         margin-left: 5px;
         letter-spacing: -0.3px;
     }

     .progress .bar {
         margin: 12px 0px;
         margin-bottom: 12px;
     }

     .scorehero .num {
         font-size: 50px;
     }

     .scorehero .stagename {
         font-size: 24px;
     }

     .unlock {
         padding: 40px 0px;
     }

     .progress {
         z-index: 5;
         margin-bottom: 20px;
         padding: 0px;
     }

     .unlock .box {
         padding: 16px;
     }

     .unlock h3 {
         font-size: 18px;
     }

     .field input {
         width: 100%;
         padding: 10px 16px;
         font-size: 14px;
     }

     .unlock p {
         font-size: 13px;
     }

     .strengths {
         grid-template-columns: 1fr
     }

     .progress .bar {
         margin-bottom: 30px;
         height: 3px;
     }

     .progress .lab {
         font-size: 10px;
         letter-spacing: 0.4px;
     }

     .scorehero {
         gap: 20px;
         padding: 28px 22px
     }

     .track {
         position: relative;
         height: 8px;
     }
 }