/* ==========================================================================
   PRIVACY POLICY — Desktop (1280px – 1920px)
   hero (100vh) + main + shared footer, same composite-page pattern as
   terms.html. Total height incl. footer: 782.7rem (7827px).
   ========================================================================== */

.privacy-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

/* Top-left nav row — flex + gap holds a 40px gap automatically in
   every language, no manual html[data-lang] overrides needed. */
.privacy-nav {
    position: absolute;
    left: 5rem;
    top: 5rem;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    z-index: 1;
}

.privacy-nav-link {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.privacy-nav-link:hover {
    opacity: 0.5;
}

.privacy-nav-link--homepage {
    text-transform: uppercase;
}

.privacy-hero-fone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.privacy-hero-heading {
    position: absolute;
    left: 5rem;
    bottom: 5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 11rem;
    line-height: 8.5rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    white-space: pre-line;
    z-index: 1;
}

/* Settings/message/shop buttons sit lower here than the
   actions.desktop.css default (bottom: 7rem). */
.settings-btn,
.message-btn,
.shop-wrap {
    bottom: 5rem;
}

/* Keeps the settings panel exactly 14px above the button's top edge,
   matching the button's raised position on this page. */
.settings-panel {
    bottom: 11rem;
}

.privacy-main {
    position: relative;
    width: 100%;
    height: 656.5rem;
    background-color: #000000;
    overflow: hidden;
}

/* The whole legal text is one normal-flow column in a single
   absolutely-positioned wrapper — paragraphs wrap to an unknown number
   of lines, so we can't pre-compute their height to stack headings and
   paragraphs with absolute "top" offsets. margin-top does the "Npx
   below the previous block" job regardless of how tall each block
   turns out: 150px above a numbered section heading ("2. ..."), 80px
   above a subsection heading ("2.1. ..."), 40px between paragraphs. */
.privacy-content {
    position: absolute;
    left: 96rem;
    top: 8rem;
    width: 86rem;
}

.privacy-section-heading {
    margin-top: 15rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 4rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 1;
    white-space: pre-line;
}

.privacy-section-heading--first {
    margin-top: 0;
}

.privacy-subsection-heading {
    margin-top: 8rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 4rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 1;
    white-space: pre-line;
}

/* Justified body paragraph, matching the FAQ answer text treatment. */
.privacy-paragraph {
    margin-top: 4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.05em;
    /* rgba, not color + opacity — an ancestor opacity would compound
       with .privacy-em's own color below and dim it too much. */
    color: rgba(255, 255, 255, 0.5);
    text-align: justify;
}

/* Emphasised words/phrases within a paragraph. "shattics", "shattics.com"
   and hello@shattics.com are always emphasised wherever mentioned. */
.privacy-em {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* Bulleted list item — tight spacing between items (no 40px paragraph
   gap), a bullet marker, and text indented to line up after it. Only
   the first item in a list keeps the normal 40px gap from the intro
   line above the list. */
.privacy-list-item {
    position: relative;
    margin-top: 1rem;
    padding-left: 3rem;
}

.privacy-list-item--first {
    margin-top: 4rem;
}

.privacy-list-item::before {
    content: "•";
    position: absolute;
    left: 1rem;
    top: 0;
}

/* A paragraph that's emphasised in full, not just a phrase within it. */
.privacy-paragraph--em {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* Plain contact link (email), styled like the emphasis but as a real
   link out to the message page. */
a.privacy-em {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 0.4rem;
    transition: color 0.2s ease;
}

a.privacy-em:hover {
    color: #ffffff;
}