:root { --ink:#171717; --muted:#757575; --line:#e7e7e7; --paper:#fff; --tint:#fafafa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
.site-header { height:77px; padding:0 5.7vw; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); z-index:5; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:17px; font-weight:600; letter-spacing:-.6px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:white; font-size:13px; font-weight:700; }
nav { display:flex; align-items:center; gap:24px; } nav a { color:#707070; font-size:14px; text-decoration:none; padding:9px 0; } nav a.active { padding:9px 14px; background:var(--ink); border-radius:20px; color:white; }
.hero { min-height:587px; padding:112px 24px 105px; text-align:center; background:linear-gradient(180deg,#fafafa 0%,#fff 87%); border-bottom:1px solid var(--line); }
.eyebrow { display:inline-flex; gap:9px; align-items:center; padding:6px 13px; border:1px solid var(--line); border-radius:30px; color:#707070; background:#fff; box-shadow:0 1px 3px #00000006; font-size:12px; }
.eyebrow span { width:5px; height:5px; border-radius:50%; background:var(--ink); }
h1,h2,h3 { font-family:Manrope,Arial,sans-serif; } h1 { margin:25px auto 19px; font-size:58px; line-height:1.05; letter-spacing:-3.2px; max-width:820px; } h1 em { color:#7b7b7b; font-style:normal; }
.hero > p { margin:0 auto; color:var(--muted); font-size:17px; line-height:1.65; max-width:700px; }
.hero-actions { display:flex; justify-content:center; gap:11px; margin-top:35px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:49px; padding:0 27px; border-radius:28px; text-decoration:none; font-size:14px; font-weight:600; transition:transform .2s ease, background .2s ease; } .button:hover { transform:translateY(-2px); }.button-dark { color:white; background:var(--ink); }.button-dark:hover { background:#343434; }.button-light { color:var(--ink); border:1px solid var(--line); background:white; }
.benefits { padding:81px 24px 79px; border-bottom:1px solid var(--line); }.section-heading { margin:0 auto; max-width:650px; text-align:center; }.section-heading h2 { margin:0; font-size:29px; line-height:1.2; letter-spacing:-1.4px; }.section-heading p { margin:11px auto 0; max-width:600px; color:var(--muted); font-size:15px; line-height:1.55; }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; max-width:977px; margin:48px auto 0; }.feature-card { min-height:176px; padding:24px; border:1px solid #e2e2e2; border-radius:15px; box-shadow:0 1px 2px #00000004; }.icon { display:grid; width:40px; height:40px; place-items:center; color:#272727; background:#efefef; border-radius:11px; font-family:Arial,sans-serif; font-size:23px; }.feature-card h3 { margin:19px 0 7px; font-size:15px; letter-spacing:-.45px; }.feature-card p { margin:0; color:var(--muted); max-width:410px; font-size:14px; line-height:1.5; }
.quiz { padding:82px 24px 91px; text-align:center; border-bottom:1px solid var(--line); }.quiz .button { margin-top:33px; }.team { max-width:977px; margin:auto; padding:73px 24px; display:flex; justify-content:space-between; gap:40px; }.team h2 { margin:7px 0 0; max-width:460px; font-size:31px; letter-spacing:-1.6px; line-height:1.2; }.team > p { margin:25px 0 0; max-width:380px; color:var(--muted); line-height:1.6; }.kicker { margin:0; color:#777; font-size:11px; font-weight:700; letter-spacing:1.4px; } footer { padding:23px 5.7vw; border-top:1px solid var(--line); color:#777; font-size:12px; }
.planner { min-height:calc(100vh - 77px); background:#fafafa; padding:50px 24px 85px; }.steps { display:flex; max-width:930px; margin:0 auto 70px; justify-content:space-between; align-items:center; color:#9a9a9a; font-size:11px; text-align:center; }.steps b { font-size:12px; font-weight:500; }.steps .current { color:var(--ink); }.steps i { color:#c8c8c8; font-style:normal; }.planner-content { max-width:980px; margin:auto; text-align:center; }.planner-content h1,.team-hero h1 { font-size:44px; margin:10px auto 14px; letter-spacing:-2.6px; }.planner-content h1 em,.team-hero h1 em { color:#888; font-style:normal; }.intro { max-width:580px; margin:0 auto; color:var(--muted); line-height:1.55; }.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:43px; text-align:left; }.price-card { min-height:263px; border:1px solid #e1e1e1; border-radius:14px; padding:22px; background:white; color:var(--ink); text-align:left; cursor:pointer; font:inherit; transition:border .18s ease, box-shadow .18s ease, transform .18s ease; }.price-card:hover,.price-card.selected { border-color:#171717; box-shadow:0 7px 22px #0000000b; transform:translateY(-2px); }.price-card h2 { margin:0 0 16px; font-size:18px; }.price-card strong { display:block; font-family:Manrope,Arial,sans-serif; font-size:24px; letter-spacing:-1px; }.price-card strong small { color:#777; font-family:"DM Sans",sans-serif; font-size:11px; letter-spacing:0; font-weight:400; }.price-card b { display:block; font-size:12px; margin:18px 0 9px; }.price-card p,.price-card > small { color:var(--muted); font-size:12px; line-height:1.45; }.price-card > small { display:block; margin-top:14px; }.tag { display:inline-block; color:white; background:#171717; font-size:9px; font-weight:700; letter-spacing:.6px; padding:4px 6px; border-radius:4px; margin-bottom:12px; }.continue { margin-top:30px; }.continue[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }.fine-print { color:#8a8a8a; font-size:11px; margin:14px 0 0; }.team-page { background:#fafafa; }.team-hero { padding:104px 24px 93px; text-align:center; border-bottom:1px solid var(--line); }.team-hero > p:last-child { max-width:610px; color:var(--muted); line-height:1.65; margin:0 auto; }.profile { max-width:975px; margin:auto; display:grid; grid-template-columns:280px 1fr; gap:72px; padding:84px 24px; align-items:start; }.profile-mark { height:310px; display:grid; place-items:center; background:#1c1c1c; color:#fff; border-radius:18px; font-family:Manrope,Arial,sans-serif; font-size:64px; font-weight:800; letter-spacing:-6px; }.profile h2 { margin:8px 0 17px; font-size:34px; letter-spacing:-1.8px; }.profile p:not(.kicker) { max-width:590px; margin:0; color:var(--muted); line-height:1.7; }.skills { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }.skills span { padding:7px 11px; border-radius:50px; background:#eee; color:#555; font-size:12px; }
.quiz-step { display:none; min-height:385px; }.quiz-step.active { display:block; }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; max-width:680px; margin:42px auto 0; text-align:left; }.field-grid.single { grid-template-columns:1fr; max-width:620px; }.field-grid label { color:#383838; font-size:13px; font-weight:600; }.field-grid label span { color:#888; font-weight:400; }.field-grid input,.field-grid select,.field-grid textarea { width:100%; margin-top:7px; border:1px solid #dedede; border-radius:9px; padding:13px; outline:none; color:#222; background:white; font:400 14px "DM Sans",sans-serif; }.field-grid input:focus,.field-grid select:focus,.field-grid textarea:focus { border-color:#222; box-shadow:0 0 0 3px #1717170d; }.field-grid textarea { resize:vertical; }.option-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:680px; margin:42px auto 0; text-align:left; }.option-list label { display:flex; align-items:center; gap:11px; border:1px solid #dedede; border-radius:10px; padding:16px; background:white; cursor:pointer; font-size:14px; }.option-list input { width:16px; height:16px; accent-color:#171717; }.quiz-actions { display:flex; justify-content:center; gap:10px; margin-top:30px; }.review { max-width:620px; margin:38px auto 0; border:1px solid #e2e2e2; border-radius:13px; background:white; text-align:left; overflow:hidden; }.review div { display:flex; gap:20px; padding:15px 18px; border-bottom:1px solid #eee; }.review div:last-child { border-bottom:0; }.review b { width:120px; color:#777; font-size:12px; text-transform:capitalize; }.review span { flex:1; font-size:14px; }
.thank-you { min-height:385px; padding-top:60px; }.thank-you .button { margin-top:32px; }
@media (max-width:640px) { .site-header { height:67px; padding:0 20px; } nav { gap:12px; } nav a { font-size:12px; } nav a.active { padding:8px 10px; }.hero { min-height:auto; padding:89px 20px 82px; } h1 { font-size:41px; letter-spacing:-2.5px; }.hero > p { font-size:15px; }.hero-actions { flex-direction:column; margin:31px auto 0; max-width:260px; }.benefits,.quiz { padding:65px 20px; }.card-grid { grid-template-columns:1fr; margin-top:37px; }.feature-card { min-height:156px; }.team { padding:55px 20px; flex-direction:column; gap:0; }.team > p { margin-top:20px; } }
@media (max-width:760px) { .steps { margin-bottom:45px; overflow:hidden; gap:9px; }.steps span:nth-of-type(n+4),.steps i:nth-of-type(n+3) { display:none; }.planner { padding-top:36px; }.pricing-grid { grid-template-columns:1fr; }.price-card { min-height:auto; }.planner-content h1,.team-hero h1 { font-size:39px; }.profile { grid-template-columns:1fr; gap:34px; padding:58px 24px; }.profile-mark { height:230px; }.team-hero { padding:75px 24px 69px; } }
@media (max-width:640px) { .field-grid,.option-list { grid-template-columns:1fr; margin-top:31px; }.quiz-step { min-height:410px; }.review div { display:block; }.review b { display:block; width:auto; margin-bottom:5px; } }