mesa-root">. Break the whole wrapper out to the viewport so every section (dark hero band, cream content, footer) fills the page even when GHL boxes the code element in a narrow column. No wrapper (local/normal host) => these rules are no-ops. */ .mesa-root{width:100vw;margin-left:calc(-50vw + 50%);background:var(--cream);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column} .mesa-root>header,.mesa-root>footer{width:100vw;margin-left:calc(-50vw + 50%)} /* Short quiz screens: fill the viewport with cream (not white) and center the question + nav as a group so the leftover space is balanced above/below instead of dumped at the bottom. Auto vertical margins are a no-op in normal block flow (local preview) and only take effect inside the GHL flex wrapper. */ body[data-view="quiz"] main{margin-top:auto} body[data-view="quiz"] .nav{margin-bottom:auto} html{-webkit-text-size-adjust:100%} body{font-family:'Inter',-apple-system,system-ui,sans-serif;color:var(--ink-body);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 55% at 85% -8%,rgba(249,168,37,.10),transparent 60%)} .wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%} h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--ink);text-wrap:balance} .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.hl{color:var(--text-orange);-webkit-text-fill-color:currentColor}} /* header + progress */ header{position:sticky;top:0;z-index:var(--z);background:#000;border-bottom:1px solid rgba(255,255,255,.08)} header .wrap{display:flex;align-items:center;justify-content:center;height:62px} header img{height:32px;width:auto;display:block} .prog{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:18px 22px 0} .prog-top{display:flex;justify-content:space-between;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px} .prog-bar{height:6px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden} .prog-fill{height:100%;width:0;border-radius:99px;background:var(--grad);transition:width .45s var(--ease)} /* stage */ main{padding:clamp(26px,5vw,54px) 0 0} .step{display:none;animation:fade .45s var(--ease)} .step.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-orange);background:rgba(249,198,93,.18);border:1px solid rgba(249,198,93,.42);padding:6px 14px;border-radius:99px;margin-bottom:16px} .q-title{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.15rem);font-weight:900;margin-bottom:8px} .q-sub{color:var(--ink-muted);font-size:1rem;margin-bottom:22px;max-width:52ch} .req{color:var(--text-orange)} /* options */ .opts{display:flex;flex-direction:column;gap:12px} .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:17px 18px;color:var(--ink);font-family:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;box-shadow:0 10px 26px -22px rgba(0,0,0,.35);transition:border-color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)} .opt:hover{background:var(--cream-2);border-color:rgba(249,168,37,.45)} .opt:active{transform:scale(.99)} .opt .mark{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #cdbfa4;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease)} .opt.multi .mark{border-radius:7px} .opt .mark svg{width:12px;height:12px;color:#2a1c00;opacity:0;transform:scale(.5);transition:all .18s var(--ease)} .opt.sel{border-color:var(--line-hi);background:rgba(249,198,93,.16)} .opt.sel .mark{background:var(--grad);border-color:transparent} .opt.sel .mark svg{opacity:1;transform:none} /* scale 1-10 */ .scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .scale button{aspect-ratio:1;border:1.5px solid var(--line);background:var(--white);color:var(--ink);border-radius:12px;font-family:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;transition:all .18s var(--ease)} .scale button:hover{border-color:rgba(249,168,37,.5)} .scale button.sel{background:var(--grad);color:#2a1c00;border-color:transparent} .scale-ends{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-muted);margin-top:10px} /* inputs */ .field{margin-bottom:16px} .field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.04em} .field input,.field textarea,.field select{width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:12px;color:var(--ink);font-family:inherit;font-size:1.02rem;padding:14px 15px} .field input::placeholder,.field textarea::placeholder{color:#a99f8c} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(249,198,93,.28)} .field textarea{min-height:110px;resize:vertical} .field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 15px center} .field select:required:invalid{color:#a99f8c} .field select option{color:var(--ink)} .cond{margin-top:6px} /* SMS/email consent (TCPA) on the Basics step */ .consent{margin-top:20px} .consent-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer} .consent-row input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--gold-deep);cursor:pointer} .consent-txt{font-size:.8rem;color:var(--ink-muted);line-height:1.5} .consent-links{text-align:center;margin-top:12px;font-size:.8rem} .consent-links a{color:var(--gold-antique)} /* nav */ .nav{position:relative;z-index:1;padding:clamp(22px,3vw,34px) 22px calc(48px + env(safe-area-inset-bottom))} .nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px} .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn);color:#2a1c00;font-family:inherit;font-weight:800;font-size:1.05rem;text-decoration:none;padding:16px 30px;border-radius:14px;border:none;cursor:pointer;box-shadow:0 14px 30px -14px rgba(245,124,0,.55);transition:transform .2s var(--ease),filter .2s} .btn:hover{filter:brightness(1.04);transform:translateY(-1px)} .btn::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);pointer-events:none;animation:shimmer 3.4s ease-in-out infinite} @keyframes shimmer{0%{left:-140%}60%,100%{left:160%}} .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none} .btn:disabled::after{display:none} .btn.full{flex:1} .btn .arr{transition:transform .2s var(--ease)}.btn:hover:not(:disabled) .arr{transform:translateX(3px)} .back{background:none;border:none;color:var(--ink-muted);font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:10px;white-space:nowrap} .back:hover{color:var(--ink)} .back[hidden]{visibility:hidden} /* intro + result */ .center{text-align:center} .center .q-sub{margin-left:auto;margin-right:auto} .meta-row{margin-top:22px;color:var(--ink-muted);font-size:.9rem;font-weight:600;text-align:center;line-height:1.7} .meta-row.split{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 26px} .meta-row.split span{display:inline-flex;align-items:center} .meta-row svg{width:15px;height:15px;color:var(--gold-deep);vertical-align:-2px;margin-right:5px} .result-cta{margin-top:26px} .sc-hero .eyebrow{color:var(--gold);background:rgba(249,198,93,.13);border-color:rgba(249,198,93,.3)} .sc-btn .btn{width:100%} /* intro hero = dark office-photo band (matches the credit funnel); content sections below stay cream */ body[data-view="intro"] main{position:relative;overflow:hidden} body[data-view="intro"] main::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(8,8,8,.82),rgba(6,6,6,.9)),var(--office);background-size:cover;background-position:center} body[data-view="intro"] main::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 84% 8%,rgba(249,168,37,.14),transparent 60%)} body[data-view="intro"] main>.wrap{position:relative;z-index:1} body[data-view="intro"] main .q-title{color:#fff} body[data-view="intro"] main .q-sub{color:#d9d4ca} body[data-view="intro"] main .eyebrow{color:var(--gold);background:rgba(249,198,93,.13);border-color:rgba(249,198,93,.3)} body[data-view="intro"] main .meta-row{color:#c4bfb5} body[data-view="intro"] main .meta-row svg{color:var(--gold)} .foot{text-align:center;color:#9a8f7c;font-size:.74rem;line-height:1.6;padding:8px 0 4px;width:100%;max-width:58ch;margin:22px auto 0} .foot a{color:var(--gold-antique)} /* below-the-fold: shown only on the landing (intro) view; gone during the quiz */ #landingExtra{display:none;position:relative;z-index:1;padding:clamp(40px,5vw,62px) 0 48px} body[data-view="intro"] #landingExtra{display:block} body[data-view="intro"] main{padding-bottom:16px} .foot{display:none} body[data-view="intro"] .foot{display:block} body[data-view="result"] main{padding-bottom:clamp(44px,6vw,72px)} .site-foot .wrap{max-width:var(--maxw)} /* keep the quiz questions at a comfortable reading width; the landing/result go wider */ body[data-view="quiz"] .prog, body[data-view="quiz"] main .wrap, body[data-view="quiz"] .nav-in{max-width:var(--qw)} @media (max-width:560px){ .scale{grid-template-columns:repeat(5,1fr)} .btn{padding:15px 20px;font-size:1rem}} @media (prefers-reduced-motion:reduce){.step{animation:none}.prog-fill{transition:none}.btn::after{animation:none}} /* ---------- Chaklo internal tool ---------- */ header .wrap{gap:12px} .int-badge{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold); border:1px solid rgba(249,198,93,.45);border-radius:999px;padding:3px 9px;white-space:nowrap} /* rep picker on the intro */ .rep-pick{max-width:var(--qw);margin:26px auto 0;text-align:left;background:var(--white);border:1px solid var(--line); border-radius:14px;padding:18px 18px 14px;box-shadow:var(--warm-shadow)} .rep-pick label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.02em;color:var(--ink);margin-bottom:8px} .rep-pick select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--cream);border:1px solid var(--line); border-radius:10px;padding:13px 14px;appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:42px} .rep-pick select:focus{outline:none;border-color:var(--line-hi);box-shadow:0 0 0 3px rgba(249,168,37,.15)} .rep-note{font-size:.78rem;color:var(--ink-muted);margin-top:9px} /* verdict banner */ .verdict{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;justify-content:center; border-radius:14px;padding:15px 20px;margin:0 auto 20px;max-width:var(--qw)} .v-label{font-size:1.02rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase} .v-track{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.72} .v-yes{background:#e7f5ee;border:1px solid #9dd4bb;color:#12694a} .v-exec{background:var(--cream-2);border:1px solid var(--gold);color:#8a6210} .v-no{background:#fdeee8;border:1px solid #e8b49f;color:#993d1f} .res-h{font-size:clamp(1.4rem,4vw,1.9rem);text-align:center;margin-bottom:8px} .res-sub{text-align:center;max-width:var(--qw);margin:0 auto 22px} .res-sub b{color:var(--ink)} /* gate readout */ .gates{list-style:none;max-width:var(--qw);margin:0 auto 20px;display:flex;flex-direction:column;gap:8px} .gates li{display:flex;gap:11px;align-items:flex-start;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:12px 14px;text-align:left} .gates .g-mark{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px} .gates .g-mark svg{width:12px;height:12px;stroke-width:3.4} .g-ok .g-mark{background:#d8f0e4;color:#12694a} .g-no .g-mark{background:#fadfd4;color:#993d1f} .g-txt{display:flex;flex-direction:column;gap:2px} .g-txt b{font-size:.85rem;color:var(--ink);font-weight:800} .g-txt span{font-size:.79rem;color:var(--ink-muted);line-height:1.45} /* answer recap */ .recap{max-width:var(--qw);margin:0 auto 20px;background:var(--white);border:1px solid var(--line); border-radius:14px;padding:16px 16px 6px;text-align:left;box-shadow:var(--warm-shadow)} .recap-h{display:flex;align-items:center;gap:8px;margin-bottom:12px} .recap-h svg{width:16px;height:16px;color:var(--gold-antique)} .recap-h b{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)} .recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px} .rc{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-bottom:1px solid var(--line)} .rc span{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)} .rc b{font-size:.87rem;color:var(--ink);font-weight:700;line-height:1.35} .recap-note{font-size:.83rem;color:var(--ink-body);padding:11px 0 12px;line-height:1.5} .recap-note b{color:var(--ink)} /* next step / downsell cards */ .ds{max-width:var(--qw);margin:0 auto 18px;text-align:left} .ds-h{margin-bottom:9px} .ds-card{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1px solid var(--line); border-radius:14px;padding:14px 15px;margin-bottom:9px;text-decoration:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .ds-card:hover{transform:translateY(-2px);box-shadow:var(--warm-shadow);border-color:var(--line-hi)} .ds-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--cream-2);color:var(--gold-antique); display:grid;place-items:center} .ds-ico svg{width:17px;height:17px} .ds-txt{display:flex;flex-direction:column;gap:3px;flex:1} .ds-txt b{font-size:.92rem;color:var(--ink);font-weight:800} .ds-txt span{font-size:.8rem;color:var(--ink-muted);line-height:1.45} .ds-arr{flex:0 0 auto;color:var(--ink-muted);opacity:.6} .ds-arr svg{width:14px;height:14px} .alt-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--text-orange); text-decoration:none;padding:6px 2px} .alt-link:hover{text-decoration:underline} .alt-link svg{width:12px;height:12px} /* tags + crm status */ .tagrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:var(--qw);margin:0 auto 14px} .tag{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink-muted);background:var(--cream-2); border:1px solid var(--line);border-radius:999px;padding:4px 10px} .crm-row{display:flex;justify-content:center;margin-bottom:6px} .crm{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;border-radius:999px;padding:6px 13px} .crm svg{width:13px;height:13px;stroke-width:3} .crm.ok{background:#e7f5ee;color:#12694a} .crm.warn{background:#fdeee8;color:#993d1f} body[data-view="result"] .result-cta{display:flex;justify-content:center;margin-top:18px} body[data-view="result"] main{padding-bottom:34px} @media(max-width:520px){ .verdict{flex-direction:column;gap:4px;padding:13px 16px} .recap-grid{grid-template-columns:1fr}}

Internal

Internal prequalification tool. Do not share this link outside the team.
Never promise a score increase, an item deletion, a timeline, or a funding amount. We dispute items that are inaccurate, incomplete, or unverifiable. Individual results vary.
© Copyright 2026 Mesa Group Consulting. All rights reserved.