/* Home page (index3). Builds on playerstats.css (.ps cards, colours). */
.home { padding-top: 18px; }
.home h2, .home h3, .home h4 { color: #fff; }
.home-title { font-size: 20px; font-weight: 600; margin: 26px 0 12px; }
.home-gap { margin-top: 22px; }

/* banner */
.home-hero { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: #000; border: 1px solid var(--ps-line); }
.home-hero-img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: center 30%; opacity: .75; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 75%); }
.home-hero-text { position: absolute; z-index: 1; left: 36px; top: 50%; transform: translateY(-50%); max-width: 520px; }
.home-hero-text .ps-muted { color: #b5b5b5; font-size: 15px; }
.home-hero h1 { font-size: 46px; font-weight: 700; margin: 0 0 8px; letter-spacing: .5px; }
.home-hero p { color: #d0d0d0; font-size: 16px; margin-bottom: 18px; }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.home-cta .btn { padding: 8px 16px; font-size: 14.5px; }
.home .btn-primary, .home .btn-primary:hover { color: #fff; text-decoration: none; }
.home .btn-default:hover, .home .btn:hover { text-decoration: none; }
.home .btn-default { background: var(--ps-card-2); border-color: #3a3a3a; color: var(--ps-text); }
.home .btn-default:hover { background: #262626; color: #fff; }

/* pickers */
.home-pickers { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: center; }
.home-pickers h2 { font-size: 22px; margin: 0 0 4px; }
.home-pickers h2 a, .home-sub h3 a, .home-players h4 a { color: #fff; }
.home-features { list-style: none; padding: 0; margin: 14px 0 16px; columns: 2; column-gap: 18px; }
.home-features li { padding: 3px 0; break-inside: avoid; font-size: 13.5px; }
.home-features .fa { color: var(--ps-good); margin-right: 6px; }
.home-sub { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ps-line); }
.home-sub h3 { font-size: 17px; margin: 0 0 4px; }
.home-sub p { margin: 0; }
.home-pickers-img img { width: 100%; border-radius: 6px; border: 1px solid #2c2c2c; transition: transform .2s ease, border-color .2s ease; }
.home-pickers-img:hover img { transform: scale(1.01); border-color: var(--ps-accent); }

/* analysis tools */
.home-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 10px; }
.home .home-tool { display: block; color: var(--ps-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.home .home-tool:hover { border-color: var(--ps-accent); transform: translateY(-2px); text-decoration: none; }
.home-tool .fa { font-size: 22px; color: var(--ps-accent); }
.home-tool h3 { font-size: 16px; font-weight: 600; margin: 10px 0 6px; }
.home-tool p { margin: 0; font-size: 13px; }

/* players + top heroes */
.home .ps-two { margin-top: 16px; }
.home-players h4 { font-size: 16px; margin: 4px 0 6px; }
.home-players .ps-search { margin-top: 12px; }
.home-top .ps-pick { padding: 5px 0; border-bottom: 1px solid #1f1f1f; }
.home-top .ps-pick:last-child { border-bottom: 0; }
.home-top .ps-pick img { height: 26px; width: 46px; }

/* Personal and Autopicker (hidden by config for now) */
.home-personal-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.home-personal-items a { text-align: center; color: var(--ps-text); background: var(--ps-card-2); border-radius: 6px; padding: 12px; }
.home-personal-items img { width: 64px; height: 64px; border-radius: 50%; display: block; margin: 0 auto 8px; }
.home .home-autopicker { position: relative; display: block; padding: 0; overflow: hidden; }
.home-autopicker img { width: 100%; display: block; }
.home-autopicker div { position: absolute; right: 6%; top: 30%; text-align: right; text-shadow: 2px 2px #000; }
.home-autopicker h3 { font-size: 34px; margin: 0; }
.home-autopicker h3 span { color: #ff5d43; }
.home-autopicker p { color: #fff; font-size: 17px; }

/* heropedia */
.home-heropedia { margin-top: 16px; }
.home-heropedia .ps-card-head .ps-links { margin: 0; }
.home-hp-features { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.home-hp-features li { background: var(--ps-card-2); border: 1px solid #2a2a2a; border-radius: 12px; padding: 2px 10px; font-size: 12.5px; }
.home-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-hero-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; align-content: start; }
.home-hero-group-label { grid-column: 1 / -1; color: var(--ps-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.home-hero-group a { display: block; border-radius: 3px; overflow: hidden; }
.home-hero-group img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.85); transition: filter .15s ease, transform .15s ease; }
.home-hero-group a:hover img { filter: saturate(1.15) brightness(1.1); transform: scale(1.08); }

@media (max-width: 991px) {
	.home-pickers { grid-template-columns: 1fr; }
	.home-tools { grid-template-columns: repeat(2, 1fr); }
	.home-heroes { grid-template-columns: repeat(2, 1fr); }
	.home-personal-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.home-hero-img { height: 260px; }
	.home-hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 25%, rgba(0, 0, 0, .3) 100%); }
	.home-hero-text { left: 16px; right: 16px; top: auto; bottom: 16px; transform: none; }
	.home-hero h1 { font-size: 34px; }
	.home-hero p { font-size: 14px; margin-bottom: 12px; }
	.home-features { columns: 1; }
	.home-tools { grid-template-columns: 1fr; }
	.home-heroes { grid-template-columns: 1fr; }
}

/* /user/personal */
.personal-intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center; }
.personal-intro h2 { font-size: 24px; margin: 10px 0 8px; }
.personal-intro p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.personal-status { background: var(--ps-card-2); border-radius: 8px; padding: 16px 18px; border-left: 3px solid var(--ps-accent); }
.personal-status h3 { font-size: 17px; margin: 0 0 6px; }
.personal-status p { font-size: 13.5px; margin-bottom: 10px; }
.personal-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.personal-feature { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 0; }
.personal-feature img { width: 72px; height: 72px; border-radius: 50%; flex: none; background: #060606; border: 3px solid #333; padding: 3px; object-fit: cover; }
.personal-feature h3 { font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.personal-feature p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.personal-steps { padding-left: 20px; margin: 0; }
.personal-steps li { padding: 4px 0; font-size: 13.5px; line-height: 1.55; }
@media (max-width: 991px) {
	.personal-intro, .personal-features { grid-template-columns: 1fr; }
}

/* /contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: start; }
.contact-info h2 { font-size: 22px; margin: 0 0 8px; }
.contact-info .ps-dl { margin-top: 16px; }
.contact-info .ps-dl dt .fa { width: 16px; color: var(--ps-accent); }
.contact-more { margin: 0; font-size: 13px; }
.contact-form label { display: block; color: var(--ps-muted); font-weight: 400; font-size: 13px; margin-bottom: 12px; }
.contact-form .form-control { margin-top: 4px; background: var(--ps-card-2); border-color: #333; color: var(--ps-text); }
.contact-form .form-control:focus { border-color: var(--ps-accent); box-shadow: none; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact-actions .ps-muted { font-size: 12.5px; }
@media (max-width: 991px) {
	.contact-grid, .contact-row { grid-template-columns: 1fr; }
}

/* /faq and /about */
.faq-layout { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
.faq-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.faq-nav a { padding: 6px 10px; border-radius: 6px; color: var(--ps-text) !important; }
.faq-nav a:hover { background: var(--ps-card-2); text-decoration: none !important; }
.faq-nav-contact { margin-top: 6px; border-top: 1px solid var(--ps-line); padding-top: 10px !important; color: var(--ps-accent) !important; }
.faq-section h2 { font-size: 20px; margin: 0 0 6px; }
.faq-item { padding: 12px 0; border-top: 1px solid var(--ps-line); }
.faq-section h2 + .faq-item { border-top: 0; }
.faq-item h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.faq-item p { margin: 0; color: #c4c4c4; font-size: 14px; line-height: 1.65; }
.about-intro h2 { font-size: 22px; margin: 0 0 8px; }
.about-intro p, .ps-two p { font-size: 14px; line-height: 1.65; }
.about-support { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.about-support h3 { font-size: 17px; margin: 0 0 6px; }
.about-support p { margin: 0; max-width: 720px; }
.about-contact { text-align: center; margin-top: 8px; }
@media (max-width: 991px) {
	.faq-layout { grid-template-columns: 1fr; }
	.faq-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* /privacy and /termsofservice */
.legal .ps-topbar > .ps-muted { font-size: 13px; }
.legal-summary { border-left: 3px solid var(--ps-accent); }
.legal-summary h2 { font-size: 18px; margin: 0 0 8px; }
.legal-summary ul { margin: 0; padding-left: 20px; }
.legal-summary li { padding: 3px 0; font-size: 14px; line-height: 1.55; }
.legal-body { max-width: 900px; }
.legal-body h2 { font-size: 18px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--ps-line); }
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.legal-body p, .legal-body li { color: #c4c4c4; font-size: 14px; line-height: 1.65; }
.legal-body ul { padding-left: 20px; }
.legal-body code { background: var(--ps-card-2); color: #ddd; }

/* /blog/pickerbestpractices */
.home kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid #444; border-bottom-width: 2px; border-radius: 4px; background: #1e1e1e; color: #f0f0f0; font: 600 12.5px Menlo, Consolas, monospace; text-align: center; box-shadow: none; }
.tips-section h2 { font-size: 19px; margin: 0 0 10px; }
.tips-list { margin: 0; padding-left: 20px; }
.tips-list li { font-size: 14px; line-height: 1.65; margin-bottom: 8px; color: #c4c4c4; }
.tips-list li b { color: #fff; }
.tips-shot { display: flex; align-items: center; justify-content: center; }
.tips-shot img { max-width: 100%; height: auto; border-radius: 6px; }
.tips-keys td { font-size: 14px; padding: 8px; vertical-align: top; }
.tips-keys td:first-child { width: 150px; }
.tips-note { margin: 12px 0 0; font-size: 13.5px; }