/* ========================================================================== Carter Capner Law - claim intake wizard - AUTHORITY STYLESHEET Printed from wp_head at priority 9999, so it lands after every enqueued sheet on the page (the theme main.css and 20 legacy page sheets used to load after it and win every tie on source order). Every selector is additionally scoped with html body so it cannot be outranked by an equal-specificity rule from anywhere else. Do not re-enqueue this file with wp_enqueue_style: that puts it back at position 9 of 38 and the old look bleeds through again. ========================================================================== */ :root{--w-ink: #0B0B0B; --w-ink2: #0F172A; --w-mut: #475569; --w-quiet: #64748B; --w-slate: #1E293B; --w-blue: #1D63FF; --w-cta: #0B5CFF; --w-cta-dk: #0B3FB5; --w-tint: #EEF4FF; --w-pale: #F4F8FF; --w-line: #DCE4F2; --w-hair: #EAF0FA; --w-card: #FFFFFF; --w-ok: #0E7A4A; --w-ok-bg: #E8F6EE; --w-ok-ln: #BFE3CE; --w-err: #C2261B; --w-err-bg: #FDECEA; --w-err-ln: #F3CCC7; --w-font: Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --w-col: 760px; --w-gut: 44px; --w-r: 12px;} html body.ccl-ciw-standalone{margin: 0px; padding: 0px; background: linear-gradient(180deg, #FFFFFF 0%, var(--w-pale) 100%); background-attachment: fixed; color: var(--w-ink); font-family: var(--w-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; text-size-adjust: 100%;} html body .ccl-ciw-shell,html body .ccl-ciw-shell *{box-sizing: border-box; text-size-adjust: 100%;} html body .ccl-ciw-shell{min-height: 100dvh; display: flex; flex-direction: column; background: transparent;} html body .ccl-ciw-sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;} html body .ccl-ciw-hp,html body .ccl-hp{position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;} html body .ccl-ciw-topbar,html body .ccl-ciw-main,html body .ccl-ciw-foot-inner{width: 100%; max-width: calc(var(--w-col) + var(--w-gut) * 2); margin: 0px auto; padding-left: var(--w-gut); padding-right: var(--w-gut);} html body .ccl-progress{position: sticky; top: 0px; z-index: 5; height: 3px; background: var(--w-hair); flex-shrink: 0; overflow: hidden;} html body .ccl-progress-fill{display: block; height: 100%; width: 0px; background: var(--w-cta); transition: width 0.3s;} html body .ccl-ciw-topbar{display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; flex-shrink: 0;} html body .ccl-ciw-brand{display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none;} html body .ccl-ciw-logo{height: 36px; width: auto; display: block;} html body .ccl-ciw-brandtext{font-size: 7.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--w-quiet);} html body .ccl-ciw-phone{display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0px 16px; border-radius: 999px; background: var(--w-tint); color: var(--w-slate); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;} html body .ccl-ciw-phone:hover{background: rgb(226, 235, 253); color: var(--w-cta-dk);} html body .ccl-ciw-phone svg{width: 15px; height: 15px; flex-shrink: 0;} html body .ccl-ciw-main{flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 12px; padding-bottom: 40px; gap: 16px;} html body .ccl-ciw-rail{display: none;} html body .ccl-ciw{display: flex; flex-direction: column; gap: 20px; background: none; border: 0px; border-radius: 0px; padding: 0px; box-shadow: none;} html body .ccl-ciw-eyebrow{margin: 0px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-cta);} html body .ccl-ciw-eyebrow b{color: var(--w-cta); font-weight: 700;} html body .ccl-ciw-form > .ccl-ciw-step{display: flex; flex-direction: column; gap: 0px; padding: 0px; margin: 0px; border: 0px; background: none;} html body .ccl-ciw-form > .ccl-ciw-step[hidden]{display: none;} html body .ccl-ciw-when[hidden]{display: none;} /* --- review and submit --------------------------------------------------- The last screen carries no question, so the micro layer marks it .mq-none and the step keeps its own title and lede. The summary blocks were being swallowed by the rail teardown above until 1.9.18: their classes are named rail-* but they belong to .ccl-ciw-review, which is not the sidebar. */ html body .ccl-ciw-step.mq-none .ccl-ciw-step-title{ display:block; margin:0px; font-size:48px; font-weight:800; line-height:1.06; letter-spacing:-.038em; color:var(--w-ink); } html body .ccl-ciw-step.mq-none .ccl-ciw-step-lede{ display:block; margin:14px 0px 0px; font-size:19px; line-height:1.55; color:var(--w-mut); } html body .ccl-ciw-review{ display:flex; flex-direction:column; margin:34px 0px 0px; } html body .ccl-ciw-rail-blk{ display:flex; gap:16px; padding:22px 0px; border-top:1px solid var(--w-line); } html body .ccl-ciw-rail-blk:first-child{ border-top:0px; padding-top:0px; } html body .ccl-ciw-rail-node{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:38px; height:38px; margin-top:2px; border-radius:10px; background:var(--w-tint); color:var(--w-cta); } html body .ccl-ciw-rail-node svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } html body .ccl-ciw-rail-body{ flex:1 1 auto; min-width:0px; } html body .ccl-ciw-rev-edit svg{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:760px){ html body .ccl-ciw-step.mq-none .ccl-ciw-step-title{ font-size:30px; letter-spacing:-.032em; } html body .ccl-ciw-step.mq-none .ccl-ciw-step-lede{ font-size:16px; } html body .ccl-ciw-review{ margin-top:26px; } html body .ccl-ciw-rail-blk{ gap:12px; padding:18px 0px; } html body .ccl-ciw-rail-node{ width:32px; height:32px; } html body .ccl-ciw-rev-row{ grid-template-columns:1fr; gap:4px; } } /* --- screen 8: after submit ---------------------------------------------- The thank-you sat in a .ccl-ciw-state, which is styled as an inline notice (a hairline box, 17px of padding). That inset the greeting 18px from the logo and the footer, and left the heading at the theme's h3 size. The board puts this screen on the page ground, on the one measure, with the estimate as the only card. */ /* The thank-you lands in a .ccl-ciw-state that also carries .ccl-ciw-success, whose green notice fill is declared later in this file - so the screen came up on a green panel. Naming both classes outranks it. */ html body .ccl-ciw-state.ccl-ciw-success.ccl-ciw-has-est, html body .ccl-ciw-state.ccl-ciw-has-est{ display:block; padding:0px; border:0px; border-radius:0px; background:none; box-shadow:none; } html body .ccl-ciw-ty{ display:flex; flex-direction:column; } html body .ccl-ciw-ty-ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; align-self:flex-start; width:54px; height:54px; margin:0px 0px 20px; border-radius:14px; background:var(--w-tint); border:1px solid rgba(29,99,255,.22); color:var(--w-cta); } html body .ccl-ciw-ty-ico svg{ width:26px; height:26px; } html body .ccl-ciw-ty-title{ margin:0px; font-size:50px; font-weight:800; line-height:1.04; letter-spacing:-.035em; color:var(--w-ink); } html body .ccl-ciw-ty-sub{ margin:20px 0px 0px; font-size:19px; line-height:1.55; color:var(--w-mut); } html body .ccl-ciw-ty-next{ margin:34px 0px 0px; } html body .ccl-ciw-ty-next-h{ margin:0px 0px 2px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--w-quiet); } html body .ccl-ciw-ty-list{ list-style:none; margin:0px; padding:0px; } html body .ccl-ciw-ty-list li{ padding:15px 0px; border-top:1px solid var(--w-hair); font-size:15.5px; line-height:1.5; color:var(--w-mut); } html body .ccl-ciw-ty-call{ margin:22px 0px 0px; font-size:15.5px; line-height:1.55; color:var(--w-mut); } html body .ccl-ciw-ty-call a{ color:var(--w-cta); font-weight:700; text-decoration:none; } html body .ccl-ciw-ty-call a:hover{ color:var(--w-cta-dk); text-decoration:underline; } html body .ccl-ciw-ty .ccl-ciw-est{ margin:34px 0px 0px; } @media (max-width:760px){ html body .ccl-ciw-ty-ico{ width:46px; height:46px; margin-bottom:16px; border-radius:12px; } html body .ccl-ciw-ty-ico svg{ width:22px; height:22px; } html body .ccl-ciw-ty-title{ font-size:32px; letter-spacing:-.03em; } html body .ccl-ciw-ty-sub{ margin-top:16px; font-size:16px; } html body .ccl-ciw-ty-next{ margin-top:28px; } html body .ccl-ciw-ty-list li{ padding:13px 0px; font-size:14.5px; } html body .ccl-ciw-ty .ccl-ciw-est{ margin-top:28px; } } /* --- a question that takes more than one answer --------------------------- Same row, square tick instead of round: a circle says "one of these" and a square says "as many as apply", which is the only cue that the screen will not turn when you tap. */ html body .ccl-ciw-opt-multi .ccl-ciw-opt-check{ border-radius:6px; } html body .ccl-ciw-opt-multi::before{ border-radius:6px; } html body .ccl-ciw-opts-multi-note{ margin:0px 0px 12px; font-size:15.5px; color:var(--w-quiet); } html body .ccl-ciw-mq-off{display: none;} html body .ccl-ciw-field{display: flex; flex-direction: column; gap: 20px;} html body .ccl-ciw-field > label{font-size: 48px; font-weight: 800; line-height: 1.06; letter-spacing: -0.038em; color: var(--w-ink);} html body .ccl-ciw-req{color: var(--w-cta); margin-left: 5px; font-size: 26px; vertical-align: super; line-height: 0;} html body .ccl-ciw-field input[type="text"],html body .ccl-ciw-field input[type="email"],html body .ccl-ciw-field input[type="tel"],html body .ccl-ciw-field input[type="date"],html body .ccl-ciw-field input[type="number"],html body .ccl-ciw-field select,html body .ccl-ciw-field textarea{width: 100%; min-height: 62px; border: 1.5px solid var(--w-line); border-radius: var(--w-r); background: var(--w-card); padding: 16px 18px; font-family: inherit; font-size: 18px; font-weight: 500; color: var(--w-ink); line-height: 1.35; appearance: none; box-shadow: rgba(15, 23, 42, 0.04) 0px 1px 2px;} html body .ccl-ciw-field textarea{min-height: 132px; resize: vertical;} html body .ccl-ciw-field select{padding-right: 52px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B5CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center;} html body .ccl-ciw-field input::placeholder,html body .ccl-ciw-field textarea::placeholder{color: rgb(154, 167, 188); font-weight: 400;} html body .ccl-ciw-field input:hover,html body .ccl-ciw-field select:hover,html body .ccl-ciw-field textarea:hover{border-color: rgb(185, 201, 230);} html body .ccl-ciw-field input:focus,html body .ccl-ciw-field select:focus,html body .ccl-ciw-field textarea:focus{outline: none; border-color: var(--w-cta); box-shadow: rgba(11, 92, 255, 0.15) 0px 0px 0px 4px;} html body .ccl-ciw-field--disabled{opacity: 0.55;} html body .ccl-ciw-field--disabled input,html body .ccl-ciw-field--disabled select,html body .ccl-ciw-field--disabled textarea{background: var(--w-pale); cursor: not-allowed;} html body .ccl-ciw-fielderr{display: flex; gap: 7px; align-items: flex-start; margin: -8px 0px 0px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--w-err);} html body .ccl-ciw-fielderr:empty{display: none;} html body [aria-invalid="true"]{border-color: var(--w-err);} html body [aria-invalid="true"]:focus{box-shadow: rgba(194, 38, 27, 0.14) 0px 0px 0px 4px;} html body .ccl-ciw-help{margin: 26px 0px 0px; font-size: 15.5px; line-height: 1.6; color: var(--w-quiet); max-width: 56ch;} html body .ccl-ciw-step-title{display: none;} html body .ccl-ciw-step-lede{display: none;} html body .ccl-ciw-step.mq-chips .ccl-ciw-step-title{display: block; margin: 0px; font-size: 48px; font-weight: 800; line-height: 1.06; letter-spacing: -0.038em; color: var(--w-ink);} html body .ccl-ciw-step.mq-chips .ccl-ciw-step-lede{display: block; margin: 16px 0px 0px; font-size: 19px; line-height: 1.6; color: var(--w-mut); max-width: 56ch;} html body .ccl-ciw-chips{display: flex; flex-direction: column; gap: 10px; margin-top: 28px; counter-reset: ccl-key 0;} html body .ccl-ciw-chip{display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px; padding: 12px 18px; border: 1.5px solid var(--w-line); border-radius: var(--w-r); background: var(--w-card); box-shadow: rgba(15, 23, 42, 0.04) 0px 1px 2px; cursor: pointer; text-align: left; font-family: inherit; color: var(--w-ink); transition: border-color 0.13s, background 0.13s, box-shadow 0.13s;} html body .ccl-ciw-chip::before{counter-increment: ccl-key 1; content: counter(ccl-key, upper-alpha); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--w-line); background: var(--w-card); color: var(--w-quiet); font-size: 14px; font-weight: 700;} html body .ccl-ciw-chip:hover{border-color: rgb(185, 201, 230);} html body .ccl-ciw-chip:focus-visible{outline: none; border-color: var(--w-cta); box-shadow: rgba(11, 92, 255, 0.15) 0px 0px 0px 4px;} html body .ccl-ciw-chip.is-selected,html body .ccl-ciw-chip[aria-pressed="true"]{border-color: var(--w-cta); background: var(--w-tint); box-shadow: rgba(11, 92, 255, 0.12) 0px 0px 0px 4px;} html body .ccl-ciw-chip.is-selected::before,html body .ccl-ciw-chip[aria-pressed="true"]::before{background: var(--w-cta); border-color: var(--w-cta); color: var(--w-card);} html body .ccl-ciw-chip-body{display: flex; flex-direction: column; gap: 3px; flex-grow: 1; order: 2;} html body .ccl-ciw-chip-t{font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.018em; color: var(--w-ink);} html body .ccl-ciw-chip-d{font-size: 13.5px; line-height: 1.4; color: var(--w-quiet);} html body .ccl-ciw-chip::before{order: 1;} html body .ccl-ciw-chip-check{order: 3; flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid rgb(195, 206, 226); background: var(--w-card);} html body .ccl-ciw-chip.is-selected .ccl-ciw-chip-check,html body .ccl-ciw-chip[aria-pressed="true"] .ccl-ciw-chip-check{border-color: var(--w-cta); background-color: var(--w-cta); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9.5-10.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: 15px auto;} html body .ccl-ciw-chip svg{flex-shrink: 0; width: 22px; height: 22px;} html body .ccl-ciw-nav{display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 36px;} html body .ccl-ciw-btn{display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0px 32px; border-radius: var(--w-r); font-family: inherit; font-size: 16.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; border: 1.5px solid var(--w-line); background: var(--w-card); color: var(--w-slate);} html body .ccl-ciw-btn:hover{border-color: rgb(185, 201, 230); color: var(--w-cta-dk);} html body .ccl-ciw-btn:focus-visible{outline: none; box-shadow: rgba(11, 92, 255, 0.28) 0px 0px 0px 4px;} html body .ccl-ciw-btn[hidden]{display: none;} html body .ccl-ciw-next,html body .ccl-ciw-submit{background: var(--w-cta); border-color: var(--w-cta); color: var(--w-card); padding: 0px 40px;} html body .ccl-ciw-next:hover,html body .ccl-ciw-submit:hover{background: var(--w-cta-dk); border-color: var(--w-cta-dk); color: var(--w-card);} html body .ccl-ciw-next[disabled],html body .ccl-ciw-submit[disabled]{background: rgb(191, 208, 240); border-color: rgb(191, 208, 240); cursor: progress;} html body .ccl-ciw-back{order: 2;} html body .ccl-ciw-next,html body .ccl-ciw-submit{order: 1;} html body .ccl-ciw-state,html body .ccl-ciw-hl{display: flex; gap: 11px; align-items: flex-start; margin: 0px; padding: 15px 17px; border-radius: var(--w-r); background: var(--w-tint); border: 1px solid rgba(29, 99, 255, 0.2); font-size: 15px; line-height: 1.5; color: var(--w-slate);} html body .ccl-ciw-state[hidden],html body .ccl-ciw-hl[hidden]{display: none;} html body .ccl-ciw-state.ccl-ciw-error,html body .ccl-ciw-state.ccl-ciw-expired,html body .ccl-ciw-hl.is-error{background: var(--w-err-bg); border-color: var(--w-err-ln); color: var(--w-err);} html body .ccl-ciw-state.ccl-ciw-success,html body .ccl-ciw-hl.is-ok{background: var(--w-ok-bg); border-color: var(--w-ok-ln); color: var(--w-ok);} html body .ccl-ciw-state.ccl-ciw-loading{background: var(--w-pale); border-color: var(--w-hair); color: var(--w-quiet);} html body .ccl-ciw-footnote{flex-shrink: 0; border-top: 1px solid var(--w-hair);} html body .ccl-ciw-foot-inner{padding-top: 18px; padding-bottom: 22px; display: flex; flex-direction: column; gap: 5px;} html body .ccl-ciw-disc,html body .ccl-ciw-disc-meta{margin: 0px; font-size: 11.5px; line-height: 1.55; color: rgb(148, 161, 181);} html body .ccl-ciw-disc strong{color: var(--w-quiet); font-weight: 600;} html body .ccl-ciw-gate,html body .ccl-codegate,html body .ccl-ciw-gate-card{display: flex; flex-direction: column; gap: 22px;} html body .ccl-ciw-gate-ico{display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; border: 1px solid rgba(29,99,255,.22); background: var(--w-tint); color: var(--w-cta); align-self: flex-start;} html body .ccl-ciw-gate-title{margin: 0px; font-size: 50px; font-weight: 800; line-height: 1.06; letter-spacing: -0.038em; color: var(--w-ink);} html body .ccl-ciw-gate-sub{margin: 16px 0px 0px; font-size: 19px; line-height: 1.55; color: var(--w-mut); max-width: 600px;} html body .ccl-ciw-gate-sub strong{color: var(--w-ink); font-weight: 700;} html body .ccl-ciw-gate-fine{ margin:14px 0px 0px; font-size:13.5px; line-height:1.55; color:var(--w-quiet); max-width:600px; } html body .ccl-ciw-gate-fine + .ccl-ciw-gate-fine{ margin-top:8px; } html body .ccl-ciw-gate-fine a{ color:var(--w-cta); font-weight:700; text-decoration:none; } html body .ccl-ciw-code-wrap{display: flex; gap: 12px; flex-wrap: wrap; align-items: center;} html body .ccl-ciw-gate-input,html body .ccl-code{width: 100%; max-width: 320px; height: 72px; border: 1.5px solid var(--w-line); border-radius: var(--w-r); background: var(--w-card); padding: 0px 20px; font-family: inherit; font-size: 30px; font-weight: 700; letter-spacing: 0.34em; color: var(--w-ink); text-align: center;} html body .ccl-ciw-gate-input:focus,html body .ccl-code:focus{outline: none; border-color: var(--w-cta); box-shadow: rgba(11, 92, 255, 0.15) 0px 0px 0px 4px;} html body .ccl-ciw-gate-btn,html body .ccl-code-submit{display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0px 36px; border: 1.5px solid var(--w-cta); border-radius: var(--w-r); background: var(--w-cta); color: var(--w-card); font-family: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer;} html body .ccl-ciw-gate-btn:hover,html body .ccl-code-submit:hover{background: var(--w-cta-dk); border-color: var(--w-cta-dk);} html body .ccl-ciw-gate-err,html body .ccl-code-err{display: flex; gap: 10px; align-items: flex-start; padding: 15px 17px; border-radius: var(--w-r); background: var(--w-err-bg); border: 1px solid var(--w-err-ln); color: var(--w-err); font-size: 15px; font-weight: 600; line-height: 1.45;} html body .ccl-ciw-gate-err:empty,html body .ccl-code-err:empty{display: none;} html body .ccl-ciw-gate-resend,html body .ccl-code-resend{display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--w-hair);} html body .ccl-resend-msg,html body .ccl-resend-note,html body .ccl-cooldown{font-size: 14.5px; line-height: 1.5; color: var(--w-quiet);} html body .ccl-resend-msg.is-ok{color: var(--w-ok); font-weight: 600;} html body .ccl-ciw-sent{display: flex; flex-direction: column; gap: 6px; padding: 15px 17px; border-radius: var(--w-r); background: var(--w-ok-bg); border: 1px solid var(--w-ok-ln);} html body .ccl-ciw-sent-head{font-size: 15px; font-weight: 700; color: var(--w-ok);} html body .ccl-ciw-sent-wait{font-size: 14px; color: var(--w-mut);} html body .ccl-ciw-sent-why{font-size: 13.5px; color: var(--w-quiet); line-height: 1.5;} html body .ccl-ciw-acc,html body .ccl-accepted{display: flex; flex-direction: column; gap: 22px;} html body .ccl-ciw-acc-pill{display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--w-ok-bg); border: 1px solid var(--w-ok-ln); font-size: 13px; font-weight: 700; color: var(--w-ok);} html body .ccl-ciw-acc-title{margin: 0px; font-size: 42px; font-weight: 800; line-height: 1.06; letter-spacing: -0.038em; color: var(--w-ink);} html body .ccl-ciw-acc-sub{margin: 0px; font-size: 16.5px; line-height: 1.6; color: var(--w-mut); max-width: 56ch;} html body .ccl-ciw-acc-sub strong{color: var(--w-ink); font-weight: 700;} html body .ccl-ciw-acc-card,html body .ccl-ciw-acc-prog{display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--w-r); background: var(--w-pale); border: 1px solid var(--w-hair);} html body .ccl-ciw-acc-prog-top{display: flex; justify-content: space-between; align-items: baseline; gap: 12px;} html body .ccl-ciw-acc-prog-lab{font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-quiet);} html body .ccl-ciw-acc-prog-n{font-size: 14px; font-weight: 600; color: var(--w-mut);} html body .ccl-ciw-acc-bar{height: 7px; border-radius: 999px; background: rgb(223, 231, 244); overflow: hidden;} html body .ccl-ciw-acc-bar-i{display: block; height: 100%; background: var(--w-cta); border-radius: 999px;} html body .ccl-ciw-acc-chips{display: flex; flex-wrap: wrap; gap: 8px;} html body .ccl-ciw-acc-chip{display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1; background: var(--w-card); border: 1px dashed rgb(192, 204, 224); color: var(--w-quiet);} html body .ccl-ciw-acc-chip.is-completed{background: var(--w-ok-bg); border: 1px solid var(--w-ok-ln); color: var(--w-ok);} html body .ccl-ciw-acc-btn,html body .ccl-acc-go{display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0px 36px; border: 1.5px solid var(--w-cta); border-radius: var(--w-r); background: var(--w-cta); color: var(--w-card); font-family: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer; text-decoration: none;} html body .ccl-ciw-acc-btn:hover,html body .ccl-acc-go:hover{background: var(--w-cta-dk); border-color: var(--w-cta-dk);} html body .ccl-ciw-acc-link,html body .ccl-acc-review{display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--w-cta); text-decoration: none;} html body .ccl-ciw-acc-link:hover,html body .ccl-acc-review:hover{color: var(--w-cta-dk); text-decoration: underline;} html body .ccl-ciw-acc-dev{display: flex; gap: 13px; align-items: flex-start; padding: 20px; border-radius: var(--w-r); background: var(--w-pale); border: 1px solid var(--w-hair);} html body .ccl-ciw-acc-dev-t{font-size: 15.5px; font-weight: 700; color: var(--w-ink2); line-height: 1.3;} html body .ccl-ciw-acc-dev-s{font-size: 14.5px; line-height: 1.5; color: var(--w-mut);} html body .ccl-ciw-acc-out,html body .ccl-acc-out{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0px 16px; border-radius: 10px; border: 1px solid var(--w-line); background: var(--w-card); font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--w-mut); cursor: pointer;} html body .ccl-ciw-est,html body .ccl-estcard{display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: var(--w-card); border: 1px solid var(--w-line); box-shadow: rgba(15, 23, 42, 0.05) 0px 1px 2px, rgba(15, 23, 42, 0.3) 0px 18px 44px -28px;} html body .ccl-ciw-est svg{flex-shrink: 0;} html body .ccl-ciw-est-doc{display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 0px 0px 15px; border-bottom: 1px solid var(--w-hair);} html body .ccl-ciw-est-doc-l{display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--w-quiet);} html body .ccl-ciw-est-doc-r{font-size: 14px; font-weight: 700; color: var(--w-ink2); white-space: nowrap;} html body .ccl-ciw-est-lab{margin: 20px 0px 0px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-cta);} html body .ccl-ciw-est-scale{display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; gap: 18px; margin-top: 14px;} html body .ccl-ciw-est-scale > div{display: flex; flex-direction: column; gap: 5px;} html body .ccl-ciw-est-scale > div:last-child{align-items: flex-end; text-align: right;} html body .ccl-ciw-est-fig{font-size: 28px; font-weight: 800; letter-spacing: -0.032em; color: var(--w-ink); line-height: 1.02;} html body .ccl-ciw-est-cap{display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w-quiet);} html body .ccl-ciw-est-rail{display: block; height: 8px; border-radius: 999px; background: var(--w-hair); overflow: hidden;} html body .ccl-ciw-est-rail-i{display: block; height: 100%; background: var(--w-cta); border-radius: 999px;} /* Hiding this left the two ends of the range reading as a bare dollar sign, which looks broken rather than not-yet-known. The board's treatment is the masked figure, so the digits show as dots until there is a number. */ html body .ccl-ciw-est-mask{ display:inline; letter-spacing:.06em; color:var(--w-quiet); } html body .ccl-ciw-est-p{margin: 16px 0px 0px; font-size: 15px; line-height: 1.6; color: var(--w-mut);} html body .ccl-ciw-est-prog{display: flex; flex-direction: column; gap: 9px; margin-top: 20px;} html body .ccl-ciw-est-prog-t{margin: 0px; display: block; font-size: 14.5px; line-height: 1.5; color: var(--w-mut);} html body .ccl-ciw-est-prog-n{font-weight: 700; color: var(--w-cta); white-space: nowrap;} html body .ccl-ciw-est-bar{height: 7px; border-radius: 999px; background: var(--w-hair); overflow: hidden;} html body .ccl-ciw-est-bar-i{display: block; height: 100%; background: var(--w-cta); border-radius: 999px;} html body .ccl-ciw-est-offer{margin-top: 24px; padding: 20px 22px; border-radius: 14px; background: var(--w-tint); border: 1px solid rgba(29, 99, 255, 0.22);} html body .ccl-ciw-est-offer-h{margin: 0px; font-size: 19px; font-weight: 800; letter-spacing: -0.022em; color: var(--w-ink);} html body .ccl-ciw-est-offer-p{margin: 9px 0px 0px; font-size: 15px; line-height: 1.6; color: var(--w-mut);} html body .ccl-ciw-est-cta{display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; margin-top: 16px; padding: 0px 32px; border-radius: var(--w-r); background: var(--w-cta); border: 1.5px solid var(--w-cta); color: var(--w-card); font-size: 16.5px; font-weight: 700; text-decoration: none;} html body .ccl-ciw-est-cta:hover{background: var(--w-cta-dk); border-color: var(--w-cta-dk); color: var(--w-card);} html body .ccl-ciw-est-assure{list-style: none; margin: 20px 0px 0px; padding: 16px 0px 0px; border-top: 1px solid var(--w-hair); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--w-quiet);} html body .ccl-ciw-est-assure li{display: inline-flex; align-items: center; gap: 7px;} html body .ccl-ciw-est-rail-i,html body .ccl-ciw-est-rail{} html body .ccl-ciw-review,html body .ccl-review{display: flex; flex-direction: column; gap: 28px;} html body .ccl-ciw-rail-inner,html body .ccl-ciw-assure,html body .ccl-ciw-stepper,html body .ccl-stepdot{display: none;} html body .ccl-ciw-rev-head{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px;} html body .ccl-ciw-rev-head > :first-child{margin: 0px; font-size: 22px; font-weight: 800; letter-spacing: -0.022em; color: var(--w-ink);} html body .ccl-ciw-rev-edit{font-size: 14.5px; font-weight: 700; color: var(--w-cta); text-decoration: none; cursor: pointer; background: none; border: 0px; padding: 0px;} html body .ccl-ciw-rev-edit:hover{text-decoration: underline;} html body .ccl-ciw-rev-row{display: grid; grid-template-columns: minmax(0px, 200px) minmax(0px, 1fr); gap: 20px; align-items: baseline; padding: 12px 0px; border-top: 1px solid var(--w-hair);} html body .ccl-ciw-rev-k{font-size: 14px; color: var(--w-quiet);} html body .ccl-ciw-rev-v{font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--w-ink2);} html body .ccl-ciw-rev-claim{font-size: 14.5px; color: var(--w-mut);} html body .ccl-ciw-rev-claim strong{color: var(--w-ink2); font-weight: 600;} html body .ccl-ciw-ty{display: flex; flex-direction: column;} html body .ccl-ciw-ty h1,html body .ccl-ciw-ty h2{margin: 0px; font-size: 48px; font-weight: 800; line-height: 1.08; letter-spacing: -0.032em; color: var(--w-ink);} html body .ccl-ty-name{color: var(--w-ink); font-weight: 700;} html body .ccl-ciw-welcome{display: flex; flex-direction: column; gap: 22px;} @media (max-width: 760px){ :root{--w-gut: 20px;} html body .ccl-ciw-topbar{height: 64px;} html body .ccl-ciw-logo{height: 30px;} html body .ccl-ciw-phone{height: 40px; padding: 0px 14px; font-size: 13.5px;} html body .ccl-ciw-main{padding-top: 10px; padding-bottom: 28px;} html body .ccl-ciw{padding: 24px 0px 28px;} html body .ccl-ciw-field > label,html body .ccl-ciw-step.mq-chips .ccl-ciw-step-title{font-size: 30px; letter-spacing: -0.032em;} html body .ccl-ciw-gate-title{font-size: 32px; letter-spacing: -0.032em;} html body .ccl-ciw-acc-title{font-size: 28px; letter-spacing: -0.03em;} html body .ccl-ciw-step.mq-chips .ccl-ciw-step-lede{font-size: 16px;} html body .ccl-ciw-chip,html body .ccl-ciw-opt-row{min-height: 52px; padding: 10px 14px; gap: 13px;} html body .ccl-ciw-req{font-size: 19px;} html body .ccl-ciw-ty h1,html body .ccl-ciw-ty h2{font-size: 26px;} html body .ccl-ciw-help{font-size: 14.5px;} html body .ccl-ciw-step.mq-chips .ccl-ciw-step-lede,html body .ccl-ciw-gate-sub,html body .ccl-ciw-acc-sub{font-size: 16px;} html body .ccl-ciw-field input,html body .ccl-ciw-field select,html body .ccl-ciw-field textarea{min-height: 58px; font-size: 17px; padding: 15px 16px;} html body .ccl-ciw-chip{min-height: 52px; padding: 10px 14px; gap: 13px;} html body .ccl-ciw-chip-t{font-size: 16.5px;} html body .ccl-ciw-chip-d{font-size: 13.5px;} html body .ccl-ciw-nav{flex-direction: column; align-items: stretch; margin-top: 28px;} html body .ccl-ciw-btn{width: 100%; min-height: 56px;} html body .ccl-ciw-est{padding: 20px;} html body .ccl-ciw-est-scale{grid-template-columns: 1fr; gap: 14px;} html body .ccl-ciw-est-scale > div:last-child{align-items: flex-start; text-align: left;} html body .ccl-ciw-est-fig{font-size: 25px;} html body .ccl-ciw-rev-row{grid-template-columns: 1fr; gap: 3px;} html body .ccl-ciw-gate-input,html body .ccl-code{max-width: none; height: 66px; font-size: 26px;} } @media (prefers-reduced-motion: reduce){ html body *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;} } html body .ccl-ciw-mq-off,html body .ccl-ciw-field.ccl-ciw-mq-off,html body .ccl-ciw-chips.ccl-ciw-mq-off{display: none;} html body .ccl-ciw-opt{display: block; margin-top: 12px; font-size: 15.5px; font-weight: 500; letter-spacing: normal; line-height: 1.5; color: var(--w-quiet);} @media (max-width: 760px){ html body .ccl-ciw-opt{font-size: 14.5px; margin-top: 10px;} } /* --- answers as rows, the way the design draws them ------------------ */ /* The select that a row group replaced stays in the DOM holding the value and carrying the accessible name, clipped to a pixel at the field's top-left - which is exactly where the first answer row is. On a phone that pixel was catching the tap and iOS was opening its picker over the answers. Pointer events go to the rows; keyboard focus and screen readers still reach it. */ html body .ccl-ciw-sel-clipped{ position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0; pointer-events:none; } html body .ccl-ciw-opts{ display:flex; flex-direction:column; gap:10px; counter-reset:ccl-o; } html body .ccl-ciw-opt-row{ display:flex; align-items:center; gap:15px; width:100%; min-height:58px; padding:12px 18px; border:1.5px solid var(--w-line); border-radius:var(--w-r); background:var(--w-card); box-shadow:0 1px 2px rgba(15,23,42,.04); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .13s ease, background .13s ease, box-shadow .13s ease; } html body .ccl-ciw-opt-row::before{ counter-increment:ccl-o; content:counter(ccl-o, upper-alpha); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1.5px solid var(--w-line); background:var(--w-card); color:var(--w-quiet); font-size:14px; font-weight:700; } html body .ccl-ciw-opt-row:hover{ border-color:#B9C9E6; } html body .ccl-ciw-opt-row.is-selected{ border-color:var(--w-cta); background:var(--w-tint); box-shadow:0 0 0 4px rgba(11,92,255,.12); } html body .ccl-ciw-opt-row.is-selected::before{ background:var(--w-cta); border-color:var(--w-cta); color:var(--w-card); } html body .ccl-ciw-opt-t{ flex-grow:1; font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-.018em; color:var(--w-ink); } html body .ccl-ciw-opt-check{ flex-shrink:0; width:24px; height:24px; border-radius:999px; border:1.5px solid #C3CEE2; background:var(--w-card); } html body .ccl-ciw-opt-row.is-selected .ccl-ciw-opt-check{ border-color:var(--w-cta); background-color:var(--w-cta); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9.5-10.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:15px; } @media (max-width:760px){ html body .ccl-ciw-opt-row{ min-height:52px; padding:10px 14px; gap:13px; } html body .ccl-ciw-opt-t{ font-size:16.5px; } } /* --- screen 1: the welcome ------------------------------------------- */ html body .ccl-ciw-intro{ display:flex; flex-direction:column; gap:0; } html body .ccl-ciw-intro-eyebrow{ margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--w-cta); } html body .ccl-ciw-intro-title{ margin:0; font-size:58px; font-weight:800; line-height:1.02; letter-spacing:-.04em; color:var(--w-ink); } html body .ccl-ciw-intro-lede{ margin:20px 0 0; font-size:19px; line-height:1.55; color:var(--w-mut); max-width:52ch; } html body .ccl-ciw-intro-list{ list-style:none; margin:34px 0 0; padding:0; } html body .ccl-ciw-intro-list li{ display:flex; gap:15px; align-items:flex-start; padding:17px 0; border-top:1px solid var(--w-hair); } html body .ccl-ciw-intro-list li:last-child{ border-bottom:1px solid var(--w-hair); } html body .ccl-ciw-intro-ico{ flex-shrink:0; display:inline-flex; margin-top:2px; color:var(--w-cta); } html body .ccl-ciw-intro-ico svg{ width:20px; height:20px; } html body .ccl-ciw-intro-txt{ display:flex; flex-direction:column; gap:4px; } html body .ccl-ciw-intro-txt b{ font-size:16.5px; font-weight:700; line-height:1.3; color:var(--w-ink2); } html body .ccl-ciw-intro-txt i{ font-style:normal; font-size:15px; line-height:1.5; color:var(--w-quiet); } html body .ccl-ciw-intro-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px; } html body .ccl-ciw-intro-alt{ margin:20px 0 0; font-size:14.5px; line-height:1.5; color:var(--w-quiet); } @media (max-width:760px){ html body .ccl-ciw-intro-title{ font-size:34px; letter-spacing:-.032em; } html body .ccl-ciw-intro-lede{ font-size:16.5px; margin-top:16px; } html body .ccl-ciw-intro-list{ margin-top:26px; } html body .ccl-ciw-intro-actions{ flex-direction:column; align-items:stretch; gap:12px; margin-top:26px; } html body .ccl-ciw-intro-actions .ccl-ciw-btn{ width:100%; } html body .ccl-ciw-hint{ text-align:center; } } html body .ccl-ciw-intro-actions .ccl-ciw-btn{ order:1; } html body .ccl-ciw-intro-actions .ccl-ciw-hint{ order:2; } /* --- access code: the reveal toggle and the resend row --------------- */ html body .ccl-ciw-code-wrap{ display:flex; gap:12px; align-items:center; flex-wrap:nowrap; } html body .ccl-ciw-eye,html body .ccl-eye{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:56px; height:72px; border:1.5px solid var(--w-line); border-radius:var(--w-r); background:var(--w-card); color:var(--w-quiet); cursor:pointer; padding:0; } html body .ccl-ciw-eye:hover,html body .ccl-eye:hover{ border-color:#B9C9E6; color:var(--w-cta); } html body .ccl-ciw-eye:focus-visible,html body .ccl-eye:focus-visible{ outline:none; border-color:var(--w-cta); box-shadow:0 0 0 4px rgba(11,92,255,.15); } html body .ccl-ciw-eye svg,html body .ccl-eye svg{ width:21px; height:21px; } html body .ccl-ciw-gate-btn,html body .ccl-code-submit{ align-self:flex-start; } html body .ccl-ciw-gate-resend,html body .ccl-code-resend{ align-items:flex-start; } html body .ccl-ciw-gate-resend .ccl-ciw-btn,html body .ccl-code-resend .ccl-ciw-btn{ align-self:flex-start; } @media (max-width:760px){ html body .ccl-ciw-eye,html body .ccl-eye{ width:52px; height:66px; } html body .ccl-ciw-gate-btn,html body .ccl-code-submit{ align-self:stretch; width:100%; } html body .ccl-ciw-gate-resend .ccl-ciw-btn,html body .ccl-code-resend .ccl-ciw-btn{ align-self:stretch; width:100%; } } /* --- the question counter ------------------------------------------- */ html body .ccl-ciw-eyebrow{ display:flex; align-items:center; gap:9px; } html body .ccl-ciw-eyebrow b.ccl-ciw-qn{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--w-cta); } html body .ccl-ciw-qa{ display:inline-flex; align-items:center; color:var(--w-cta); } html body .ccl-ciw-qa svg{ width:15px; height:15px; } html body .ccl-ciw-qt{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--w-quiet); } @media (max-width:760px){ html body .ccl-ciw-qt{ font-size:11.5px; letter-spacing:.12em; } } /* --- claim types with no calculator --------------------------------- */ html body .ccl-ciw-nocalc{ margin-top:24px; padding:20px 22px; border-radius:14px; background:var(--w-pale); border:1px solid var(--w-hair); } html body .ccl-ciw-nocalc-h{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.022em; color:var(--w-ink); } html body .ccl-ciw-nocalc-p{ margin:9px 0 0; font-size:15px; line-height:1.6; color:var(--w-mut); } /* ========================================================================== Light and dark. The page follows the device's setting until the visitor presses the round button in the header; that choice is kept on this device, and "Match my device" in the footer hands it back. A script at the top of sets data-ccl-theme on before anything paints, so every rule below keys off that one attribute. Light is the sheet above, untouched. ========================================================================== */ html body .ccl-ciw-topbar-r{ display:flex; align-items:center; gap:10px; } html body .ccl-ciw-mode{ display:none; flex-shrink:0; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:999px; background:var(--w-card); border:1px solid var(--w-line); color:var(--w-slate); cursor:pointer; } html[data-ccl-theme] body .ccl-ciw-mode{ display:inline-flex; } html body .ccl-ciw-mode:hover{ border-color:#B9C9E6; } html body .ccl-ciw-mode:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(11,92,255,.28); } html body .ccl-ciw-mode svg{ width:18px; height:18px; } html body .ccl-ciw-mode .ccl-ciw-mode-sun{ display:none; } html[data-ccl-theme="dark"] body .ccl-ciw-mode .ccl-ciw-mode-sun{ display:block; } html[data-ccl-theme="dark"] body .ccl-ciw-mode .ccl-ciw-mode-moon{ display:none; } html body .ccl-ciw-footnote .ccl-ciw-modeline{ margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--w-quiet); } html body .ccl-ciw-footnote .ccl-ciw-modeline[hidden]{ display:none; } html body .ccl-ciw-modeline-btn{ padding:0; margin:0; border:0; background:none; font:inherit; font-weight:700; color:var(--w-cta); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } @media (max-width:760px){ html body .ccl-ciw-topbar-r{ gap:8px; } html body .ccl-ciw-mode{ width:40px; height:40px; } } html[data-ccl-theme="dark"]{ color-scheme:dark; background-color:#050D1A; --w-ink:#F4F7FC; --w-ink2:#E6ECF5; --w-mut:#AAB8CC; --w-quiet:#8A9AB2; --w-slate:#E6ECF5; --w-blue:#7FA8FF; --w-cta:#0B5CFF; --w-cta-dk:#2F6BFF; --w-tint:#132A52; --w-pale:#050D1A; --w-line:#2B3A52; --w-hair:#1A2740; --w-card:#0F1E36; --w-ok:#6FD9A5; --w-ok-bg:#0D2A1F; --w-ok-ln:#1F5B42; --w-err:#FF9A90; --w-err-bg:#2B1316; --w-err-ln:#5C2B2B; } html[data-ccl-theme="dark"] body.ccl-ciw-standalone{ background:linear-gradient(180deg,#0A1628 0%,#050D1A 100%); background-attachment:fixed; background-color:#050D1A; } /* --w-card is the white of the light sheet, and it is also the text colour on every blue button. In the dark it turns navy, so the button text is set here. */ html[data-ccl-theme="dark"] body .ccl-ciw-next, html[data-ccl-theme="dark"] body .ccl-ciw-submit, html[data-ccl-theme="dark"] body .ccl-ciw-next:hover, html[data-ccl-theme="dark"] body .ccl-ciw-submit:hover, html[data-ccl-theme="dark"] body .ccl-ciw-gate-btn, html[data-ccl-theme="dark"] body .ccl-code-submit, html[data-ccl-theme="dark"] body .ccl-ciw-acc-btn, html[data-ccl-theme="dark"] body .ccl-acc-go, html[data-ccl-theme="dark"] body .ccl-ciw-est-cta, html[data-ccl-theme="dark"] body .ccl-ciw-est-cta:hover, html[data-ccl-theme="dark"] body .ccl-ciw-chip.is-selected::before, html[data-ccl-theme="dark"] body .ccl-ciw-chip[aria-pressed="true"]::before, html[data-ccl-theme="dark"] body .ccl-ciw-opt-row.is-selected::before{ color:#FFFFFF; } /* Blue used as text. The button blue is too dark to read as small type on navy. */ html[data-ccl-theme="dark"] body .ccl-ciw-eyebrow, html[data-ccl-theme="dark"] body .ccl-ciw-eyebrow b, html[data-ccl-theme="dark"] body .ccl-ciw-eyebrow b.ccl-ciw-qn, html[data-ccl-theme="dark"] body .ccl-ciw-rail-node, html[data-ccl-theme="dark"] body .ccl-ciw-ty-ico, html[data-ccl-theme="dark"] body .ccl-ciw-ty-call a, html[data-ccl-theme="dark"] body .ccl-ciw-req, html[data-ccl-theme="dark"] body .ccl-ciw-gate-ico, html[data-ccl-theme="dark"] body .ccl-ciw-gate-fine a, html[data-ccl-theme="dark"] body .ccl-ciw-acc-link, html[data-ccl-theme="dark"] body .ccl-acc-review, html[data-ccl-theme="dark"] body .ccl-ciw-est-lab, html[data-ccl-theme="dark"] body .ccl-ciw-est-prog-n, html[data-ccl-theme="dark"] body .ccl-ciw-rev-edit, html[data-ccl-theme="dark"] body .ccl-ciw-intro-eyebrow, html[data-ccl-theme="dark"] body .ccl-ciw-intro-ico, html[data-ccl-theme="dark"] body .ccl-ciw-eye:hover, html[data-ccl-theme="dark"] body .ccl-eye:hover, html[data-ccl-theme="dark"] body .ccl-ciw-qa, html[data-ccl-theme="dark"] body .ccl-ciw-modeline-btn{ color:#7FA8FF; } /* The fixed light values in the sheet above, each given its dark equivalent. */ html[data-ccl-theme="dark"] body .ccl-ciw-phone:hover{ background:#1B3767; color:#FFFFFF; } html[data-ccl-theme="dark"] body .ccl-ciw-field input::placeholder, html[data-ccl-theme="dark"] body .ccl-ciw-field textarea::placeholder{ color:#7D8FA9; } html[data-ccl-theme="dark"] body .ccl-ciw-field input:hover, html[data-ccl-theme="dark"] body .ccl-ciw-field select:hover, html[data-ccl-theme="dark"] body .ccl-ciw-field textarea:hover, html[data-ccl-theme="dark"] body .ccl-ciw-chip:hover, html[data-ccl-theme="dark"] body .ccl-ciw-btn:hover, html[data-ccl-theme="dark"] body .ccl-ciw-opt-row:hover, html[data-ccl-theme="dark"] body .ccl-ciw-eye:hover, html[data-ccl-theme="dark"] body .ccl-eye:hover, html[data-ccl-theme="dark"] body .ccl-ciw-mode:hover{ border-color:#3E5170; } html[data-ccl-theme="dark"] body .ccl-ciw-field input:focus, html[data-ccl-theme="dark"] body .ccl-ciw-field select:focus, html[data-ccl-theme="dark"] body .ccl-ciw-field textarea:focus, html[data-ccl-theme="dark"] body .ccl-ciw-chip:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-gate-input:focus, html[data-ccl-theme="dark"] body .ccl-code:focus, html[data-ccl-theme="dark"] body .ccl-ciw-eye:focus-visible, html[data-ccl-theme="dark"] body .ccl-eye:focus-visible{ box-shadow:0 0 0 4px rgba(77,134,255,.35); } html[data-ccl-theme="dark"] body .ccl-ciw-btn:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-mode:focus-visible{ box-shadow:0 0 0 4px rgba(77,134,255,.45); } html[data-ccl-theme="dark"] body .ccl-ciw-chip.is-selected, html[data-ccl-theme="dark"] body .ccl-ciw-chip[aria-pressed="true"], html[data-ccl-theme="dark"] body .ccl-ciw-opt-row.is-selected{ box-shadow:0 0 0 4px rgba(77,134,255,.22); } html[data-ccl-theme="dark"] body .ccl-ciw-next[disabled], html[data-ccl-theme="dark"] body .ccl-ciw-submit[disabled]{ background:#22365C; border-color:#22365C; color:#AAB8CC; } html[data-ccl-theme="dark"] body .ccl-ciw-chip-check, html[data-ccl-theme="dark"] body .ccl-ciw-opt-check{ border-color:#4A5B78; } html[data-ccl-theme="dark"] body .ccl-ciw-acc-bar{ background:#1F2E48; } html[data-ccl-theme="dark"] body .ccl-ciw-acc-chip{ border-color:#4A5B78; } html[data-ccl-theme="dark"] body .ccl-ciw-disc, html[data-ccl-theme="dark"] body .ccl-ciw-disc-meta{ color:#8A9AB2; } html[data-ccl-theme="dark"] body .ccl-ciw-est, html[data-ccl-theme="dark"] body .ccl-estcard{ box-shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 44px -28px rgba(0,0,0,.9); } /* ---- Audit 24 Sept 2026 ------------------------------------------------------ H12: a 2px solid ring (3:1 or better) replaces the 28% halo (1.5:1) on the buttons and the light/dark switch, and the answer rows show the ring while their clipped select has keyboard focus - until now the rows gave no sign of where focus was. M21: the clipped select took the field's width:100% and pushed every page 20-250px wider than the screen; it is held to 1px inside a positioned field. */ html body .ccl-ciw-btn:focus-visible, html body .ccl-ciw-mode:focus-visible{ outline:2px solid #0B5CFF; outline-offset:2px; box-shadow:none; } html body .ccl-ciw-field{ position:relative; } html body .ccl-ciw-field .ccl-ciw-sel-clipped{ width:1px !important; height:1px !important; min-width:0 !important; max-width:1px !important; left:0; top:0; } /* Audit 29 Sept (R32): its padding (18px 52px) and min-height (62px) still made it 72x62 under border-box sizing; take them off so it really is one pixel. */ html body .ccl-ciw-field .ccl-ciw-sel-clipped{ padding:0 !important; min-height:0 !important; border:0 !important; } html body .ccl-ciw-field:has(.ccl-ciw-sel-clipped:focus-visible) .ccl-ciw-opts{ outline:2px solid #0B5CFF; outline-offset:4px; border-radius:14px; } html[data-ccl-theme="dark"] body .ccl-ciw-btn:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-mode:focus-visible{ outline-color:#7FA8FF; box-shadow:none; } html[data-ccl-theme="dark"] body .ccl-ciw-field:has(.ccl-ciw-sel-clipped:focus-visible) .ccl-ciw-opts{ outline-color:#7FA8FF; } /* ---- end audit 24 Sept ---- */ /* Audit 24 Sept 2026 (M22): the legal notice and the footer line were #94A1B5 on white (2.6:1) at 11.5px. */ html:not([data-ccl-theme="dark"]) body .ccl-ciw-disc, html:not([data-ccl-theme="dark"]) body .ccl-ciw-disc-meta{ color:#475569; } html body .ccl-ciw-disc, html body .ccl-ciw-disc-meta{ font-size:12px; } /* Audit 29 Sept 2026 (R23): the claim-type chips, the text and date fields, the code box and the show-code eye get the same 2px ring as the buttons, so a focused chip no longer looks the same as a selected one (the old 15% halo measured 1.25:1). */ html body .ccl-ciw-chip:focus-visible, html body .ccl-ciw-field input:focus-visible, html body .ccl-ciw-field select:not(.ccl-ciw-sel-clipped):focus-visible, html body .ccl-ciw-field textarea:focus-visible, html body .ccl-ciw-gate-input:focus-visible, html body .ccl-code:focus-visible, html body .ccl-ciw-eye:focus-visible, html body .ccl-eye:focus-visible{ outline:2px solid #0B5CFF; outline-offset:2px; } html[data-ccl-theme="dark"] body .ccl-ciw-chip:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-field input:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-field select:not(.ccl-ciw-sel-clipped):focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-field textarea:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-gate-input:focus-visible, html[data-ccl-theme="dark"] body .ccl-code:focus-visible, html[data-ccl-theme="dark"] body .ccl-ciw-eye:focus-visible, html[data-ccl-theme="dark"] body .ccl-eye:focus-visible{ outline-color:#7FA8FF; } /* Audit 29 Sept 2026 (R2): the collection notice and consent box, on the first screen or above the questions until the enquirer agrees; and the privacy line on the review. */ html body .ccl-ciw-consent{ margin:18px 0 8px; padding:16px 18px; background:var(--w-card,#fff); border:1px solid var(--w-line,#d8dde5); border-radius:var(--w-r,14px); text-align:left; } html body .ccl-ciw-consent-h{ margin:0 0 6px; font-size:15px; font-weight:700; color:var(--w-ink,#14213d); } html body .ccl-ciw-consent-p{ margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--w-ink2,#34405a); } html body .ccl-ciw-consent-a{ font-size:14px; font-weight:600; color:var(--w-blue,#0b5cff); text-decoration:underline; } html body .ccl-ciw-consent-row{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--w-ink,#14213d); cursor:pointer; } html body .ccl-ciw-consent-row input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--w-cta,#0b5cff); } html body .ccl-ciw-consent-err{ margin:10px 0 0; font-size:14px; font-weight:600; color:var(--w-err,#b42318); } html body .ccl-ciw-consent-review{ margin:14px 0 0; font-size:13px; line-height:1.55; color:var(--w-ink2,#34405a); } html body .ccl-ciw-consent-review a{ color:var(--w-blue,#0b5cff); font-weight:600; }