/* ============================================================ The Kalman Co. — responsive layer (merged build) Claude Design generated map + flow fixes, GA-ready HTML. Loaded last in ; !important beats inline styles. ============================================================ */ html{-webkit-text-size-adjust:100%} img{max-width:100%} @media (max-width:820px){ /* ---- structure ---- */ [style*="grid-template-columns"]{grid-template-columns:1fr !important} [style*="grid-template-columns:1fr 1fr 1fr 1fr"], [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important} [style*="columns:2"]{columns:1 !important} [style*="display:flex"]{flex-wrap:wrap !important} [style*="display:flex"] > *{min-width:0} [style*="justify-content:space-between"]{gap:12px 18px} /* ---- gaps ---- */ [style*="gap:72px"]{gap:28px !important} [style*="gap:64px"]{gap:28px !important} [style*="gap:56px"]{gap:24px !important} [style*="gap:44px"]{gap:24px !important} [style*="gap:40px"]{gap:16px !important} [style*="gap:36px"]{gap:20px !important} [style*="gap:34px"]{gap:16px 18px !important} /* ---- insets for absolute blocks ---- */ [style*="left:56px"]{left:20px !important} [style*="right:56px"]{right:20px !important} [style*="bottom:56px"]{bottom:28px !important} [style*="bottom:48px"]{bottom:24px !important} /* ---- wordmark ---- */ [style*="letter-spacing:.26em"]{letter-spacing:.16em !important;font-size:16px !important} [style*="letter-spacing:.24em"]{letter-spacing:.16em !important} /* ---- fluid display type ---- */ [style*="font:300 72px"],[style*="font:400 74px"]{font-size:clamp(36px,10vw,50px) !important} [style*="font:300 60px"],[style*="font:300 58px"],[style*="font:300 56px"], [style*="font:300 54px"],[style*="font:300 52px"]{font-size:clamp(30px,8.5vw,40px) !important} [style*="font:300 48px"],[style*="font:300 46px"],[style*="font:300 44px"], [style*="font:400 44px"],[style*="font:400 40px"],[style*="font:400 38px"]{font-size:clamp(25px,7.5vw,32px) !important} [style*="font:300 34px"],[style*="font:300 32px"],[style*="font:300 30px"],[style*="font:300 28px"], [style*="font:400 34px"],[style*="font:400 30px"],[style*="font:400 28px"]{font-size:24px !important} /* ---- media heights (proportional) ---- */ [style*="height:280px"]{height:202px !important} [style*="height:300px"]{height:216px !important} [style*="height:320px"]{height:230px !important} [style*="height:340px"]{height:245px !important} [style*="height:440px"]{height:317px !important} [style*="height:480px"]{height:346px !important} [style*="height:520px"]{height:374px !important} [style*="height:560px"]{height:403px !important} [style*="height:640px"]{height:461px !important} [style*="height:700px"],[style*="height:760px"]{height:56svh !important;min-height:400px !important} [style*="height:820px"]{height:70svh !important;min-height:460px !important} /* ---- padding map (Claude Design proportional verticals) ---- */ [style*="padding:120px 56px 130px"]{padding:72px 20px 78px !important} [style*="padding:24px 56px 88px"]{padding:24px 20px 53px !important} [style*="padding:24px 56px"]{padding:24px 20px !important} [style*="padding:26px 56px"]{padding:26px 20px !important} [style*="padding:28px 48px 34px"]{padding:28px 20px 34px !important} [style*="padding:30px 56px"]{padding:30px 20px !important} [style*="padding:32px 40px"]{padding:32px 20px !important} [style*="padding:32px 56px"]{padding:32px 20px !important} [style*="padding:36px 40px 40px"]{padding:36px 20px 40px !important} [style*="padding:36px 40px"]{padding:36px 20px !important} [style*="padding:38px 40px"]{padding:38px 20px !important} [style*="padding:44px 48px"]{padding:44px 20px !important} [style*="padding:44px 56px 24px"]{padding:44px 20px 24px !important} [style*="padding:44px 56px"]{padding:44px 20px !important} [style*="padding:52px 56px"]{padding:31px 20px !important} [style*="padding:56px 56px 76px"]{padding:34px 20px 46px !important} [style*="padding:56px 56px 80px"]{padding:34px 20px 48px !important} [style*="padding:64px 56px 60px"]{padding:38px 20px 36px !important} [style*="padding:64px 56px 72px"]{padding:38px 20px 43px !important} [style*="padding:64px 56px"]{padding:38px 20px !important} [style*="padding:70px 56px 78px"]{padding:42px 20px 47px !important} [style*="padding:70px 56px 84px"]{padding:42px 20px 50px !important} [style*="padding:72px 56px 0"]{padding:43px 20px 0 !important} [style*="padding:72px 56px 40px"]{padding:43px 20px 40px !important} [style*="padding:72px 56px 84px"]{padding:43px 20px 50px !important} [style*="padding:72px 56px 88px"]{padding:43px 20px 53px !important} [style*="padding:72px 56px 92px"]{padding:43px 20px 55px !important} [style*="padding:72px 56px"]{padding:43px 20px !important} [style*="padding:80px 56px 40px"]{padding:48px 20px 40px !important} [style*="padding:80px 56px 72px"]{padding:48px 20px 43px !important} [style*="padding:80px 56px 88px"]{padding:48px 20px 53px !important} [style*="padding:80px 56px"]{padding:48px 20px !important} [style*="padding:84px 56px"]{padding:50px 20px !important} [style*="padding:88px 56px 84px"]{padding:53px 20px 50px !important} [style*="padding:88px 56px"]{padding:53px 20px !important} [style*="padding:96px 56px"]{padding:58px 20px !important} /* catch-all for any 56px gutter not mapped above */ [style*="px 56px"]{padding-left:20px !important;padding-right:20px !important} /* ---- forms / touch ---- */ input[style],select[style]{width:100% !important;box-sizing:border-box;min-height:44px} /* ---- homepage hero: static flow, content above imagery ---- */ [data-screen-label="2a hero"]{height:auto !important;min-height:100vh !important;min-height:100svh !important;display:flex !important;flex-direction:column !important} [data-screen-label="2a hero"] > div[style*="top:0"]{position:relative !important;z-index:2;padding:16px 20px !important} [data-screen-label="2a hero"] > div[style*="bottom:56px"]{position:relative !important;z-index:2;left:0 !important;right:auto !important;bottom:auto !important;margin-top:auto;width:100% !important;box-sizing:border-box !important;padding:44px 20px 26px !important;display:flex !important;flex-direction:column !important} [data-screen-label="2a hero"] div[style*="border-left:1px solid rgba(250,248,243,.45)"]{position:relative !important;bottom:auto !important;right:auto !important;margin-top:22px;max-width:none !important;order:9} [data-screen-label="2a hero"] div[style*="backdrop-filter"]{box-sizing:border-box;max-width:100% !important} [data-screen-label="2a hero"] div[style*="backdrop-filter"] > *{flex:1 1 100% !important;box-sizing:border-box;padding:14px 16px !important;justify-content:center;min-height:48px} /* ---- blog post hero grows with the title ---- */ [data-screen-label="post hero"]{height:auto !important} [data-screen-label="post hero"] > div[style*="bottom:48px"]{position:relative !important;left:0 !important;right:auto !important;bottom:auto !important;padding:190px 20px 30px !important;box-sizing:border-box;width:100% !important} /* ---- post meta rail becomes a horizontal strip ---- */ [data-screen-label="post body"] > div:first-child{flex-direction:row !important;gap:10px 22px !important} [data-screen-label="post body"] > div:first-child > div{border-top:none !important;padding-top:0 !important} /* ---- search panels without backdrop-filter (listings page) ---- */ [style*="align-items:stretch;max-width:900px"]{flex-wrap:wrap;box-sizing:border-box;max-width:100% !important} [style*="align-items:stretch;max-width:900px"] > *{flex:1 1 100% !important;box-sizing:border-box;padding:14px 16px !important;justify-content:center} } @media (max-width:820px){ /* 0709 hero headline uses a nowrap span — let it wrap on phones */ [data-screen-label="2a hero"] span[style*="white-space:nowrap"]{white-space:normal !important} }