/* ============================================================
   pages.css — the four secondary-page skins.
   Loaded after styles.css (tokens) and shell.css (furniture).
   Document skin: quiet reading register for privacy, terms,
   support and FAQ. Editorial, index and press skins restyle the
   existing class names from the old design in place.
   ============================================================ */

/* ---------- document skin ---------- */

.doc {
    padding: 56px 0 96px;
}
.doc__inner {
    max-width: 760px;
}
.doc__title {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 38px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.015em;
    color: var(--lp-ink);
    margin: 0 0 12px;
    text-wrap: pretty;
}
.doc__meta {
    font-size: 14.5px;
    color: var(--lp-label);
    margin: 0 0 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--lp-rule);
}
.doc__body {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--lp-text);
    max-width: 68ch;
}
.doc__body h2 {
    font-family: var(--font);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.35;
    color: var(--lp-ink);
    letter-spacing: -0.005em;
    margin: 48px 0 14px;
    text-wrap: pretty;
}
.doc__body h2:first-child {
    margin-top: 0;
}
/* styles.css still sets `p { color: var(--muted) }` for the retired warm
   design. An element selector beats inheritance, so without an explicit
   colour here every body paragraph on the site renders warm grey instead of
   the skin's own ink. Scoped to the skins so the landing is left alone. */
.doc__body p {
    margin: 0 0 18px;
    color: inherit;
}
.doc__body ul {
    margin: 0 0 18px;
    padding-left: 22px;
}
.doc__body li {
    margin: 0 0 10px;
}
.doc__body strong {
    color: var(--lp-ink);
    font-weight: 600;
}
.doc__body a {
    color: var(--lp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--lp-rule-strong);
}
.doc__note {
    max-width: 68ch;
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--lp-rule);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--lp-label);
}

@media (max-width: 640px) {
    .doc {
        padding: 36px 0 72px;
    }
    .doc__title {
        font-size: 30px;
    }
    .doc__body {
        font-size: 17px;
    }
    .doc__body h2 {
        margin-top: 40px;
    }
}

/* ---------- editorial skin (guide + articles) ---------- */

.ed {
    padding: 56px 0 96px;
}
.ed__header {
    max-width: 820px;
    padding-bottom: 36px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--lp-rule);
}
.ed__title,
.article__title {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 46px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 0 0 14px;
    text-wrap: pretty;
}
.ed__meta,
.article__meta {
    font-size: 14.5px;
    color: var(--lp-label);
    margin: 0;
}
.ed__inner {
    max-width: 820px;
}
.article__body {
    font-size: 19px;
    line-height: 1.7;
    color: var(--lp-text);
    max-width: 68ch;
}
.article__body h2 {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 30px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.015em;
    color: var(--lp-ink);
    margin: 56px 0 18px;
    text-wrap: pretty;
}
.article__body h2:first-child {
    margin-top: 0;
}
.article__body h3 {
    font-family: var(--font);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: var(--lp-ink);
    margin: 36px 0 12px;
}
.article__body p {
    margin: 0 0 22px;
    color: inherit;
}
.article__body ul,
.article__body ol {
    margin: 0 0 22px;
    padding-left: 24px;
}
.article__body li {
    margin: 0 0 12px;
}
.article__body strong {
    color: var(--lp-ink);
    font-weight: 600;
}
.article__body a {
    color: var(--lp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--lp-rule-strong);
}
.article__hero,
.article__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--lp-panel-line);
    margin: 40px 0;
}
.article__body .faq,
.article__cta {
    background: var(--lp-panel);
    border: 1px solid var(--lp-panel-line);
    border-radius: 12px;
    padding: 32px;
    margin: 48px 0 0;
}
.article__cta {
    text-align: center;
}

@media (max-width: 640px) {
    .ed {
        padding: 36px 0 72px;
    }
    .ed__title,
    .article__title {
        font-size: 32px;
    }
    .article__body {
        font-size: 18px;
    }
    .article__body h2 {
        font-size: 25px;
        margin-top: 44px;
    }
    .article__body .faq,
    .article__cta {
        padding: 24px;
    }
}

/* ---------- index skin (article listing) ---------- */

.articles-index {
    padding: 56px 0 96px;
    max-width: 1180px;
    margin: 0 auto;
}
.articles-index__title {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 46px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 0 0 14px;
}
.articles-index__subtitle {
    font-size: 19px;
    color: var(--lp-soft);
    margin: 0 0 48px;
    max-width: 60ch;
}
.articles-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.article-card {
    display: block;
    height: 100%;
    background: var(--lp-panel);
    border: 1px solid var(--lp-panel-line);
    border-radius: 12px;
    padding: 28px;
    transition: border-color 0.15s ease;
}
.article-card:hover {
    border-color: var(--lp-rule-strong);
}
.article-card__title {
    font-family: var(--font);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.4;
    color: var(--lp-ink);
    margin: 0 0 10px;
    text-wrap: pretty;
}
.article-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-soft);
    margin: 0;
}

@media (max-width: 640px) {
    .articles-index {
        padding: 36px 0 72px;
    }
    .articles-index__title {
        font-size: 32px;
    }
    .articles-index__list {
        grid-template-columns: 1fr;
    }
}

/* ---------- press skin ---------- */

.press-hero {
    padding: 56px 0 64px;
    border-bottom: 1px solid var(--lp-rule);
}
.press-hero__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}
.press-hero__title {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 46px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 0 0 16px;
}
.press-hero__tagline {
    font-size: 19px;
    color: var(--lp-soft);
    margin: 0 0 24px;
}
.press-hero__details {
    font-size: 15px;
    color: var(--lp-text);
}
.press-hero__phone-img {
    width: 100%;
    height: auto;
    filter: var(--lp-shadow-device);
}
.press-section {
    padding: 64px 0;
    border-bottom: 1px solid var(--lp-rule);
}
.press-section > .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}
.press-section__title {
    font-family: var(--font-display);
    font-weight: var(--lp-weight-display);
    font-size: 30px;
    line-height: var(--lp-lh-display);
    letter-spacing: -0.015em;
    color: var(--lp-ink);
    margin: 0 0 24px;
}
.press-section__body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--lp-text);
}
.press-section__body p,
.press-hero__details p,
.press-features__col p {
    color: inherit;
}
.press-section__body--narrow {
    max-width: 68ch;
}
.press-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.press-features__col {
    background: var(--lp-panel);
    border: 1px solid var(--lp-panel-line);
    border-radius: 12px;
    padding: 28px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--lp-text);
}
.press-carousel__slide img {
    border-radius: 10px;
    filter: var(--lp-shadow-device);
}
.press-carousel__dot {
    background: var(--lp-rule-strong);
}
.press-carousel__dot--active {
    background: var(--lp-ink);
}
.press-download {
    display: inline-block;
    background: var(--lp-ink);
    color: var(--lp-ground) !important;
    border-radius: var(--lp-radius-btn);
    padding: 15px 30px;
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 900px) {
    .press-hero__top {
        grid-template-columns: 1fr;
    }
    .press-features {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .press-hero__top,
    .press-section > .container {
        padding: 0 24px;
    }
    .press-hero__title {
        font-size: 32px;
    }
    .press-section {
        padding: 48px 0;
    }
}