
/* Faithful reference layout – structural CSS, not absolute positioning of text */
:root{--blue:#096bff;--navy:#0b2050}
html,body{max-width:100%;overflow-x:hidden}
.topin,.hero-layout,.steps-grid,.categories,.offers-grid{min-width:0}
.wordmark{letter-spacing:-1.4px}.wordmark,.wordmark span{white-space:nowrap}
.hero-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.12fr);gap:28px;align-items:center;padding-top:26px;padding-bottom:20px}
.hero h1{font-size:clamp(32px,3.28vw,49px)}
.hero-board{position:relative;min-width:0;aspect-ratio:800/379;width:100%;overflow:hidden;border-radius:14px;align-self:center}
.hero-board>img{display:block;width:100%;height:100%;object-fit:fill}
.hotspot{position:absolute;display:block;z-index:2;border-radius:12px;outline-offset:-4px}
.hotspot:focus-visible{outline:3px solid #006dff}
.hotspot.home{left:0;top:0;width:100%;height:52%}
.hotspot.tech{left:0;top:56%;width:50%;height:44%}
.hotspot.coupon{left:51%;top:56%;width:49%;height:44%}
.categories{margin-top:12px;margin-bottom:15px}
.cat img{object-fit:contain;height:85px}
.offer h3{overflow-wrap:anywhere}
@media(max-width:1100px){.shell{padding:0 22px}.topin{gap:14px}.links{gap:19px}.hero-layout{grid-template-columns: minmax(0,1fr) minmax(0,1fr);gap:18px}.hero h1{font-size:clamp(32px,3.7vw,44px)}.intro{font-size:14px}.offers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.categories{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){.hero-layout{grid-template-columns:1fr}.hero-board{max-width:650px;margin:0 auto}.hero h1{font-size:40px}.steps-grid{grid-template-columns:1fr 1fr}.step-heading{grid-column:1/-1}.offers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.shell{padding:0 14px}.topin{flex-wrap:wrap;justify-content:center;padding-top:12px;padding-bottom:10px}.links{order:3;width:100%;justify-content:center}.head-right{display:none}.hero-layout{padding-top:28px}.hero h1{font-size:35px}.hero-board{border-radius:9px}.search{max-width:100%}.search button{padding:11px 12px}.steps-grid{grid-template-columns:1fr}.categories{grid-template-columns:repeat(2,1fr)}.offers-grid{grid-template-columns:1fr}.offer{display:flex}.offer img{width:35%;max-height:120px}}
