/* --------------------------------------------------------------------------- InspektAI Assist — the page a customer arrives at. Rebuilt from the Figma handover (Landing page (Desktop)), sampled rather than remembered. This page was dark until now, from an earlier reading that measured the live site's and took that for the design: the sections paint white over it and the dark was only the footer. It is one world with /find on purpose. A buyer who lands on the search and comes here to have a car looked at should not feel handed between two companies, so both pages carry the same ground, the same type, and the same rule about orange — it marks the thing you want pressed, and nothing else. The three step colours, the certified banner and the cost strip are lifted straight from the handover with their own hex values, because they are the parts of the brand this page did not have before. --------------------------------------------------------------------------- */ @font-face{font-family:'DM Sans';font-weight:700;src:url(/static/f/DMSans-Bold.ttf) format('truetype');font-display:swap} @font-face{font-family:'DM Sans';font-weight:500;src:url(/static/f/DMSans-Medium.ttf) format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:400;src:url(/static/f/Inter-Regular.ttf) format('truetype');font-display:swap} @font-face{font-family:'Inter';font-weight:600;src:url(/static/f/Inter-SemiBold.ttf) format('truetype');font-display:swap} :root{ color-scheme:light; --paper:#FFFFFF; --lav:#F6F6FE; /* the pale lavender the handover tints panels with */ --peach:#FEF3F0; /* the "hidden issues" strip */ --ink:#121212; --mute:#5A5A63; --faint:#70707B; /* 4.89 on white, 4.55 on the lavender */ --line:#E7E7F0; --edge:#D5D5E2; --acc:#FC5C2E; /* pressed things only */ --acc-ink:#B83E12; /* orange as text, where text is what it is */ --acc-dark:#E24A1E; --violet:#4E37D5; --violet-soft:#EEEBFF; --banner:#5236DD; /* the certified strip, sampled */ --step1:#C4DD34; /* lime */ --step2:#59249E; /* deep violet */ --step3:#1A8795; /* teal */ --ok:#1F7A4D; --pad:clamp(20px,5vw,64px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink); font:400 16px/1.62 'Inter',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3{font-family:'DM Sans',sans-serif;letter-spacing:-.03em} img{max-width:100%;display:block} a{color:inherit} .num{font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums} section{padding:clamp(44px,6vw,84px) var(--pad);max-width:1240px;margin:0 auto} h2{font-size:clamp(26px,3.6vw,40px);line-height:1.08;font-weight:700; text-wrap:balance;margin-bottom:12px} .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:15px; padding:7px 14px;border-radius:100px;background:var(--violet-soft); color:var(--violet);font:600 12.5px 'Inter',sans-serif} .kick{font:600 15px 'Inter',sans-serif;color:var(--violet);margin-bottom:9px} .sub{color:var(--mute);font-size:16.5px;max-width:60ch} /* ---------------------------------------------------------------- masthead */ .nav{display:flex;align-items:center;justify-content:space-between;gap:12px 20px; flex-wrap:wrap; /* a last resort: stack rather than collide */ padding:15px var(--pad);border-bottom:1px solid var(--line); position:sticky;top:0;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);z-index:20} .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand img{height:25px} .brand .sep{width:1px;height:18px;background:var(--edge)} .brand .what{font:600 13px 'Inter',sans-serif;color:var(--mute)} .nav nav{display:flex;gap:22px;align-items:center;font-size:14px;flex-wrap:wrap} .nav nav a{white-space:nowrap} .nav a{color:var(--mute);text-decoration:none} .nav a:hover{color:var(--ink)} .cta-sm{background:var(--acc);color:#121212 !important;padding:10px 20px; border-radius:100px;font-weight:600} .cta-sm:hover{background:var(--acc-dark)} .cta-sm .sm{display:none} /* -------------------------------------------------------------------- hero */ .hero{position:relative;overflow:hidden;padding-bottom:clamp(28px,4vw,44px)} .shape{position:absolute;top:-90px;right:-120px;width:min(46vw,560px);height:420px; background:linear-gradient(135deg,#644BF6 0%,#4E37D5 55%,#3B27A8 100%); border-radius:0 0 0 200px;transform:rotate(-8deg);opacity:.2; pointer-events:none;z-index:0} @media (max-width:820px){.shape{display:none}} .hero > *:not(.shape){position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px);align-items:center} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}} .hero h1{font-size:clamp(33px,5.4vw,58px);line-height:1.03;font-weight:700; text-wrap:balance;max-width:16ch} .hero h1 em{font-style:normal;color:var(--violet)} .lede{margin-top:18px;font-size:clamp(16px,1.6vw,19px);color:var(--mute);max-width:52ch} .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .cta{display:inline-flex;align-items:center;justify-content:center; background:var(--acc);color:#121212;text-decoration:none;white-space:nowrap; font:600 16px 'Inter',sans-serif;padding:15px 32px;border-radius:100px;border:none; cursor:pointer} .cta:hover{background:var(--acc-dark)} .cta[disabled]{background:var(--line);color:#53535C;cursor:not-allowed} .cta2{display:inline-flex;align-items:center;gap:9px;white-space:nowrap; border:1.5px solid var(--ink);border-radius:100px;padding:14px 28px; font:600 15.5px 'Inter',sans-serif;text-decoration:none} .cta2:hover{background:var(--ink);color:var(--paper)} .plans{margin-top:14px;font:500 14.5px 'Inter',sans-serif;color:var(--violet); font-style:italic} .hero-shot{position:relative} .hero-shot img{width:100%;height:auto;border-radius:16px;position:relative;z-index:1} .hero-shot::before{content:"";position:absolute;left:-38px;top:4%;width:30px;height:62%; background:radial-gradient(var(--violet) 1.4px,transparent 1.5px) 0 0/13px 13px; opacity:.34;z-index:0;pointer-events:none} @media (max-width:900px){ .hero-shot::before{display:none} .hero-shot{order:-1}.hero-shot img{max-width:520px;margin:0 auto} } /* the four badges, drawn — same row the search page carries */ .trust{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); margin:34px 0 0;max-width:760px} .trust li{display:flex;flex-direction:column;align-items:center;text-align:center; gap:3px;padding:0 10px;border-left:1px solid var(--line)} .trust li:first-child{border-left:none} .tic{width:58px;height:58px;border-radius:100px;border:1.5px solid var(--violet); color:var(--violet);display:grid;place-items:center;margin-bottom:9px} .tic svg{width:30px;height:30px} .trust b{font:700 15px/1.25 'DM Sans',sans-serif;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .trust span:not(.tic){font:400 13px/1.25 'Inter',sans-serif;letter-spacing:.02em; text-transform:uppercase;color:var(--mute)} @media (max-width:640px){ .trust{grid-template-columns:repeat(2,1fr);gap:22px 0;max-width:420px;margin-inline:auto} .trust li:nth-child(odd){border-left:none} .tic{width:50px;height:50px}.tic svg{width:26px;height:26px} .trust b,.trust span:not(.tic){font-size:12px} } /* ------------------------------------------- what the hidden things cost you The handover puts real numbers on a peach strip. They are the whole argument for having a car looked at, so they lead rather than sit in a footnote. */ .costs{padding-top:0} .costs-in{background:var(--peach);border-radius:20px; padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px)} .costs h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:22px} .costgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:780px){.costgrid{grid-template-columns:1fr;gap:16px}} .cost{display:flex;gap:15px;align-items:flex-start} .cost svg{flex:none;width:38px;height:38px;color:var(--acc)} .cost .l{font-size:14.5px;color:#6B4436;line-height:1.4} .cost .v{font:700 16px 'DM Sans',sans-serif;color:var(--ink); font-variant-numeric:tabular-nums;margin-top:3px} /* ---------------------------------------------------------- how it works */ .how{background:var(--lav);max-width:none;border-block:1px solid var(--line)} .how-in{max-width:1240px;margin:0 auto} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px} @media (max-width:820px){.steps{grid-template-columns:1fr;gap:20px}} .step{background:var(--paper);border:1px solid var(--line);border-radius:18px; padding:26px 24px} .sbadge{width:62px;height:62px;border-radius:100px;display:grid;place-items:center; margin-bottom:17px} .sbadge svg{width:30px;height:30px} .step:nth-child(1) .sbadge{background:var(--step1);color:#121212} .step:nth-child(2) .sbadge{background:var(--step2);color:#fff} .step:nth-child(3) .sbadge{background:var(--step3);color:#fff} .step .n{font:600 13px 'Inter',sans-serif;margin-bottom:5px;display:block} .step:nth-child(1) .n{color:#5E6B0B} .step:nth-child(2) .n{color:var(--step2)} .step:nth-child(3) .n{color:#12626D} .step h3{font-size:19px;font-weight:700;margin-bottom:8px} .step p{font-size:15px;color:var(--mute)} /* ----------------------------------------------------------- the packages */ .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px} @media (max-width:820px){.packs{grid-template-columns:1fr}} .pack{border:1px solid var(--line);border-radius:18px;padding:26px 24px; background:var(--paper);display:flex;flex-direction:column;gap:6px; text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer; transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease} .pack:hover{border-color:var(--violet);transform:translateY(-2px); box-shadow:0 10px 26px rgba(78,55,213,.10)} .pack:focus-visible{outline:2px solid var(--violet);outline-offset:3px} .pack.pick{border:1.5px solid var(--violet);background:var(--violet-soft)} .pchoose{margin-top:12px;font:600 14px 'Inter',sans-serif;color:var(--violet)} .pname{font:700 17px 'DM Sans',sans-serif;display:flex;align-items:center; gap:9px;flex-wrap:wrap} .flag{font:600 10.5px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase; background:var(--violet);color:#fff;padding:4px 9px;border-radius:100px} .pprice{font:700 34px 'DM Sans',sans-serif;letter-spacing:-.035em; font-variant-numeric:tabular-nums;margin:4px 0 2px} .pwhat{font-size:14.5px;color:var(--mute)} .extra{margin-top:18px;font-size:15px;color:var(--mute)} .extra b{color:var(--ink);font-family:'DM Sans',sans-serif} .incl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:9px 22px;margin-top:20px} .incl li{position:relative;padding-left:26px;font-size:15px;color:var(--mute)} .incl li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px; border-radius:100px;border:1.6px solid var(--ok)} /* --------------------------------------------------- the live-pool banner Sits under the hero and points at /find. Dark ground with an orange call, the brand's Orange-on-Black, so it reads as the one bold invitation on an otherwise light page — and ties visually to the shortlist bar on /find. */ .poolbanner{padding-block:clamp(8px,2vw,20px)} .pool-in{background:var(--ink);color:#fff;border-radius:20px; padding:clamp(24px,3.2vw,40px) clamp(24px,3.4vw,44px); display:flex;align-items:center;justify-content:space-between; gap:clamp(20px,3vw,40px);flex-wrap:wrap} .pool-copy{max-width:66ch} .pool-eyebrow{font:600 12.5px 'Inter',sans-serif;color:#FCA98F; letter-spacing:.02em;margin-bottom:12px} .pool-in h2{color:#fff;font-size:clamp(22px,2.8vw,31px);margin-bottom:10px} .pool-in h2 #poolHeld{color:var(--acc);font-variant-numeric:tabular-nums} .pool-in p{color:rgba(255,255,255,.72);font-size:15.5px;max-width:60ch} .pool-cta{flex:none;background:var(--acc);color:#fff; font:600 16px 'Inter',sans-serif;padding:15px 26px;border-radius:100px; text-decoration:none;white-space:nowrap; transition:transform .12s ease,background .12s ease} .pool-cta:hover{background:var(--acc-dark);transform:translateY(-1px)} @media (max-width:720px){ .pool-in{flex-direction:column;align-items:flex-start} .pool-cta{width:100%;text-align:center} } /* --------------------------------------------------- the certified banner Solid violet, straight from the handover. It is the only place on the page where the ground goes dark, which is what makes it read as a stamp. */ .certified{padding-block:0} .cert-in{background:var(--banner);color:#fff;border-radius:18px; padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px); display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap} .cert-in img{height:34px;flex:none} .cert-bar{width:1px;align-self:stretch;min-height:38px;background:rgba(255,255,255,.35)} @media (max-width:640px){.cert-bar{display:none}} .cert-t{font:700 18px/1.35 'DM Sans',sans-serif;letter-spacing:-.02em} .cert-s{font-size:14px;color:rgba(255,255,255,.82);margin-top:4px} /* --------------------------------------------------------------- the brief */ .start{scroll-margin-top:80px} /* Form on the left, a short "what happens next" panel on the right — so the brief sits in a balanced two-column band instead of a narrow box adrift in a wide section with dead space beside it. */ .start-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px; align-items:start;margin-top:26px} @media (max-width:900px){.start-grid{grid-template-columns:1fr}} .intake{background:var(--lav);border:1px solid var(--line);border-radius:22px; padding:clamp(20px,3vw,32px)} .start-aside{background:var(--paper);border:1px solid var(--line);border-radius:22px; padding:24px 22px;position:sticky;top:88px} @media (max-width:900px){.start-aside{position:static}} .start-aside h3{font:700 17px 'DM Sans',sans-serif;margin-bottom:16px} .next{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:15px} .next li{position:relative;padding-left:36px;font-size:14.5px;color:var(--mute); line-height:1.5;counter-increment:s} .next li::before{content:counter(s);position:absolute;left:0;top:-1px;width:25px;height:25px; border-radius:100px;background:var(--violet-soft);color:var(--violet); font:700 13px 'DM Sans',sans-serif;display:grid;place-items:center} .next li b{color:var(--ink);font-weight:600} .aside-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line); font-size:13.5px;color:var(--mute);line-height:1.55} .aside-note b{color:var(--ink)} .chat{display:flex;flex-direction:column;gap:9px;max-height:270px;overflow-y:auto} .chat:not(:empty){margin-bottom:16px} .bub{max-width:min(92%,58ch);padding:11px 15px;border-radius:14px;font-size:15px; line-height:1.5} .bub.you{align-self:flex-end;background:var(--ink);color:#F4F1EE;border-bottom-right-radius:5px} .bub.desk{align-self:flex-start;background:var(--paper);border:1px solid var(--line); border-bottom-left-radius:5px} .row{display:flex;gap:10px;align-items:flex-start} @media (max-width:560px){.row{flex-wrap:wrap}.row textarea,.row button{flex:1 1 100%}} textarea,.who input,.who select{font:400 16px 'Inter',sans-serif;padding:13px 15px; border:1px solid var(--edge);border-radius:12px;background:var(--paper); color:var(--ink);width:100%} textarea{resize:vertical;min-height:88px} textarea::placeholder,.who input::placeholder{color:var(--faint)} textarea:focus,.who input:focus,.who select:focus{outline:none;border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)} #send{flex:none;font:600 15px 'Inter',sans-serif;padding:13px 26px;border:1.5px solid var(--ink); border-radius:100px;background:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap} #send:hover{background:var(--ink);color:var(--paper)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chips span{font:500 13px 'Inter',sans-serif;padding:7px 13px;border-radius:100px; background:var(--violet-soft);color:var(--violet)} .who{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px} @media (max-width:640px){.who{grid-template-columns:1fr}} #submit{margin-top:18px;width:100%} .done{margin-top:14px;font-size:15px;color:var(--ok);line-height:1.55} .done b{font-family:'DM Sans',sans-serif} /* -------------------------------------------------------------------- foot */ footer{background:var(--ink);color:#A8A29C;padding:40px var(--pad) 54px;font-size:14px} .foot-in{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:9px} footer b{color:#F4F1EE;font-family:'DM Sans',sans-serif} footer a{color:#FF7A52} .fine{font-size:12.5px;color:#8C867E;margin-top:5px} /* ---------------------------------------------------- the bar on a phone The same lesson the search page taught: the touch-target rules make this bar wider, not narrower, so it has to shed what it does not need. */ /* This bar carries three links and a longer button than the search page does, so it runs out of room sooner. Measured: it needs 780px for a single row with the long label, and the short one buys back the difference. Shortening the button is a smaller loss than dropping the links on a tablet. */ @media (max-width:860px){ .cta-sm .lg{display:none} .cta-sm .sm{display:inline} } /* Three links plus the brand and the button need about 680. Below that they go, rather than leaving a band where the bar quietly becomes two rows. */ @media (max-width:720px){ .nav{gap:12px;padding-left:16px;padding-right:16px} .nav nav a:not(.cta-sm){display:none} .brand,.brand .what,.cta-sm{white-space:nowrap} .brand img{height:22px} } @media (max-width:380px){.brand .sep,.brand .what{display:none}} /* The honeypot sits off-screen: a person never sees it, a bot fills it. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ------------------------------------------------------------- the pickers A guided brief: chips for the things a buyer thinks of as a handful of choices, selects for the longer lists. Both write to the same brief the reader does, so the two ways of saying it never disagree. */ .pickers{display:flex;flex-direction:column;gap:20px} .pk{display:flex;flex-direction:column;gap:9px} .pk-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pk-2 > div{display:flex;flex-direction:column;gap:9px} @media (max-width:520px){.pk-2{grid-template-columns:1fr;gap:14px}} .pickers label{font:600 11.5px 'Inter',sans-serif;letter-spacing:.06em; text-transform:uppercase;color:var(--faint)} .pickers label .opt{margin-left:6px;font-weight:400;letter-spacing:0;text-transform:none; color:var(--faint);opacity:.75} .chipset{display:flex;flex-wrap:wrap;gap:8px} .chipset button{font:500 14px 'Inter',sans-serif;padding:9px 16px;border-radius:100px; border:1.5px solid var(--edge);background:var(--paper);color:var(--ink);cursor:pointer; transition:border-color .12s,background .12s,color .12s} .chipset button:hover{border-color:var(--violet)} .chipset button.on{border-color:var(--violet);background:var(--violet-soft); color:var(--violet);font-weight:600} .pickers select{width:100%;font:400 15px 'Inter',sans-serif;padding:12px 14px; border:1px solid var(--edge);border-radius:12px;background:var(--paper);color:var(--ink); appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235A5A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .pickers select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)} .pickers select:disabled{background:var(--lav);color:var(--faint);cursor:not-allowed} /* the free-text, folded away as the second path */ .freeform{border-top:1px solid var(--line);padding-top:18px} .freeform summary{font:600 14.5px 'Inter',sans-serif;color:var(--violet);cursor:pointer; list-style:none;display:inline-flex;align-items:center;gap:8px;user-select:none} .freeform summary::-webkit-details-marker{display:none} .freeform summary::before{content:"+";font:700 16px 'DM Sans',sans-serif; width:20px;height:20px;border-radius:100px;background:var(--violet-soft);color:var(--violet); display:inline-grid;place-items:center;line-height:1} .freeform[open] summary::before{content:"\2212"} .freeform .chat{margin-top:14px} .freeform .row{margin-top:12px} /* --------------------------------------------- already found a car elsewhere A separate exit near the end for the buyer who does not need the search — they have the car, they just want it checked. Sends them to the inspection booking on the parent site. Peach ground, like the cost strip, so it reads as a friendly aside rather than another form. */ .found{padding-top:0} .found-in{background:var(--peach);border-radius:20px; padding:clamp(26px,4vw,44px) clamp(22px,3.5vw,48px); display:flex;align-items:center;justify-content:space-between; gap:clamp(20px,4vw,40px);flex-wrap:wrap} .found-copy{flex:1 1 460px} .found h2{font-size:clamp(23px,3vw,32px);margin-bottom:10px} .found-copy > p{font-size:16px;color:#6B4436;max-width:56ch;margin:0} .found .cta{flex:none;white-space:nowrap} /* the rider mascot beside a section heading — a brand moment away from the hero, so the market scan can keep the hero. Halftone swirl faint behind it. */ .how-head{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,48px); margin-bottom:clamp(24px,3.5vw,36px)} .how-head > div:first-child{max-width:52ch} .how-mascot{position:relative;flex:none;width:min(28%,240px);display:flex;justify-content:center; align-items:flex-end} .how-mascot .halftone{position:absolute;top:50%;left:50%;translate:-50% -50%;width:118%;height:auto; opacity:.13;z-index:0;pointer-events:none} .how-mascot .rider{position:relative;z-index:1;width:auto;height:auto;max-height:200px; filter:drop-shadow(0 16px 34px rgba(20,18,40,.18))} @media (max-width:640px){.how-mascot{display:none}}