/* Lightweight styles for the iOS settings web pages. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #111; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}
a { color: #111; }
img { max-width: 100%; height: auto; }
.page-wrapper, .main { background: #fff; }
.container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
[class*="col-"] { width: 100%; padding: 8px; }
.bg-gray { background: #f6f6f7; }
.bg-white { background: #fff; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mt-5 { margin-top: 20px; }
.pb-5 { padding-bottom: 24px; }
.lead { font-size: 16px; line-height: 1.5; color: #333; }

.category-banner-container { background: #f6f6f7; }
.category-banner {
    padding: 28px 16px 22px;
    text-align: center;
}
.category-banner h3 {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.home-search-wrapper {
    display: flex;
    max-width: 520px;
    margin: 0 auto;
    height: 44px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e6e6e8;
}
.home-search-wrapper .form-control {
    flex: 1;
    border: 0;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    background: #fff;
}
.home-search-wrapper .btn {
    width: 48px;
    border: 0;
    background: #fff;
    font-size: 20px;
    color: #222;
}
.home-search-wrapper .btn::before { content: "⌕"; }

.nav-tabs {
    display: flex;
    list-style: none;
    margin: 16px 0;
    padding: 0;
    border-bottom: 1px solid #eee;
}
.nav-tabs .nav-item { flex: 1; }
.nav-tabs .nav-link {
    display: block;
    text-align: center;
    padding: 12px 8px;
    text-decoration: none;
    color: #666;
    font-weight: 600;
}
.nav-tabs .nav-link.active {
    color: #111;
    box-shadow: inset 0 -2px 0 #f13ab1;
}

.feature-div {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 16px;
    min-height: 96px;
}
.feature-div span { display: block; color: #888; font-size: 13px; margin-bottom: 6px; }
.feature-div h5 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.35; }
a.articals-hover { display: block; text-decoration: none; color: inherit; }

.features-section { padding: 8px 0 28px; }
.features-section .subtitle, h2.subtitle {
    text-align: center;
    font-size: 22px;
    margin: 8px 0 16px;
}
.feature-box {
    background: #fff;
    border-radius: 16px;
    padding: 8px 16px 16px;
    border: 1px solid #f0f0f2;
    height: 100%;
}
.general-img { display: block; }
.general-img img { width: 48px; height: 48px; object-fit: contain; margin: 12px 0; }
.feature-box-content h3 { margin: 0 0 8px; font-size: 18px; }
ul.help-center-link { margin: 0; padding: 0 0 0 18px; }
ul.help-center-link li { margin: 6px 0; }
ul.help-center-link li a { color: #111; }
ul.help-center-link li a.highlight-link { color: #f13ab1; font-weight: 650; text-decoration: none; }
ul.help-center-link li:last-child { list-style: none; margin-left: -18px; margin-top: 12px; }
.highlight-link i { display: none; }
.highlight-link::after { content: " ›"; }

.about-section { padding: 8px 0 32px; }
.about-section h2, .pp-hero h1 { font-size: 28px; margin: 8px 0; }
ul.legal-content-section { margin: 8px 0 16px 18px; padding: 0; }
ul.legal-content-section li { margin: 8px 0; }

.pp-hero { padding: 8px 0 4px; }
.pp-kicker { color: #f13ab1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin: 12px 0 4px; }
.pp-hero p { color: #555; margin: 0 0 8px; }
.pp-card { padding: 4px 0 32px; }
.pp-body, .about-section { color: #333; font-size: 16px; line-height: 1.6; }
.pp-body p, .about-section p { margin: 0 0 12px; }
.pp-body a, .about-section a { color: #f13ab1; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; margin: 0; font-size: 14px; color: #666; }
.breadcrumb a { color: #f13ab1; text-decoration: none; }
.help-center-link { list-style: none; margin: 0; padding: 0; }
.help-center-link li { border-bottom: 1px solid #eee; }
.help-center-link a { display: block; padding: 14px 4px; text-decoration: none; }
.help-center-link a::after { content: "›"; float: right; color: #c7c7cc; }