/* Pesyje homepage V38 — 2026-10-11
 * Styles scoped to the current v32 AYLINE homepage; all content remains database-driven.
 * Loaded after V42, CSS-only refinement. No changes to header/footer components.
 */
body.py30-home {
  --py38-deep:#0d2732; --py38-teal:#00aab0; --py38-outline:#e4ecef;
  --p30-width:1260px;
  background:var(--p30-paper);
}
.py30-home #py30-main { overflow:clip; }
.py30-home .py30-container { width:min(calc(100% - 72px),1260px); }
.py30-home .py30-hero {
  padding:66px 0 66px;
  min-height:390px;
  overflow:visible;
  background:#12394b;
}
.py30-home .py30-hero-background { object-position:center 55%; }
.py30-home .py30-hero-shade {
  background:linear-gradient(90deg,rgba(4,28,46,.88) 0%,rgba(4,30,47,.67) 44%,rgba(4,30,47,.20) 100%),linear-gradient(0deg,rgba(4,29,42,.48),transparent 60%);
}
.py30-home .py30-hero-grid { grid-template-columns:minmax(0,1fr) 220px; gap:46px; align-items:center; }
.py30-home .py30-hero-copy { max-width:940px; }
.py30-home .py30-hero h1 { font-size:clamp(37px,3.9vw,59px); line-height:1.06; font-weight:800; letter-spacing:-2px; margin:17px 0 12px; text-wrap:balance; text-shadow:0 2px 16px #00182626; }
.py30-home .py38-hero-highlight { color:#a2f5f0; }
.py30-home .py30-hero-copy>p { font-size:15px; line-height:1.57; margin-bottom:22px; max-width:620px; color:#f0f8fa; }
.py30-home .py30-hero .py30-eyebrow { border:1px solid #71e0d64d; background:#008c9780; color:#efffff; font-size:10px; padding:7px 11px; letter-spacing:.02em; }
.py30-home .py30-search-wrap { isolation:isolate; z-index:80; max-width:920px; }
.py30-home .py30-search {
  position:relative; z-index:5; min-height:63px; padding:7px; border:1px solid #fff;
  grid-template-columns:minmax(0,1.55fr) minmax(185px,.85fr) auto;
  border-radius:13px; gap:5px;
  box-shadow:0 15px 40px #011c3240;
}
.py30-home .py30-search-field,.py30-home .py30-location-field { border:0; padding-inline:15px; }
.py30-home .py30-search-field { border-right:1px solid #e3edef; border-radius:0; }
.py30-home .py30-search input,.py30-home .py30-search select { font-size:13px; }
.py30-home .py30-search .py30-button { background:linear-gradient(120deg,#00a4a9,#04bbb4); min-width:108px; border-radius:9px; font-weight:750; box-shadow:0 3px 8px #038d8e38; }
.py30-home .py30-popular { margin-top:14px; gap:6px; }
.py30-home .py30-popular a { background:#082c416b; border:1px solid #c3eef354; border-radius:100px; padding:5px 11px; font-size:10px; backdrop-filter:blur(3px); }
.py30-home .py30-popular a:hover { border-color:#dff; }
.py30-home .py30-hero-stats { display:grid; gap:13px; padding:19px 17px; border-radius:20px; background:rgba(227,242,250,.14); border:1px solid #e3faff54; box-shadow:0 18px 42px #00203527; }
.py30-home .py30-hero-stats .py30-stat { padding:0 0 12px; border-bottom:1px solid #ffffff2b; }
.py30-home .py30-hero-stats .py30-stat:last-child { border-bottom:0; padding-bottom:0; }
.py30-home .py30-hero-stats .py30-stat strong { font-size:21px; }
.py30-home .py30-hero-stats .py30-stat small { font-size:10px; color:#f0fbff; }
/* Categories sit BELOW the hero, as a full editorial section, rather than covering it. */
.py30-home .py30-categories { margin-top:29px; z-index:4; }
.py30-home .py38-category-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 16px; }
.py30-home .py38-heading-copy { display:flex; align-items:center; gap:12px; min-width:0; }
.py30-home .py38-heading-icon { color:#00a7ad; font-size:21px; }
.py30-home .py38-category-heading h2 { margin:0; font-size:22px; font-weight:800; line-height:1.2; color:var(--p30-ink); letter-spacing:-.55px; }
.py30-home .py38-category-heading p { margin:4px 0 0; color:var(--p30-muted); font-size:12px; }
.py30-home .py31-original-categories { display:flex; overflow-x:auto; padding:4px 2px 13px; border:0; background:transparent; border-radius:0; box-shadow:none; gap:12px; scroll-snap-type:x proximity; scrollbar-width:none; }
.py30-home .py31-original-categories .py30-category { flex:0 0 calc((100% - 108px)/10); min-width:98px; min-height:118px; gap:9px; border:1px solid var(--p30-line); padding:16px 7px 11px; background:var(--p30-surface); border-radius:16px; box-shadow:0 6px 18px #112f3d0a; scroll-snap-align:start; }
.py30-home .py31-original-categories .py30-category:hover { transform:translateY(-3px); border-color:#b7e5e2; box-shadow:0 12px 25px #136b7416; }
.py30-home .py31-original-categories .py31-category-image,.py30-home .py31-original-categories .py30-icon-box { width:48px; height:48px; background:#edf9f9; border-radius:13px; }
.py30-home .py31-original-categories .py31-category-image img { width:45px; height:45px; object-fit:contain; }
.py30-home .py31-original-categories .py30-category>span:last-child { font-size:11px; min-height:28px; font-weight:700; line-height:1.37; }
.py30-home .py30-content { padding-top:6px; }
.py30-home .py30-section { margin:28px 0 32px; }
.py30-home .py30-section-heading { margin-bottom:15px; }
.py30-home .py30-section-label { gap:10px; }
.py30-home .py30-section-label>.bi { font-size:21px; margin-top:2px; }
.py30-home .py30-section-label h2 { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.65px; }
.py30-home .py30-section-heading p { font-size:12px; margin-top:4px; line-height:1.5; }
.py30-home .py30-view-all { border:1px solid var(--p30-line); border-radius:100px; background:var(--p30-surface); color:var(--p30-teal-dark); font-size:11px; font-weight:700; padding:9px 15px; white-space:nowrap; }
.py30-home .py30-view-all:hover { background:#eaf8f8; border-color:#a5dedd; }
/* Premium directory cards: real covers remain primary, gradient logos as graceful fallback. */
.py30-home .py30-track { gap:15px; }
.py30-home .py30-featured-track { grid-auto-columns:calc((100% - 45px)/4); }
.py30-home .py32-card { border:1px solid var(--p30-line); border-radius:17px; box-shadow:0 9px 25px #1b46510c; background:var(--p30-surface); }
.py30-home .py32-card .py30-card-media { aspect-ratio:1.93; background:var(--p30-soft); }
.py30-home .py32-card .py31-real-cover { object-fit:cover; }
.py30-home .py32-card .py30-business-logo { width:58px; height:58px; bottom:-22px; left:14px; padding:5px; border-radius:15px; box-shadow:0 5px 14px #12303c22; }
.py30-home .py32-card .py30-business-logo img { border-radius:10px; }
.py30-home .py32-card .py30-card-body { padding:30px 15px 15px; min-height:155px; }
.py30-home .py32-card h3 { font-size:16px; letter-spacing:-.4px; line-height:1.32; }
.py30-home .py32-card-domain { font-size:11px; min-height:16px; margin-top:5px!important; }
.py30-home .py32-favorite { width:28px; min-height:28px; }
.py30-home .py32-favorite :is(a,button) { width:28px!important; height:28px!important; font-size:19px; }
.py30-home .py32-favorite svg { width:21px; height:21px; }
.py30-home .py32-rating { margin:10px 0 12px; font-size:12px; gap:5px; }
.py30-home .py32-rating .py32-rating-art { width:100px; height:20px; }
.py30-home .py32-chip { padding:6px 9px; border-radius:8px; font-size:10px; background:var(--p32-chip); }
.py30-home .py32-brand-cover .py32-brand-emblem { max-width:110px; }
.py30-home .py32-card .py30-verified { top:9px; right:9px; }
/* Business owner conversion banner with legible text and art, original admin links and asset. */
.py30-home .py30-support { margin:31px 0; min-height:238px; grid-template-columns:1.05fr 1fr; border-radius:21px; padding:25px 0 25px 35px; background:radial-gradient(circle at 57% 15%,#046775 0,transparent 54%),linear-gradient(112deg,#042e3c,#007a80 82%,#052d3c); }
.py30-home .py30-support::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 27% 109%,#00b3b51f,transparent 75%); pointer-events:none; }
.py30-home .py30-support-copy { position:relative; z-index:1; }
.py30-home .py30-support h2 { font-size:clamp(24px,2.25vw,32px); line-height:1.16; letter-spacing:-.9px; max-width:520px; }
.py30-home .py30-support p { font-size:13px; max-width:510px; line-height:1.6; }
.py30-home .py30-support .py30-button { border-radius:10px; }
.py30-home .py30-support-art { border-radius:65px 0 0 65px; }
.py30-home .py30-support-art>img { object-position:center center; }
/* Cities: taller editorial imagery with gently stronger text contrast. */
.py30-home .py30-city-track { grid-auto-columns:calc((100% - 75px)/6); }
.py30-home .py30-city { height:168px; border-radius:14px; }
.py30-home .py30-city::after { background:linear-gradient(0deg,rgba(3,28,44,.95),rgba(3,35,51,.08) 75%); }
.py30-home .py30-city-copy { left:13px; bottom:14px; }
.py30-home .py30-city strong { font-size:16px; font-weight:800; }
.py30-home .py30-city small { font-size:10px; opacity:.95; }
/* Testimonials use real reviews and business attribution; no invented text or stars. */
.py30-home .py30-review-track { grid-auto-columns:calc((100% - 32px)/3); }
.py30-home .py30-review { min-height:238px; border-radius:15px; padding:18px; box-shadow:0 6px 18px #173f490d; }
.py30-home .py30-review-person>img { width:43px; height:43px; }
.py30-home .py30-review-person strong { font-size:12px; }
.py30-home .py30-review-content>p { font-size:12px; line-height:1.65; }
.py30-home .py30-review h3 { font-size:12px; }
.py30-home .py30-review-business { margin-top:10px; }
/* Blog, FAQs, and existing signup help block. */
.py30-home .py30-blog-grid { gap:17px; }
.py30-home .py30-blog-card { border-radius:16px; box-shadow:0 8px 22px #173f490c; }
.py30-home .py30-blog-media { height:156px; }
.py30-home .py30-blog-body { padding:16px 18px 19px; }
.py30-home .py30-blog-body h3 { font-size:15px; }
.py30-home .py30-blog-body>p { font-size:12px; }
.py30-home .py30-faq-owner { grid-template-columns:1.35fr 1fr; gap:23px; }
.py30-home .py30-faq { border-radius:10px; margin-top:9px; }
.py30-home .py30-faq summary { font-size:12px; min-height:49px; }
.py30-home .py30-owner { min-height:310px; border-radius:18px; }
.py30-home .py30-owner h2 { font-size:21px; }
.py30-home .py30-owner p { font-size:12px; }
.py30-home .py30-bottom-stats { margin:30px 0 36px; }
/* Theme-aware surfaces: keep existing AYLINE theme switcher behavior. */
html[data-pesyje-theme="dark"] .py30-home .py31-original-categories .py31-category-image,
html[data-pesyje-theme="dark"] .py30-home .py31-original-categories .py30-icon-box { background:#2e474b; }
html[data-pesyje-theme="dark"] .py30-home .py30-view-all:hover { background:#244b50; }
@media (max-width:1180px) {
  .py30-home .py30-container { width:calc(100% - 48px); }
  .py30-home .py30-hero-grid { gap:26px; grid-template-columns:minmax(0,1fr) 205px; }
  .py30-home .py30-hero h1 { font-size:clamp(36px,4.1vw,49px); }
  .py30-home .py31-original-categories .py30-category { flex-basis:114px; }
  .py30-home .py30-city-track { grid-auto-columns:calc((100% - 48px)/5); }
}
@media (max-width:991px) {
  .py30-home .py30-hero { padding:47px 0 52px; min-height:0; }
  .py30-home .py30-hero-grid { grid-template-columns:minmax(0,1fr) 175px; gap:23px; }
  .py30-home .py30-hero-stats { padding:14px; gap:10px; }
  .py30-home .py30-hero-stats .py30-stat { gap:9px; }
  .py30-home .py30-search { grid-template-columns:minmax(0,1fr) 135px; }
  .py30-home .py30-search .py30-button { grid-column:1/-1; }
  .py30-home .py30-featured-track { grid-auto-columns:calc((100% - 30px)/3); }
  .py30-home .py30-support { padding:25px 0 25px 25px; }
  .py30-home .py30-review-track { grid-auto-columns:calc((100% - 16px)/2); }
}
@media (max-width:767.98px) {
  .py30-home .py30-container { width:calc(100% - 30px); }
  .py30-home .py30-hero { padding:29px 0 34px; }
  .py30-home .py30-hero-grid { display:block; }
  .py30-home .py30-hero h1 { font-size:clamp(31px,8vw,44px); letter-spacing:-1.1px; margin:14px 0 11px; }
  .py30-home .py30-hero-copy>p { font-size:12px; margin-bottom:17px; }
  .py30-home .py30-hero-stats { display:none; }
  .py30-home .py30-search { grid-template-columns:minmax(0,1fr) 42%; gap:0; padding:5px; min-height:0; }
  .py30-home .py30-search-field,.py30-home .py30-location-field { min-height:46px; padding-inline:9px; }
  .py30-home .py30-search input,.py30-home .py30-search select { font-size:11px; }
  .py30-home .py30-search .py30-button { min-height:42px; margin-top:5px; border-radius:8px; grid-column:1/-1; }
  .py30-home .py30-popular { margin-top:13px; }
  .py30-home .py30-categories { margin-top:20px; }
  .py30-home .py38-category-heading { gap:10px; margin-bottom:12px; }
  .py30-home .py38-category-heading h2 { font-size:18px; }
  .py30-home .py38-category-heading p { font-size:10px; max-width:230px; }
  .py30-home .py38-heading-icon { font-size:18px; }
  .py30-home .py31-original-categories { gap:8px; padding:3px 1px 12px; }
  .py30-home .py31-original-categories .py30-category { flex:0 0 98px; min-width:98px; min-height:101px; padding:11px 7px; gap:7px; border-radius:13px; }
  .py30-home .py31-original-categories .py31-category-image,.py30-home .py31-original-categories .py30-icon-box { width:42px; height:42px; }
  .py30-home .py31-original-categories .py31-category-image img { width:39px; height:39px; }
  .py30-home .py31-original-categories .py30-category>span:last-child { font-size:10px; }
  .py30-home .py30-content { padding-top:4px; }
  .py30-home .py30-section { margin:24px 0; }
  .py30-home .py30-section-label h2 { font-size:18px; }
  .py30-home .py30-section-heading p { font-size:10px; }
  .py30-home .py30-view-all { font-size:10px; padding:6px 9px; }
  /* Intentionally keep V42's 2-column mobile business cards and native Livewire hearts. */
  body.py30-home .py30-track.py30-featured-track { grid-auto-columns:calc((100% - 10px)/2)!important; gap:10px; }
  body.py30-home .py32-card { border-radius:14px; }
  body.py30-home .py32-card .py30-card-media { aspect-ratio:1.72!important; }
  body.py30-home .py32-card .py30-business-logo { width:43px; height:43px; left:9px; bottom:-14px; padding:4px; border-radius:11px; }
  body.py30-home .py32-card .py30-card-body { padding:20px 9px 10px; min-height:142px; }
  body.py30-home .py32-card h3 { font-size:12px; }
  body.py30-home .py32-card-domain { font-size:9px; }
  body.py30-home .py32-rating { font-size:10px; margin:7px 0 8px; }
  body.py30-home .py32-rating .py32-rating-art { width:clamp(70px,22vw,86px); height:auto; }
  body.py30-home .py32-chip { font-size:8px; padding:5px 6px; }
  .py30-home .py30-support { padding:22px 18px 0; margin:26px 0; border-radius:16px; display:block; min-height:0; }
  .py30-home .py30-support h2 { font-size:25px; }
  .py30-home .py30-support p { font-size:12px; }
  .py30-home .py30-support-art { height:185px; margin:22px -18px 0 10%; border-radius:48px 0 0 0; }
  .py30-home .py30-city-track { grid-auto-columns:calc((100% - 22px)/2.5); gap:11px; }
  .py30-home .py30-city { height:145px; }
  .py30-home .py30-review-track { grid-auto-columns:86%; }
  .py30-home .py30-review { min-height:223px; }
  .py30-home .py30-blog-grid { gap:12px; }
  .py30-home .py30-blog-card { flex-basis:82%; }
  .py30-home .py30-faq-owner { display:block; }
  .py30-home .py30-owner { margin-top:22px; min-height:0; }
  .py30-home .py30-bottom-stats { margin:25px 0; }
}
@media (max-width:390px) {
  .py30-home .py30-container { width:calc(100% - 24px); }
  .py30-home .py30-hero h1 { font-size:29px; }
  .py30-home .py31-original-categories .py30-category { flex-basis:90px; min-width:90px; }
  .py30-home .py30-view-all { padding:6px; }
  .py30-home .py30-city-track { grid-auto-columns:calc((100% - 12px)/2); }
}
@media (prefers-reduced-motion:reduce) {
  .py30-home .py30-category,.py30-home .py32-card,.py30-home .py30-city img { transition:none!important; }
}