:where(#app) .roach-hub{max-width:1200px;margin:auto;padding:28px 32px 76px}
:where(#app) .hub-heading{max-width:790px;margin:50px 0 34px}
:where(#app) .hub-heading h1{font-size:clamp(34px,4.5vw,58px);letter-spacing:-.045em;line-height:1.06;margin:12px 0 18px}
:where(#app) .hub-heading>p:last-child{font-size:17px;line-height:1.7;color:var(--muted)}
:where(#app) .roach-species-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
:where(#app) .species-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 32px #1b294108}
:where(#app) .species-photo{display:flex;align-items:center;justify-content:center;height:285px;background:#f7f9fb;padding:20px}
:where(#app) .species-photo img{width:100%;height:100%;object-fit:contain;border-radius:10px}
:where(#app) .species-copy{padding:28px;display:flex;flex-direction:column;align-items:flex-start}
:where(#app) .species-copy h2{font-size:31px;letter-spacing:-.035em;margin:8px 0 14px}
:where(#app) .species-copy>p:not(.eyebrow){color:var(--muted);line-height:1.7;min-height:84px;margin:0}
:where(#app) .species-price{font-size:24px;font-weight:800;margin:22px 0}.species-price small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:5px}
:where(#app) .species-action{display:block;width:100%;padding:15px 18px;border-radius:10px;background:var(--pink);color:#fff;text-align:center;text-decoration:none;font-size:15px;font-weight:750}
:where(#app) .species-action:hover{filter:brightness(.93)}:where(#app) .hub-help{margin-top:28px;color:var(--muted);font-size:14px;line-height:1.7}:where(#app) .hub-help a{color:var(--blue)}
@media(max-width:680px){:where(#app) .roach-hub{padding:24px 18px 44px}:where(#app) .hub-heading{margin-top:26px}:where(#app) .roach-species-grid{grid-template-columns:1fr;gap:22px}:where(#app) .species-photo{height:220px}:where(#app) .species-copy{padding:23px}:where(#app) .species-copy>p:not(.eyebrow){min-height:0}}

:where(#app) .hub-heading{margin:26px 0 26px}
:where(#app) .hub-heading h1{max-width:none;font-size:clamp(34px,4vw,48px);width:auto}
:where(#app) .species-photo{height:185px}
:where(#app) .species-copy{padding:23px}
:where(#app) .species-copy>p:not(.eyebrow){min-height:66px}
:where(#app) .species-price{margin:17px 0}
@media(max-width:680px){:where(#app) .species-photo{height:190px}:where(#app) .species-copy>p:not(.eyebrow){min-height:0}}
:where(#app) .roach-hub .breadcrumbs{padding:0;margin:0 0 22px}
:where(#app) .hub-heading{margin:0 0 24px}
:where(#app) .species-photo{padding:0}
:where(#app) .species-photo img{object-fit:cover;object-position:50% 40%;border-radius:0}