@charset "UTF-8";

/* ==========================================================================
   Privacy Policy Page Styles
   ========================================================================== */

.l-main {
    padding-top: 40px;
    padding-bottom: 80px;
    background-color: var(--color-bg);
}

.p-privacy-hero {
    text-align: center;
    padding: 80px 0 60px;
}

.p-privacy-hero__subtitle {
    display: block;
    font-family: var(--font-gothic);
    font-size: 14px;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* Page Title (extends c-page-title) */
.c-page-title {
    font-family: var(--font-shippori);
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .c-page-title {
        font-size: 32px;
    }
}

/* Container */
.p-privacy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--font-gothic);
}

/* Lead Text */
.p-privacy-lead {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 60px;
}

/* Section */
.p-privacy-section {
    margin-bottom: 50px;
}

/* Headings (h3 in HTML structure for semantics within main > h2, but visually h2-like as per prompt) */
/* The prompt asked for "h2" for headings like "1. Definition".
   In my HTML I nested them under the page title h2, so I used h3.
   I should probably stick to what I wrote in HTML or adjust HTML if strict adherence to prompt "using h2 for headings" meant h2 tags.
   However, semantically page title is H2 (H1 is logo usually or main heading).
   Let's style h3 to look appropriate.
*/
.p-privacy-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-family: var(--font-gothic);
}

/* Body Text */
.p-privacy-section p {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 0;
    text-align: justify;
}

@media (min-width: 768px) {
    .p-privacy-section h3 {
        font-size: 20px;
    }

    .p-privacy-lead,
    .p-privacy-section p {
        font-size: 16px;
    }
}