:root{--teal:#35d9bf;--teal-wash:#e4f8f4;--teal-deep:#167f7a;--navy:#114f8c;--ink:#2c3338;--muted:#5f6a70;--line:#d9dee0;--paper:#f6f7f7;--white:#fff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:"Lexend","Segoe UI",system-ui,sans-serif;line-height:1.5}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
img{display:block;max-width:100%}
.site-header{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:3px solid var(--teal)}
.header-inner{max-width:1200px;margin:auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:58px;width:auto}
.home-link{color:var(--navy);font-weight:500;text-decoration:none;padding:8px 14px;border:2px solid var(--teal);white-space:nowrap}
.home-link:hover{background:var(--teal-wash)}
main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:36px 24px 56px}
h1{margin:0;color:var(--navy);font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2}
.intro{margin:8px 0 0;color:var(--muted);max-width:62ch}
/* Dashboard: the boxes shrink with the screen height so all six fit on one page */
main.dash{max-width:1700px;padding:18px 24px;text-align:center;display:flex;flex-direction:column;justify-content:center}
main.dash h1{font-size:clamp(1.4rem,2.4vw,1.8rem)}
main.dash .intro{margin:2px auto 0}
.tiles{--iw:calc(((100vh - 268px)/2 - 46px)*2.1);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:max(720px,calc(4*var(--iw) + 88px));margin:14px auto 0}
.tile{display:block;background:var(--white);border:5px solid var(--teal);color:var(--navy);text-decoration:none;transition:background-color .16s}
.tile:hover{background:var(--teal-wash)}
.tile img{width:100%;aspect-ratio:1092/520}
.tile span{display:block;padding:7px 6px;text-align:center;font-size:1rem;font-weight:500;line-height:1.3}
/* Product pages */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:center;background:var(--white);border-left:8px solid var(--teal);padding:0 0 0 28px}
.hero img{width:100%;aspect-ratio:1092/520}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
.product{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);padding:16px}
.product .co{height:88px;width:100%;object-fit:contain}
.product h2{margin:12px 0 6px;font-size:1.12rem;font-weight:600;line-height:1.25;text-align:center}
.company{margin:0;text-align:center;color:var(--teal-deep);font-size:.92rem;font-weight:500}
.product p.desc{flex:1;margin:6px 0 16px;color:var(--muted);font-size:.92rem;text-align:center}
.buy{align-self:center;background:#2b8fb5;color:#fff;font-weight:600;padding:10px 26px;text-decoration:none}
.buy:hover{background:#1d7396}
.site-footer{background:var(--white);border-top:1px solid var(--line)}
.footer-inner{max-width:1200px;margin:auto;padding:14px 24px;text-align:center;color:var(--muted);font-size:.88rem}
.footer-inner a{color:var(--navy);font-weight:500}
@media (max-width:980px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tiles{max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:minmax(0,1fr);padding:20px 20px 0;gap:14px}.hero img{height:auto;margin:0 -20px;width:calc(100% + 40px);max-width:none}}
@media (max-width:560px){.header-inner{padding:8px 16px}main{padding:22px 16px 40px}.logo img{height:46px}main.dash{padding:14px 16px}.tiles{gap:10px}.tile{border-width:4px}.tile span{font-size:.9rem;padding:5px 4px}.products{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
body:has(main.dash) .header-inner{max-width:1700px}