@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');
:root{--ink:#31273c;--muted:#7b7283;--purple:#7952b8;--line:#e9e1ed}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;font-family:'DM Sans',sans-serif;background:#fcfafc;color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a:focus-visible,summary:focus-visible{outline:3px solid #9973cc;outline-offset:5px}.wrap{width:min(1100px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;top:-100px;left:20px;background:white;padding:15px;z-index:5}.skip:focus{top:12px}.header{display:flex;align-items:center;justify-content:space-between;height:96px;border-bottom:1px solid var(--line);gap:24px}.brand{font-family:Fredoka,sans-serif;font-size:31px;font-weight:600;letter-spacing:-1px;display:inline-flex;align-items:center}.brand>span{color:var(--purple);font-size:32px;margin-right:8px}.brand b{color:#d274a3}.header nav{display:flex;gap:30px;font-size:13px;font-weight:500;color:#726779}nav a:hover{color:var(--purple)}.header-cta{font-size:12px;font-weight:700;background:#f0e9f7;border:1px solid #e6daee;border-radius:30px;padding:11px 18px}.hero{text-align:center;position:relative;padding:70px 0 55px;isolation:isolate}.hero:before{content:'';position:absolute;inset:0 10%;background:radial-gradient(ellipse,#f2e6fa70,transparent 68%);z-index:-1}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;line-height:1.6;color:#8d7b9d}h1,h2,h3,p{margin:0}h1{font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(48px,6vw,76px);line-height:1.06;letter-spacing:-2.5px;margin:22px 0}h1 span{color:#d66e9e}h1 em{font-style:normal;color:#9573c4}.hero>p{font-size:16px;line-height:1.85;color:var(--muted)}.primary{display:inline-flex;align-items:center;gap:35px;background:var(--ink);color:white;border-radius:12px;padding:15px 23px;font-size:13px;font-weight:600;margin:27px 0 20px;box-shadow:0 6px 14px #31273c12}.primary:hover{background:#4f3b62}.primary span{font-size:21px;line-height:1}.notes{font-size:11px;color:#83718d}.notes i{font-style:normal;margin-inline:11px}.spark{position:absolute;pointer-events:none}.left{left:13%;top:117px;font-size:69px;color:#deb3ce;transform:rotate(-15deg)}.right{right:15%;top:230px;font-size:76px;color:#b6a3d3;transform:rotate(12deg)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:23px;gap:20px}h2{font-family:Fredoka,sans-serif;font-size:33px;line-height:1.2;font-weight:500;letter-spacing:-.5px}.section-heading h2{margin-top:7px}.count{font-size:11px;color:#8c7c98;background:#f3edf6;padding:8px 12px;border-radius:20px;white-space:nowrap}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.test-card{border:1px solid var(--line);border-radius:23px;background:white;overflow:hidden;box-shadow:0 4px 14px #39214503;transition:box-shadow .2s,border-color .2s}.test-card:hover{box-shadow:0 12px 34px #3921450c;border-color:#d5c3e2}.visual{height:320px;background:#f3e7f3;position:relative;display:grid;place-items:center;overflow:hidden;padding:24px;isolation:isolate}.visual:before{content:'';width:330px;height:330px;position:absolute;border:1px solid #ffffffa8;border-radius:50%;z-index:-1}.friendship .visual{background:#edeaf7}.sample{width:242px;border:1px solid #fefbff;background:#fffdfef5;padding:20px 21px 14px;border-radius:16px;transform:rotate(-5deg);box-shadow:7px 12px 0 #c998be18;position:relative}.friendship .sample{transform:rotate(5deg);box-shadow:7px 12px 0 #9f8bbd18}.sample-heading{display:flex;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:11px;border-bottom:1px solid #f1e9f2}.avatar{display:grid;place-items:center;background:#f9e2ef;color:#b86795;border-radius:50%;width:34px;height:34px;font-size:24px}.friendship .avatar{color:#8362ad;background:#ebe3f6}.sample-heading strong{font-size:12px;display:block}.sample-heading small{display:block;font-size:7px;letter-spacing:1.5px;color:#89728f;margin-top:4px}.trait{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:5px 0;font-size:11px}.trait strong{font-size:12px;color:#8b5780}.friendship .trait strong{color:#785bab}.sample-note{font-size:9px;color:#88718e;text-align:center;margin-top:12px}.visual-icon{position:absolute;left:48px;top:45px;font-size:57px;color:#d491b9;transform:rotate(-15deg)}.friendship .visual-icon{color:#a68ac8;font-size:67px}.visual-star{position:absolute;right:38px;bottom:55px;font-size:42px;color:#cda0c1;transform:rotate(14deg)}.friendship .visual-star{color:#afa0cd}.sticker{position:absolute;right:27px;top:35px;background:#fffafddd;padding:9px 12px;border:1px solid #fff;border-radius:8px;font-size:9px;color:#9f648e;transform:rotate(9deg);box-shadow:0 4px 12px #7b45720b}.friendship .sticker{color:#81659f;top:auto;bottom:23px;right:31px;transform:rotate(-8deg)}.card-content{padding:27px}.card-content>.eyebrow{font-size:9px;letter-spacing:1.5px}.card-content h3{font-family:Fredoka,sans-serif;font-size:28px;font-weight:500;letter-spacing:-.3px;margin:9px 0}.question{color:#5d4c69!important;font-weight:600;margin-bottom:8px!important;font-size:13px!important}.card-content>p{color:var(--muted);font-size:13px;line-height:1.8;max-width:420px}.test-cta{margin-top:23px;padding:14px 17px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;background:#f8e9f2;color:#95547c;font-size:12px;font-weight:700;border:1px solid #efdae8;transition:background .2s}.test-cta:hover{background:#f3d8e9}.friendship .test-cta{background:#f0eaf8;color:#7953a3;border-color:#e5daf1}.friendship .test-cta:hover{background:#e5d8f4}.test-cta span{font-size:21px;line-height:1}.collection-note{font-size:11px;color:#897792;text-align:center;line-height:1.8;margin:20px 0 0}.how{display:flex;gap:50px;align-items:center;margin-top:65px;padding-block:35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.how>div{min-width:200px}.how h2{margin-top:11px;font-size:29px}.how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;list-style:none;margin:0;padding:0}.how li>span{display:grid;place-items:center;font-size:11px;color:#9274ad;background:#eee6f5;width:31px;height:31px;border-radius:10px;margin-bottom:13px}.how h3{font-size:13px;margin-bottom:8px}.how p{font-size:12px;line-height:1.8;color:var(--muted)}.faq{display:grid;grid-template-columns:1fr 1.65fr;gap:60px;padding-block:70px}.faq h2{margin:12px 0 15px;font-size:36px}.faq>div>p{font-size:13px;color:var(--muted)}details{border-bottom:1px solid var(--line)}details:first-child{border-top:1px solid var(--line)}summary{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;font-weight:600;padding:20px 0;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary>span{font-size:19px;font-weight:400;color:#a590b6}details[open] summary>span{transform:rotate(45deg)}details p{color:var(--muted);font-size:12px;line-height:1.9;padding:0 30px 20px 0}.community{border:1px solid #e6dcee;border-radius:21px;background:#f1eaf7;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:31px 36px}.community h2{font-size:28px;margin:8px 0}.community p{color:#826a93;font-size:13px}.community>a{display:inline-flex;align-items:center;justify-content:center;gap:11px;background:#2d6a50;color:white;font-size:12px;font-weight:600;border-radius:12px;padding:14px 18px;white-space:nowrap}.community>a:hover{background:#235840}.community>a>span{margin-left:14px;font-size:20px}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:50px;padding:27px 0 35px;border-top:1px solid var(--line)}.footer .brand{font-size:26px}.footer p{font-size:10px;color:#897792;margin-top:5px}.footer nav{display:flex;gap:24px;font-size:11px;color:#897792}.footer>span{font-size:10px;color:#897792}
@media(max-width:900px){.left{left:5%}.right{right:6%}.visual-icon{left:17px}.sticker{right:12px;font-size:8px}.visual-star{right:15px}.card-content{padding:23px}.how{gap:25px}.how>div{min-width:160px}.how ol{gap:18px}.faq{gap:30px}.footer{flex-wrap:wrap}.header nav{gap:20px}}
@media(max-width:640px){.wrap{width:calc(100% - 36px)}.header{height:78px;gap:12px}.brand{font-size:27px}.header nav{gap:15px;font-size:12px}.header nav a:nth-child(2),.header-cta{display:none}.hero{padding:45px 0 43px}h1{font-size:53px;letter-spacing:-1.8px}.hero>.eyebrow{font-size:8px;letter-spacing:1.4px}.hero>p{font-size:13px}.notes{font-size:10px}.notes i{margin-inline:7px}.left{left:0;top:135px;font-size:31px}.right{right:0;top:209px;font-size:37px}.primary{margin-top:23px}.section-heading h2{font-size:27px}.section-heading .eyebrow{font-size:8px;letter-spacing:1.3px}.count{font-size:10px;padding:7px 9px}.grid{grid-template-columns:1fr;gap:22px}.visual{height:300px}.visual-icon{left:30px}.visual-star{right:25px}.sticker{right:20px;font-size:9px}.card-content{padding:23px}.card-content h3{font-size:28px}.collection-note{font-size:10px;margin-top:17px}.how{margin-top:40px;display:block;padding-block:28px}.how h2 br{display:none}.how h2{font-size:28px}.how ol{grid-template-columns:1fr;margin-top:24px;gap:24px}.how li{position:relative;padding-left:48px}.how li>span{position:absolute;left:0;top:0}.how h3{margin-bottom:5px}.faq{grid-template-columns:1fr;padding-block:43px;gap:23px}.faq h2{font-size:31px}.faq h2 br{display:none}summary{font-size:12px;padding:18px 0}details p{padding-right:0}.community{padding:25px;flex-direction:column;align-items:flex-start;gap:22px}.community h2{font-size:26px}.community>a{width:100%}.footer{margin-top:33px;gap:23px}.footer nav{gap:18px}.footer>span{width:100%}}
@media(max-width:360px){h1{font-size:47px}.spark{display:none}.hero>p br{display:none}.section-heading{gap:10px}.section-heading h2{font-size:25px}.sample{width:226px}.card-content{padding:20px}.visual-icon{left:17px}.sticker{right:12px}.community{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.directory{margin-top:65px}.directory-top{font-size:12px;color:var(--purple);white-space:nowrap}.directory-search{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:15px;padding:13px 18px;background:white;margin-bottom:30px}.directory-search label{font-size:12px;font-weight:600;white-space:nowrap}.directory-search input{min-width:0;flex:1;font:inherit;font-size:14px;border:0;background:#faf7fc;border-radius:9px;padding:12px;color:var(--ink)}.directory-search input:focus-visible{outline:2px solid #9973cc;outline-offset:2px}#search-count{font-size:11px;color:var(--muted);white-space:nowrap}.directory-group{margin-top:30px}.directory-group>h3{font-size:16px;margin-bottom:15px;font-weight:600}.directory-group h3>span{display:inline-block;margin-left:8px;color:#897792;font-size:11px;font-weight:400}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.directory-card{display:flex;align-items:center;gap:12px;padding:17px 15px;min-height:88px;border:1px solid var(--line);border-radius:14px;background:white;transition:background .2s,border-color .2s}.directory-card:hover{background:#f7f1fb;border-color:#d5c3e2}.directory-icon{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;background:#f2e9f8;border-radius:10px;color:#9d71b8;font-size:22px}.directory-card>span:nth-child(2){font-size:12px;font-weight:600;line-height:1.6}.directory-arrow{margin-left:auto;color:#a28bab;font-size:17px}.directory-group:nth-child(even) .directory-icon{background:#faeaf2;color:#bf729a}#no-tests{padding:30px;text-align:center;font-size:14px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:900px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.directory{margin-top:40px}.directory-search{flex-wrap:wrap;gap:10px;padding:14px}.directory-search label{width:100%}.directory-search input{width:100px}.directory-grid{grid-template-columns:1fr}.directory-card{min-height:72px}.directory-top{font-size:10px}.directory .section-heading h2{font-size:27px}}

/* Featured test cards keep the same layout with their own accent colors. */
.name-meaning{--card-tint:#e7eff8;--card-accent:#587da8;--card-light:#edf3fb;--card-border:#dbe6f3}
.behavior{--card-tint:#faeddc;--card-accent:#a77539;--card-light:#fcf3e7;--card-border:#eedfc9}
.inner-beauty{--card-tint:#e8f0e6;--card-accent:#638563;--card-light:#f0f6ed;--card-border:#dce9d8}
.marriage{--card-tint:#f8e5eb;--card-accent:#b16887;--card-light:#fbecf1;--card-border:#f0d8e2}
:is(.name-meaning,.behavior,.inner-beauty,.marriage) .visual{background:var(--card-tint)}
:is(.name-meaning,.behavior,.inner-beauty,.marriage) :is(.visual-icon,.visual-star,.sticker,.trait strong){color:var(--card-accent)}
:is(.name-meaning,.behavior,.inner-beauty,.marriage) :is(.avatar,.test-cta){background:var(--card-light);color:var(--card-accent);border-color:var(--card-border)}
:is(.name-meaning,.behavior,.inner-beauty,.marriage) .test-cta:hover{background:var(--card-tint)}
.behavior .sample,.marriage .sample{transform:rotate(5deg)}
.name-meaning .sample{min-height:245px}.name-meaning .trait{padding:8px 0}.name-meaning .trait strong{font-size:11px}
.test-card{display:flex;flex-direction:column}.card-content{display:flex;flex-direction:column;flex:1}.card-content .test-cta{margin-top:auto}.card-content>p:last-of-type{margin-bottom:23px}

.brand img{width:32px;height:32px;border-radius:9px;margin-right:8px;object-fit:contain}

:is(.attitude,.strengths,.confidence,.leadership,.humor) .visual{background:#edeaf7}
:is(.attitude,.strengths,.confidence,.leadership,.humor) .test-cta{background:#f0eaf8;color:#7953a3;border-color:#e5daf1}
:is(.attitude,.strengths,.confidence,.leadership,.humor) .sample{transform:rotate(5deg)}