/* ==== keyline.css · layer 1 of 4 ==== */ /* ========================================================================== home-hero-keyline · an earlier layer of this file — LIVE homepage hero (from hero-f6-04, 2026-09-25). ---- original header ---- hero-f6 · an earlier layer of this file The hero's words and form, the category words/icons/sub-lines, and the two content components (the client card, the All Work door) are drawn once here, so a difference between two solutions is the COMPOSITION: surfaces, widths, the join between the chosen category and its work, the ending. Everything is scoped to #hx; the live .screen stays in the page, hidden, so the live scripts still find what they expect. ========================================================================== */ html body .screen { display: none !important; } #hx { --ink: #0E1E35; --ink2: #33425A; --mute: #5A6678; --brand: #0760C6; --brand2: #4989E2; --deep: #0A4FA8; --r1: #AEC9EF; --r2: #C6D9F4; --r3: #DDE9F9; --r4: #EEF4FC; --r5: #F6F9FE; --line: #D3E0F1; --line2: #E4ECF7; --lane: var(--grid-edge, 18px); /* the header's own left/right edge */ /* the headline: never smaller than the live formula, larger where the width allows, one line from 761px */ --h1: min(76px, max(2.88vw + 15.4px, 4.5cqw)); --ink-k: 17.35; /* headline ink width ÷ font-size, measured */ --m: calc(var(--h1) * var(--ink-k)); /* the headline's own ink width */ --railh: 164px; --gap: 12px; --cw: 236px; --rows: 2; position: relative; display: block; background: #fff; color: var(--ink); container-type: inline-size; container-name: hx; font-family: -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; } #hx :where(:not(.gah, .gah *)), #hx :where(:not(.gah, .gah *))::before, #hx :where(:not(.gah, .gah *))::after { box-sizing: border-box; } /* resets stop at the Google Ads panel (.gah), which brings its own styles */ #hx :is(p, h1, h2, form):where(:not(.gah *)) { margin: 0; padding: 0; } #hx a:where(:not(.gah *)) { color: inherit; text-decoration: none; } #hx button:where(:not(.gah *)) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #hx .hx-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #hx svg:where(:not(.gah *)) { display: block; } #hx .hx-hero [hidden] { display: none !important; } /* ---- the hero message ---------------------------------------------------- */ #hx .hx-hero { display: flex; flex-direction: column; align-items: center; text-align: center; } #hx .hx-label, #hx .hx-micro, #hx .hx-h1 { max-width: none; } #hx .hx-label { font-size: 15px; font-weight: 600; color: #1F2A3A; letter-spacing: .005em; line-height: 1.3; } #hx .hx-h1 { margin-top: calc(var(--h1) * .26); font-size: var(--h1); font-weight: 800; line-height: 1.04; letter-spacing: -.034em; color: var(--ink); white-space: nowrap; } /* engine.js centres the letters; the full stop hangs */ #hx .hx-h1 em { font-style: normal; color: var(--brand); background: linear-gradient(90deg, #0760C6, #4989E2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #hx .hx-h1 em i { font-style: normal; } /* the audit field: one object — prefix, input, action — with one height */ #hx .hx-form { --fh: 64px; margin-top: calc(var(--h1) * .56); width: var(--fw, min(820px, 100%)); display: flex; align-items: stretch; height: var(--fh); padding: 6px; border: 1.5px solid var(--brand); border-radius: 12px; background: #fff; position: relative; } #hx .hx-fix { display: flex; align-items: center; padding: 0 16px; border-radius: 7px; background: var(--r4); font: 500 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #3B4A60; white-space: nowrap; } #hx .hx-form input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 16px; font-family: inherit; font-size: 18px; font-weight: 400; color: var(--ink); height: auto; } #hx .hx-form input::placeholder { color: #8391A5; } #hx .hx-form:focus-within { box-shadow: none; } /* 2026-10-05: the only caret is the browser's own, and only once the field is clicked or tapped. The drawn carets (.hx-caret here, .hx-fix::after in an earlier layer of this file and assets/home/hero/desktop.css) blinked before anyone touched the field, sat a few pixels off the real one, and hid it while the field was empty. */ #hx .hx-form button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 30px; border-radius: 7px; background: var(--brand); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap; transition: background-color .3s ease; } #hx .hx-form button:hover { background: #0550A8; } #hx .hx-form button .hx-arw { width: 17px; height: 17px; } #hx .hx-micro { margin-top: 18px; font-size: 15px; color: #4F5B6C; line-height: 1.4; } #hx .hx-micro b { color: var(--ink); font-weight: 700; } #hx .hx-micro i { font-style: normal; color: #9AA6B6; margin: 0 .6em; } #hx .hx-sent { margin-top: 10px; font-size: 14px; color: #0B6B3A; font-weight: 600; } /* ---- the eight categories: words only; each solution builds the object --- */ #hx .hx-tab { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; } #hx .hx-ti { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; } #hx .hx-ti svg { width: 19px; height: 19px; } #hx .hx-tt { display: flex; flex-direction: column; min-width: 0; } #hx .hx-tt b { font-size: 14.5px; font-weight: 700; line-height: 1.22; color: var(--ink); white-space: nowrap; letter-spacing: -.005em; transition: color .3s ease; } #hx .hx-tt small { font-size: 12px; line-height: 1.3; color: var(--mute); white-space: nowrap; margin-top: 1px; } #hx .hx-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* ---- the ONE panel -------------------------------------------------------- */ #hx .hx-panel { position: relative; min-width: 0; } #hx .hx-cap { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 3; pointer-events: none; } #hx .hx-cap-t { display: none; } #hx .hx-nav { width: 100%; display: flex; justify-content: space-between; } #hx .hx-nav button { pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; transform: translate(-8px, -50%); border: 1px solid #C4D6EE; background: #fff; color: var(--brand); transition: opacity .35s ease; } #hx .hx-nav button + button { transform: translate(8px, -50%); } #hx .hx-nav button svg { width: 16px; height: 16px; } #hx .hx-panel:not(.has-more) .hx-nav button, #hx .hx-nav button:disabled { opacity: 0; pointer-events: none; } #hx .hx-rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; height: var(--railh); container-type: inline-size; } #hx .hx-rail::-webkit-scrollbar { display: none; } #hx .hx-track { display: grid; grid-auto-flow: column; gap: var(--gap); height: 100%; width: max-content; min-width: 100%; } #hx .hx-track > * { scroll-snap-align: start; } #hx .hx-track.is-cards { grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); grid-auto-columns: max(var(--cw), calc((100cqw - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1))); /* few items fill the width: never a hole */ } #hx .hx-track.is-doors { grid-template-rows: minmax(0, 1fr); grid-auto-columns: var(--dw, calc((100cqw - 6 * var(--gap)) / 7)); } /* the client card — the live card's content, a filled plate */ #hx .hx-card { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-width: 0; background: var(--card, #fff); border: 1px solid var(--card-line, transparent); border-radius: 10px; transition: border-color .3s ease, background-color .3s ease; } #hx .hx-card:hover { border-color: var(--card-hl, #A9C5EA); } #hx .hx-ini { flex: 0 0 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; } #hx .hx-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; } #hx .hx-tx b { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hx .hx-tx small { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } #hx .hx-tx em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--deep); margin-top: 2px; } #hx .hx-go { color: var(--brand); flex: 0 0 auto; } #hx .hx-go svg { width: 15px; height: 15px; } #hx .hx-card.is-dummy { background: transparent; border: 1px dashed #BFD2EC; } #hx .hx-card.is-dummy .hx-ini { background: var(--r3); } #hx .hx-card.is-dummy b { color: #647185; font-weight: 600; } #hx .hx-card.is-dummy small { color: #95A1B2; } /* the All Work door — the live picture, its badge and its link */ #hx .hx-door { display: flex; flex-direction: column; gap: 10px; min-width: 0; height: 100%; } #hx .hx-ph { position: relative; flex: 1 1 auto; min-height: 60px; border-radius: 10px; background: var(--r4) center/cover no-repeat; transition: filter .35s ease; } #hx .hx-door:hover .hx-ph { filter: saturate(1.08) brightness(1.03); } #hx .hx-badge { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 7px; background: #fff; display: grid; place-items: center; } #hx .hx-badge svg { width: 16px; height: 16px; } #hx .hx-dv { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #0A55B5; white-space: nowrap; line-height: 1.2; } #hx .hx-dv .hx-arw { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .35s ease; } #hx .hx-door:hover .hx-arw, #hx .hx-lead:hover .hx-arw { transform: translateX(3px); } /* the live All Work view's first cell (only where a solution asks for it) */ #hx .hx-lead { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 100%; padding: 14px 0 2px; } #hx .hx-lead-i svg { width: 30px; height: 30px; } /* motion: slow, never a blink */ #hx .hx-track { animation: hxIn .5s ease both; } /* 2026-10-08 · first paint: not on the first render — the hero is now built before the first frame, so the doors are simply there; the fade stays for coming back to All Work from another tab */ #hx .hx-panel:not([data-hx-moved]) .hx-track { animation: none; } @keyframes hxIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #hx .hx-track { animation: none; } #hx :where(:not(.gah *)) { transition: none !important; } } /* ---- tablet: the headline stays one line, the field narrows with it ------- */ @media (max-width: 1100px) { #hx .hx-form { --fh: 60px; } #hx .hx-form input { font-size: 17px; } #hx .hx-form button { font-size: 16px; padding: 0 24px; } } /* ---- phone ------------------------------------------------------------------ */ @media (max-width: 760px) { /* phone headline: exactly two lines ("Digital marketing that / brings customers.") across the text measure */ #hx { --h1: clamp(25px, calc((100cqw - var(--hpad, 36px)) / 10.25), 44px); --railh: 150px; --gap: 10px; } #hx .hx-label { font-size: 13.5px; } #hx .hx-h1 { white-space: normal; line-height: 1.08; letter-spacing: -.03em; max-width: none; transform: none; } #hx .hx-form { --fh: auto; width: 100%; height: auto; margin-top: 22px; flex-wrap: wrap; padding: 5px; row-gap: 5px; border-radius: 12px; } #hx .hx-fix { padding: 0 11px; font-size: 13px; } #hx .hx-form input { height: 50px; font-size: 16px; flex-basis: 0; padding: 0 11px; } #hx .hx-form button { flex: 1 0 100%; height: 52px; font-size: 16px; } #hx .hx-micro { margin-top: 14px; font-size: 13.5px; } #hx .hx-micro i { margin: 0 .42em; } #hx .hx-nav { display: none; } #hx .hx-track.is-doors { grid-auto-columns: var(--dwp, 49cqw); } #hx .hx-track.is-cards { grid-auto-columns: var(--cwp, 74cqw); } #hx .hx-tt b { font-size: 13px; } } @media (max-width: 350px) { #hx .hx-micro { font-size: 12.5px; } #hx .hx-fix { padding: 0 9px; font-size: 12px; } } /* a door narrower than its link: the link sets on two lines, and EVERY door reserves the same two lines, so the pictures' bottoms stay on one line */ @container (max-width: 1300px) { #hx .hx-door { gap: 8px; } #hx .hx-door .hx-dv { display: block; white-space: normal; height: 2.4em; font-size: 13px; line-height: 1.2; } #hx .hx-door .hx-dv .hx-arw { display: inline-block; vertical-align: -2px; margin-left: 5px; } } /* ==== keyline.css · layer 2 of 4 ==== */ /* home-hero-keyline · keyline.css — LIVE (hero-f6 [archived], 2026-09-25). Solution 04 · KEYLINE — the work enters the hero, on one line. The offer stands on a pale field that runs the full screen width and begins straight under the submenu. The work is ONE white card, exactly the page lane wide, which rises into that field. Its category row sits inside the field; its work sits below it, on the white page. ONE 1px line does all the structural work: it is the field's bottom edge outside the card and the line under the categories inside it — the same line, at the same height, from screen edge to screen edge. The chosen category is marked ON that line: a brand-blue segment exactly the category's width, the one thing on the line that is not grey. No second frame, no tray, no gap to explain. Proportion: field = screen; card = lane; the audit field = [archived]4 of the headline. */ #hx .s4 { --field: #EAF1FB; --edge: #C3D4EB; --th: 72px; --fw: min(calc(var(--m) * .78), 100%); --pad-t: clamp(32px, 8vh - 8px, 68px); --railh: clamp(132px, 19vh - 4px, 168px); } #hx .s4-field { background: var(--field); border-bottom: 1px solid var(--edge); padding: var(--pad-t) var(--lane) calc(var(--th) + clamp(34px, 6.4vh - 4px, 58px)); } #hx .s4-field .hx-fix { background: var(--field); } #hx .s4-card { position: relative; margin: calc(-1 * (var(--th) + 2px)) var(--lane) 0; background: #fff; border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; } #hx .s4-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: calc(var(--th) + 1px); border-bottom: 1px solid var(--edge); padding: 0 12px; } #hx .s4-tabs .hx-tab { position: relative; justify-content: flex-start; align-items: flex-start; padding: 17px 8px 0 16px; gap: 9px; transition: background-color .35s ease; } #hx .s4-tabs .hx-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); transform: scaleX(0); transition: transform .45s cubic-bezier(.3, .7, .2, 1); } #hx .s4-tabs .hx-tab[aria-selected="true"]::after { transform: scaleX(1); } #hx .s4-tabs .hx-tt small { white-space: normal; } #hx .s4-tabs .hx-tt b { color: #22324B; } #hx .s4-tabs .hx-tab:hover { background: #F7FAFE; } #hx .s4-tabs .hx-tab[aria-selected="true"] b { color: var(--brand); } #hx .s4-work { --card: #F1F5FC; padding: 24px 24px 26px; } #hx .s4 { padding-bottom: 28px; } @media (max-width: 1320px) { #hx .s4-tabs .hx-ti { display: none; } } @media (max-width: 1100px) { #hx .s4 { --th: 56px; } #hx .s4-tabs .hx-tt small { display: none; } #hx .s4-tabs .hx-tab { justify-content: center; align-items: center; padding: 0 6px; } #hx .s4-tabs .hx-tt { align-items: center; text-align: center; } #hx .s4-tabs .hx-tt b { white-space: normal; font-size: 13px; } } /* phone: the same card rising into the same field; its category row becomes two rows of four names, each with its own segment of the one line */ @media (max-width: 760px) { #hx.hx-04 { --hpad: 36px; } /* was `.f6-04 #hx` (the preview's body class) */ #hx .s4 { --th: 104px; --railh: 150px; --pad-t: 30px; padding-bottom: 20px; } #hx .s4-field { padding-bottom: calc(var(--th) + 26px); } #hx .s4-card { border-radius: 16px; } #hx .s4-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; padding: 0 4px; } #hx .s4-tabs .hx-tab { flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0 2px; } #hx .s4-tabs .hx-tab:nth-child(-n+4) { box-shadow: inset 0 -1px 0 var(--line2); } #hx .s4-tabs .hx-tab::after { left: 8px; right: 8px; } #hx .s4-tabs .hx-ti { display: grid; } #hx .s4-tabs .hx-ti svg { width: 18px; height: 18px; } #hx .s4-tabs .hx-tt b { font-size: 12px; line-height: 1.15; text-align: center; } #hx .s4-work { padding: 16px 0 16px 14px; } } /* ---- the Google Ads tab: the moved #gadsPanel in the Keyline card look ---- keyline.css gives it the old band's card (white, square, no edge). Here each client is the same filled plate as every other tab's card (--card, 10px, an edge only on hover). Ten ids: outranks keyline.css's nine. */ html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i { background: var(--card, #F1F5FC) !important; border: 1px solid transparent !important; border-radius: 10px !important; transition: border-color .3s ease, background-color .3s ease !important; } html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:hover { border-color: #A9C5EA !important; } html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel { background: #fff !important; border-color: var(--brand) !important; } html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .mp-m { width: 36px !important; height: 36px !important; border-radius: 7px !important; font-size: 12px !important; } /* ==== keyline.css · layer 3 of 4 ==== */ /* ========================================================================== [archived] — the Google Ads tab's panel (#gadsPanel → #q7, Success Stories + detail + Live Proof) inside the Horizon hero, 2026-09-25. Originally generated; edit this file directly. The panel's look on the old hero came from 115 rules that reached it only through the old band's wrappers (`html body .screen .tail.show .stage:has(#lane×8) .drawer > .gah …` in assets/home/all-work/all-work.css, assets/home/design.css, [archived]wk-*.css, assets/shared/client-proof/live-proof.css). engine.js moves the panel into #hx, where those chains no longer match, so every one of them is repeated here, in load order, with the wrapper prefix swapped for nine #hx ids (outranks the originals' eight). The variables are the values they computed to on the old band. One conditional rule is left out on purpose: `.drawer.wk-swap > .gah{opacity:0}` (the old band's tab-switch fade). The panel's own stylesheets ([archived]*.css) apply unchanged. ========================================================================== */ html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah{ --cw:initial; --bw-act:#0760C6; --bw-card:#FFFFFF; --bw-card-h:#F7FAFE; --bw-ch:60px; --bw-dot:#1F8FEA; --bw-focus:#003F8A; --bw-font:-apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif; --bw-gap:10px; --bw-ink:#0E1E35; --bw-ink-2:#24364F; --bw-ink-3:#505C6C; --bw-on:#004594; --bw-ring:#5E8FD3; --paper:#FFFFFF; --v5-edge-2:#DAE5F8; --v5-edge-h:#8795AE; --v5-hov:#F5F8FF; --v5-paper:#FFFFFF; --v5-r:3px; --v5-row-2:#FFFFFF; --v5-sel:#0D1526; --wk-edge:#DAE5F8; --wk-edge-hi:#8795AE; --wk-face:#FFFFFF; --wk-hover:0 0 0 0 rgba(11,13,18,0); --wk-r:3px; --wk-rest:0 0 0 0 rgba(11,13,18,0); } @media (max-width:900px){ html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah{--bw-ch:58px;--bw-gap:8px;} } html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .pw-cta .q7-story.pw-go{display: inline-block !important; min-height: 0px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah{transition: opacity 0.2s;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i{border-radius: var(--wk-r); background: var(--wk-face); border: 1px solid var(--wk-edge); box-shadow: var(--wk-rest); transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i:hover{border-color: var(--wk-edge-hi); box-shadow: var(--wk-hover);} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah a.mp-i:hover, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah button.mp-i:hover{transform: translateY(-2px);} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i{padding: 15px 14px;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .cc.d5 .mp-row{gap: 14px;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i.is-sel, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i.is-sel:hover, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i.is-sel:focus, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i.is-sel:focus-visible, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .card.is-sel, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .card.is-sel:hover, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .card.is-sel:focus, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .card.is-sel:focus-visible{background: var(--ac-bg, #EAF2FD); border-color: var(--ac-edge, #BAD5F8);} @media (min-width: 861px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .cc.dk.is-open .mp-panel::before{background: var(--paper, #fff); border-left-color: var(--ac-edge, #BAD5F8); border-top-color: var(--ac-edge, #BAD5F8);}} @media (max-width: 860px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .cc.rz6.is-open .mp-panel::before{background: var(--paper, #fff); border-left-color: var(--ac-edge, #BAD5F8); border-top-color: var(--ac-edge, #BAD5F8);}} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah #q7.cc .mp-i{background: var(--v5-row-2); border: 1px solid var(--v5-edge-2); border-radius: var(--v5-r); box-shadow: none;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah #q7.cc .mp-i:hover{background: var(--v5-hov); border-color: var(--v5-edge-h);} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah #q7.cc .mp-i.is-sel, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah #q7.cc .mp-i.is-sel:hover{background: var(--v5-paper); border-color: var(--v5-sel); box-shadow: inset 0 0 0 1px var(--v5-sel);} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .cc .mp-row{gap: 12px 10px !important;} @media (min-width: 761px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i{grid-template-columns: 36px minmax(0px, 1fr) !important; grid-template-rows: auto auto !important; gap: 6px 12px !important; align-items: center !important; padding: 13px 14px !important; min-height: 0px !important;}} @media (min-width: 761px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i .mp-m{grid-row: 1 / span 2 !important; width: 36px !important; height: 36px !important; border-radius: 9px !important; font-size: 12.5px !important;}} @media (min-width: 761px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i .mp-w{grid-column: 2 !important; min-width: 0px !important;}} @media (min-width: 761px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i .cc-cue{grid-area: 2 / 2 !important; justify-self: start !important;}} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i .cc-nm{font-size: 14px !important; font-weight: 750 !important; color: rgb(3, 29, 64) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i .mp-s{font-size: 12px !important; color: rgb(74, 99, 133) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i :is(.cc-cue, .cc-cue .cc-tx){color: rgb(0, 91, 191) !important; font-weight: 750 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[aria-expanded="true"]{border-color: rgb(122, 169, 237) !important; box-shadow: rgb(122, 169, 237) 0px 0px 0px 1.5px inset, rgba(0, 91, 191, 0.55) 0px 8px 20px -10px, rgba(2, 29, 67, 0.45) 0px 18px 36px -24px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#12161F"]{--k: #F29D38 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#12161F"] .mp-m{background: rgb(242, 157, 56) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#8E44AD"]{--k: #E0567A !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#8E44AD"] .mp-m{background: rgb(224, 86, 122) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#0F5C4A"]{--k: #16A34A !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#0F5C4A"] .mp-m{background: rgb(22, 163, 74) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#34495E"]{--k: #0891B2 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#34495E"] .mp-m{background: rgb(8, 145, 178) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#3730A3"]{--k: #2563EB !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#3730A3"] .mp-m{background: rgb(37, 99, 235) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#3B4A63"]{--k: #0D9488 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#3B4A63"] .mp-m{background: rgb(13, 148, 136) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#5F3DC4"]{--k: #F97316 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#5F3DC4"] .mp-m{background: rgb(249, 115, 22) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#A61E4D"]{--k: #DC2626 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-i[style*="#A61E4D"] .mp-m{background: rgb(220, 38, 38) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah{margin: 0px !important; padding: 0px !important; background: none !important; border: 0px !important; box-shadow: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah > section.cc{color: var(--bw-ink); display: block !important; width: auto !important; max-width: none !important; margin: 0px !important; padding: 0px !important; background: transparent !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; font-family: var(--bw-font) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah > section.cc::before, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah > section.cc::after{content: none !important; display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp{width: auto !important; max-width: none !important; margin: 0px !important; padding: 0px !important; background: transparent !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-head{display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-wrap{position: relative !important; overflow: visible !important; margin: 0px !important; padding: 0px !important; background: none !important; mask-image: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-wrap::before, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-wrap::after{content: none !important; display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .dk-btn{display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row{overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-template-rows: repeat(2, auto) !important; grid-auto-columns: var(--cw, 228px) !important; gap: var(--bw-gap) !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0px !important; padding: 0px !important; overflow: auto hidden !important; scroll-padding-inline: 0px !important; scrollbar-width: none !important; mask-image: none !important; background: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row::-webkit-scrollbar{display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > :is(.mp-i, .card){outline: 0px; scroll-snap-align: start; scroll-snap-stop: normal; transition: background-color 0.15s; position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; flex: 0 0 auto !important; width: auto !important; min-width: 0px !important; max-width: none !important; height: auto !important; min-height: var(--bw-ch) !important; margin: 0px !important; padding: 9px 8px 9px 9px !important; background-position-x: !important; background-position-y: !important; background-size: !important; background-repeat: !important; background-attachment: !important; background-origin: !important; background-clip: !important; background-color: !important; background-image: none !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; color: var(--bw-ink) !important; text-align: left !important; transform: none !important; opacity: 1 !important; font-family: var(--bw-font) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .card{cursor: default;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > :is(.mp-i, .card)::before{content: none !important; display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > :is(.mp-i, .card):not(.is-sel)::after{content: none !important; display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * :is(.mp-m, .chip, .bw-m){position: relative !important; flex: 0 0 auto !important; display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; margin: 0px !important; padding: 0px !important; background-position-x: !important; background-position-y: !important; background-size: !important; background-repeat: !important; background-attachment: !important; background-origin: !important; background-clip: !important; background-color: !important; background-image: none !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; color: rgb(255, 255, 255) !important; font-family: var(--bw-font) !important; font-size: 11px !important; line-height: normal !important; font-weight: 800 !important; letter-spacing: 0.02em !important; font-style: normal !important; text-transform: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * .mp-m .mp-v{display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * :is(.mp-w, .txt, .cap){flex: 1 1 auto !important; min-width: 0px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; margin: 0px !important; padding: 0px !important; background: none !important; border: 0px !important; position: static !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b){overflow-wrap: break-word; display: block !important; margin: 0px !important; padding: 0px !important; max-width: none !important; font-family: var(--bw-font) !important; font-size: 14px !important; line-height: 16.8px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--bw-ink) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * :is(.mp-w > .mp-s, .txt > i, .cap > i){overflow-wrap: break-word; display: block !important; margin: 3px 0px 0px !important; padding: 0px !important; font-family: var(--bw-font) !important; font-style: normal !important; font-size: 12px !important; line-height: 15px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: var(--bw-ink-3) !important; text-transform: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * .cap > i > b{overflow-wrap: break-word; display: block !important; margin: 2px 0px 0px !important; font-size: 12px !important; line-height: 15px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; color: var(--bw-on) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .bw-sep{position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * .win{display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .cc-cue{position: static !important; flex: 0 0 auto !important; display: grid !important; place-items: center !important; width: 14px !important; height: 24px !important; margin: 0px !important; padding: 0px !important; background: none !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; color: var(--bw-act) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .cc-tx{position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .cc-ar{stroke-linecap: round; stroke-linejoin: round; rotate: none; translate: none; transition: translate 0.15s, rotate 0.15s; display: block !important; width: 14px !important; height: 14px !important; margin: 0px !important; fill: none !important; stroke: currentcolor !important; stroke-width: 2 !important; transform: none !important; color: var(--bw-act) !important;} @media (hover: hover) and (pointer: fine){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:hover{background: var(--bw-card-h) !important; box-shadow: none !important; border: 0px !important; transform: none !important;}} @media (hover: hover) and (pointer: fine){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:hover:not(.is-sel) .cc-ar{translate: 2px;}} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel:hover, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i[aria-expanded="true"]{background: var(--bw-card) !important; box-shadow: inset 0 0 0 2px var(--bw-ring) !important; border: 0px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel .cc-nm{color: var(--bw-on) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel .cc-ar{rotate: 90deg; translate: none;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i.is-sel::after{content: "" !important; display: block !important; position: absolute !important; inset: 7px 7px auto auto !important; width: 7px !important; height: 7px !important; margin: 0px !important; border-radius: 50% !important; background: var(--bw-dot) !important; border: 0px !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; transition: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:focus-visible{outline: 2px solid var(--bw-focus) !important; outline-offset: 2px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i:active{transform: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-panel{position: relative !important; margin: 14px 0px 0px !important; padding: 0px !important; background: transparent !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-panel::before, html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-panel::after{content: none !important; display: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-in{padding: 0px !important; margin: 0px !important; background: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-card{margin: 0px !important; padding: 0px !important; background: var(--bw-card) !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; overflow: clip !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb{display: flex !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; margin: 0px !important; padding: 0px 22px !important; background: none !important; border: 0px !important; box-shadow: none !important; font-family: var(--bw-font) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--bw-ink-3) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb button{cursor: pointer; min-height: 44px !important; margin: 0px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: none !important; box-shadow: none !important; color: var(--bw-act) !important; font-family: var(--bw-font) !important; font-size: 14px !important; font-weight: 650 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb button:hover{text-underline-offset: 3px; text-decoration: underline !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb i{font-style: normal !important; color: rgb(157, 176, 201) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb b{color: var(--bw-ink) !important; font-weight: 700 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-body{display: grid !important; grid-template-columns: minmax(0px, 1fr) minmax(0px, 330px) !important; gap: 26px !important; align-items: start !important; margin: 0px !important; padding: 2px 22px 22px !important; background: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-who{display: flex !important; align-items: center !important; gap: 14px !important; margin: 0px 0px 16px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-wm{flex: 0 0 auto !important; display: grid !important; place-items: center !important; width: 46px !important; height: 46px !important; margin: 2px 0px 0px !important; border-radius: 0px !important; box-shadow: none !important; background: var(--k, #0E7C86) !important; color: rgb(255, 255, 255) !important; font-size: 15px !important; font-weight: 800 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-who h3{margin: 0px !important; font-family: var(--bw-font) !important; font-size: 22px !important; line-height: 26.4px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--bw-ink) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-meta{display: block !important; margin: 0px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-trade{display: block !important; font-size: 14px !important; line-height: 18.9px !important; font-weight: 400 !important; color: var(--bw-ink-3) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip{display: grid !important; grid-template-columns: 1.35fr 1fr 1fr !important; gap: 8px !important; margin: 0px !important; padding: 0px !important; background: none !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s{display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 1px 0px 0px !important; padding: 13px 16px 14px !important; background: rgb(243, 247, 252) !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; white-space: normal !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s{font-family: var(--bw-font) !important; font-size: 16px !important; line-height: 19.2px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: rgb(107, 119, 136) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s.is-now{background: rgb(227, 237, 250) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s em{display: block !important; margin: 0px !important; font-style: normal !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 13px !important; line-height: 15.6px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--bw-ink-3) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s b{display: block !important; margin: 7px 0px 0px !important; font-size: 26px !important; line-height: 28.6px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--bw-ink) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s.is-txt b{margin: 8px 0px 0px !important; font-size: 15.5px !important; line-height: 20.925px !important; font-weight: 700 !important; letter-spacing: normal !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s.is-now b{color: var(--bw-on) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s i{display: block !important; margin: 5px 0px 0px !important; font-style: normal !important; font-size: 13px !important; line-height: 15.6px !important; font-weight: 500 !important; letter-spacing: -0.16px !important; color: var(--bw-ink-3) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-foot{display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px 16px !important; margin: 16px 0px 0px !important; padding: 0px !important; border: 0px !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .q7-story{display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; color: var(--bw-act) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .q7-story:hover{text-underline-offset: 4px; text-decoration: underline !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-x{cursor: pointer; min-height: 42px !important; padding: 0px 18px !important; margin-left: auto !important; border: 0px !important; border-radius: 6px !important; box-shadow: none !important; background: rgb(238, 244, 252) !important; color: var(--bw-ink-2) !important; font-family: var(--bw-font) !important; font-size: 14.5px !important; font-weight: 650 !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-x:hover{background: rgb(221, 233, 249) !important; color: var(--bw-on) !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-side{margin: 0px !important; padding: 12px !important; background: rgb(243, 247, 252) !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important;} html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .q7-shot{margin: 0px !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important;} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > :is(.mp-i, .card){padding: 9px 10px 9px 9px !important; gap: 10px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b, .mp-w > .mp-s, .txt > i, .cap > i, .cap > i > b){white-space: normal !important; overflow: visible !important; text-overflow: clip !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .q7-nS{display: none !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i .q7-nF{display: inline !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-panel{margin-top: 10px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-crumb{padding: 0px 14px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-body{grid-template-columns: minmax(0px, 1fr) !important; gap: 14px !important; padding: 2px 14px 14px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-side{order: -1 !important; padding: 8px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-wm{width: 40px !important; height: 40px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-who h3{font-size: 19px !important; line-height: 22.8px !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip{grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s.is-txt{grid-column: 1 / -1 !important;}} @media (max-width: 900px){html body #hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-strip .mp-s:not(.is-txt) b{font-size: 22px !important; line-height: 24.2px !important;}} /* ==== keyline.css · layer 4 of 4 ==== */ /* ========================================================================== an earlier layer of this file — the live "Tray" (assets/home/hero/audit-tray.css) on the Keyline hero's form, 2026-09-25. Same drawer, same material, same numbers; every rule re-anchored from form#auditForm to #hx form#hxForm, and the field's pieces are the Horizon ones (.hx-fix is the "+91" plate). Dormant until the first submit adds .tr-open to the form. ========================================================================== */ #hx .hx-hero { position: relative; } /* the flying button is placed in here */ #hx form#hxForm.tr-open { flex-wrap: wrap; overflow: clip; } /* Keyline's field has one fixed height (--fh); open, it grows, and the first row keeps exactly the height it had closed */ #hx form#hxForm.tr-open { height: auto; } #hx form#hxForm.tr-open > :is(.hx-fix, input, .tr-ok) { height: calc(var(--fh) - 15px); } @media (max-width: 760px) { #hx form#hxForm.tr-open > :is(.hx-fix, input, .tr-ok) { height: 50px; } } /* phone: --fh is auto; 50px is the phone input's own height */ /* rows stay stretched: the https://www. plate keeps its height */ /* the quiet mark where the button used to be */ #hx form#hxForm .tr-ok { flex: none; display: flex; align-items: center; align-self: stretch; padding: 0 14px 0 6px; } .tr-ok svg, .tr-done svg { display: block; } .tr-ok circle, .tr-done circle { fill: #0760C6; } .tr-ok path, .tr-done path { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } /* ---------- the drawer: a tier of the same object, edge to edge ---------- */ #hx form#hxForm .tr-tray { order: 9; box-sizing: border-box; flex: 0 0 calc(100% + 12px); width: calc(100% + 12px); margin: 6px -6px -6px; display: flex; align-items: center; gap: 8px; padding: 8px; background: #F2F6FC; border-top: 1px solid #D7E2F3; text-align: left; } #hx form#hxForm .tr-field { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; align-items: center; height: 54px; margin: 0; padding: 4px; background: #FFFFFF; border: 1px solid #D7E2F3; border-radius: 8px; cursor: text; transition: border-color .2s ease; } #hx form#hxForm .tr-field:focus-within { border-color: #0A66C2; } #hx form#hxForm .tr-tray input { flex: 1 1 0; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 12px; border: 0; background: transparent; box-shadow: none; outline: none; font-size: 16px; color: #031D40; } #hx form#hxForm .tr-tray .hx-fix { flex: none; height: 44px; padding: 0 12px; font-size: 13px; border-radius: 5px; } #hx form#hxForm .tr-tray button.tr-go { flex: 0 0 auto; height: 54px; margin: 0; position: relative; overflow: clip; } .tr-lbl { display: inline-block; } /* ---------- done ---------- */ #hx form#hxForm .tr-done { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px; padding: 6px 6px 6px 4px; text-align: left; } #hx .tr-done svg { flex: none; margin-top: 1px; } #hx .tr-done b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.015em; color: #0E1E35; line-height: 1.3; } #hx .tr-done span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: #505C6C; } #hx .tr-done span strong { font-weight: 700; color: #21416D; white-space: nowrap; } /* ---------- the quiet line under the field doubles as the helper line ---------- */ #hx .hx-micro.tr-say { color: #0B3B7A; font-weight: 650; } /* ---------- the button's flight ---------- */ .tr-fly { position: absolute; z-index: 6; pointer-events: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: clip; } .tr-fly svg { width: 16px; height: 16px; flex: none; } /* ---------- phones: the drawer stacks ---------- */ @media (max-width: 620px) { #hx form#hxForm .tr-tray { flex-direction: column; align-items: stretch; } #hx form#hxForm .tr-field { flex: none; width: 100%; } #hx form#hxForm .tr-tray button.tr-go { width: 100%; flex: none; } #hx form#hxForm .tr-ok { padding: 0 10px 0 4px; } } /* ========================================================================== STRADDLE — the phone form (max-width 760px). LIVE 2026-10-01. Owner-approved preview: [archived] option 1. One white field with the address written in it, and the action as a raised white key set into the field's lower edge. The prefix is the same typeface and size as the address, so the two read as one web address. No filled blue button and no blue frame. The name + mobile step (audit-form.js, "phones" section) opens as two soft wells inside the same field, and the key's words become "Get my audit". Nothing is ever said in a sentence: a wrong or empty field shakes and takes a red ring and a small mark (.as-bad / .is-bad); the wording goes to screen readers only. Desktop is untouched: every rule is inside the media query, and a form the desktop drawer has already opened (.tr-open) is left to the rules above. UNDO: restore an earlier layer of this file and audit-form.js from [archived] and put the two ?v= values in index.html back (or restore that index.html). ========================================================================== */ @media (max-width: 760px) { #hx form#hxForm:not(.tr-open) { --as-sf: 0 0 0 1px rgba(15, 30, 58, .06), 0 1px 2px rgba(16, 42, 90, .06), 0 14px 32px -10px rgba(16, 42, 90, .16); --as-ring: 0 0 0 2px rgba(7, 96, 198, .6); --as-bad: 0 0 0 2px rgba(209, 67, 67, .92); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: 0; height: auto; margin-top: 34px; margin-bottom: 25px; /* 25 = the key's 23px below the edge + 2 */ padding: 0 20px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--as-sf); transition: box-shadow .2s ease; } #hx form#hxForm:not(.tr-open):not(.as-open):focus-within, #hx form#hxForm.as-open:has(#hxSite:focus) { box-shadow: var(--as-sf), var(--as-ring); } #hx form#hxForm.as-bad.as-bad.as-bad:not(.tr-open) { box-shadow: var(--as-sf), var(--as-bad); } /* tripled: red outranks the focus ring */ #hx .hx-hero { padding-bottom: 16px; } /* room between the promise line and the work card */ /* the address line */ #hx form#hxForm:not(.tr-open) .hx-fix { height: 58px; padding: 0; border-radius: 0; background: none; font: 400 17px/1.25 -apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif; color: #4A5A75; } /* no drawn caret: only the browser's own, once the field is tapped (see an earlier layer of this file, 2026-10-05) */ #hx form#hxForm:not(.tr-open) #hxSite { width: 100%; min-width: 0; height: 58px; padding: 0 0 0 1px; font-size: 17px; font-weight: 500; letter-spacing: -.005em; } #hx form#hxForm:not(.tr-open) input::placeholder { color: #7C8AA5; font-weight: 400; } #hx form#hxForm .as-ok, #hx form#hxForm .as-bad-i { flex: none; display: block; margin-left: 8px; } #hx form#hxForm .as-ok { color: var(--brand); } #hx form#hxForm .as-bad-i { color: #D14343; } /* the key, set into the lower edge: the ring in the field's colour cuts its seat */ #hx form#hxForm:not(.tr-open) > button { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: center; flex: none; width: auto; height: 46px; margin: -3px 0 -23px; padding: 0 20px 0 22px; gap: 9px; border-radius: 23px; background: #fff; color: var(--brand); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 0 0 5px var(--field, #EAF1FB), 0 0 0 6px rgba(15, 30, 58, .07), 0 12px 18px -8px rgba(16, 42, 90, .28); transition: transform .2s ease, margin-top .3s ease, color .2s ease; } #hx form#hxForm:not(.tr-open) > button:active { transform: translateY(1px); } #hx form#hxForm:not(.tr-open) > button:disabled { color: #5C7FB5; } #hx form#hxForm:not(.tr-open) > button.as-fail { color: #D14343; } #hx form#hxForm:not(.tr-open) > button .hx-arw { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.22, .61, .36, 1); } #hx form#hxForm.as-ready:not(.tr-open) > button .hx-arw { transform: translateX(2px); } #hx form#hxForm.as-open > button { margin-top: 9px; } /* the second step: name, then +91 | mobile, as soft wells in the same field */ #hx form#hxForm .as-row { grid-column: 1 / -1; box-sizing: border-box; display: flex; align-items: center; min-width: 0; height: 52px; margin: 8px -10px 0; padding: 0 14px; overflow: hidden; border-radius: 14px; background: #F2F5FB; cursor: text; text-align: left; transition: box-shadow .2s ease, background-color .2s ease; } /* 2026-10-02 (approved with the phone field's docked panel, [archived]r2): a focused well keeps its pale tone and takes ONE thin blue line inside its edge — it was white with a 2px ring outside. Both wells, name and number. To go back: background #fff; box-shadow var(--as-ring) / var(--as-bad). */ #hx form#hxForm .as-row:focus-within { background: #F2F5FB; box-shadow: inset 0 0 0 1px rgba(7, 96, 198, .42); } #hx form#hxForm .as-row.is-bad { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(209, 67, 67, .92); } #hx form#hxForm .as-row input { flex: 1 1 0; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0 0 0 1px; border: 0; outline: 0; background: transparent; box-shadow: none; font-size: 17px; font-weight: 500; letter-spacing: -.005em; color: var(--ink); } #hx form#hxForm .as-cc { flex: none; margin-right: 9px; font-size: 17px; line-height: 1.25; color: #4A5A75; } #hx .hx-hero .hx-micro { color: #4A5A75; } } @media (max-width: 350px) { #hx form#hxForm:not(.tr-open) { padding: 0 16px; } #hx form#hxForm:not(.tr-open) .hx-fix, #hx form#hxForm .as-cc { font-size: 16px; } #hx form#hxForm:not(.tr-open) #hxSite, #hx form#hxForm .as-row input { font-size: 16px; } #hx form#hxForm .as-row { margin-left: -8px; margin-right: -8px; padding: 0 12px; } #hx form#hxForm .as-ok, #hx form#hxForm .as-bad-i { margin-left: 4px; } #hx .hx-hero .hx-micro { font-size: 12px; } #hx .hx-hero .hx-micro i { margin: 0 .34em; } } /* ========================================================================== ONE FIELD SYSTEM — the open step (name + number), both layouts. LIVE 2026-10-03, with the anchored country panel (assets/forms/phone/phone.css): the owner's pick, option 3 of [archived], which showed both. Once the second step is open every field is the same object: the address becomes a soft well like the name, the number and "What are you looking for?"; all four are 54px, one corner, one inner margin and one type size; a well shows its focus by the approved thin line inside its own edge, and the whole field never takes a ring in this step (it did while the address was edited). The first step — the address alone — is not touched. Written "html body #hx…" so it outranks the Straddle rules above and, on desktop, assets/home/hero/desktop.css (loaded after this file). UNDO: delete this block (and the one in audit-form.js marked "the country list on desktop"), or restore an earlier layer of this file / audit-form.js from [archived]. ========================================================================== */ @media (max-width: 760px) { html body #hx form#hxForm.as-open { position: relative; padding: 10px 10px 0; } html body #hx form#hxForm.as-open:has(#hxSite:focus), html body #hx form#hxForm.as-open.as-bad.as-bad.as-bad { box-shadow: var(--as-sf); } /* the address: a well, drawn behind its three parts */ html body #hx form#hxForm.as-open::before { content: ""; position: absolute; z-index: 0; left: 10px; right: 10px; top: 10px; height: 54px; border-radius: 14px; background: #F2F5FB; pointer-events: none; transition: box-shadow .2s ease, background-color .2s ease; } html body #hx form#hxForm.as-open:has(#hxSite:focus)::before { box-shadow: inset 0 0 0 1px rgba(7, 96, 198, .42); } html body #hx form#hxForm.as-open.as-bad::before { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(209, 67, 67, .92); } html body #hx form#hxForm.as-open > :is(.hx-fix, #hxSite, .as-ok, .as-bad-i) { position: relative; z-index: 1; } html body #hx form#hxForm.as-open > .hx-fix { height: 54px; padding-left: 16px; } html body #hx form#hxForm.as-open > #hxSite { height: 54px; } html body #hx form#hxForm.as-open > :is(.as-ok, .as-bad-i) { margin-right: 16px; } /* name, number, "looking for": one well each, same size, same insets */ html body #hx form#hxForm.as-open .as-row { height: 54px; margin: 8px 0 0; padding: 0 16px; } html body #hx form#hxForm.as-open > .nq-wells { margin: 8px 0 0; --nq-h: 54px; } html body #hx form#hxForm.as-open > .nq-wells button.nq-row { padding-left: 16px; } } @media (max-width: 350px) { html body #hx form#hxForm.as-open { padding: 10px 8px 0; } html body #hx form#hxForm.as-open::before { left: 8px; right: 8px; } html body #hx form#hxForm.as-open > .hx-fix { padding-left: 14px; } html body #hx form#hxForm.as-open > :is(.as-ok, .as-bad-i) { margin-right: 14px; } html body #hx form#hxForm.as-open .as-row { margin: 8px 0 0; padding: 0 14px; } html body #hx form#hxForm.as-open > .nq-wells { margin: 8px 0 0; } html body #hx form#hxForm.as-open > .nq-wells button.nq-row { padding-left: 14px; } } @media (min-width: 761px) { html body #hx.hx form#hxForm.tr-open { position: relative; } html body #hx.hx form#hxForm.tr-open:focus-within { box-shadow: var(--dp-sf, none); } /* the address: a well, drawn behind its three parts, on the wells' own column */ html body #hx.hx form#hxForm.tr-open::before { content: ""; position: absolute; z-index: 0; left: 8px; right: 8px; top: 8px; height: 54px; border-radius: 10px; background: #F2F5FB; pointer-events: none; transition: box-shadow .2s ease; } html body #hx.hx form#hxForm.tr-open:has(#hxSite:focus)::before { box-shadow: inset 0 0 0 1px rgba(7, 96, 198, .42); } html body #hx.hx form#hxForm.tr-open > :is(.hx-fix, input, .tr-ok) { position: relative; z-index: 1; height: 54px; margin-top: 2px; } html body #hx.hx form#hxForm.tr-open > .hx-fix { padding-left: 19px; font-size: 17px; } html body #hx.hx form#hxForm.tr-open > input#hxSite { font-size: 17px; } html body #hx.hx form#hxForm.tr-open > .tr-ok { padding: 0 17px 0 6px; } html body #hx.hx form#hxForm.tr-open .tr-tray { margin-top: 4px; } /* one type size in every well */ html body #hx.hx form#hxForm.tr-open .tr-tray .tr-field > input, html body #hx.hx form#hxForm.tr-open .tr-field > .ph, html body #hx.hx form#hxForm.tr-open .tr-field > .ph .ph-cc, html body #hx.hx form#hxForm.tr-open .tr-field > .ph .ph-in > input.ph-tel { font-size: 17px; } html body #hx.hx form#hxForm.tr-open .tr-tray.tr-has-need > .nq-drawer { --nq-fs: 17px; } }