/* ==========================================================================
   Privacy Policy page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:70689 "Privacy Policy"). Uses the --hr-* tokens declared
   globally in layout-revamp.css.
   Prefix: .pp-

   NOTE: .pp-hero below reproduces the same "Innerpage-hero" component used by
   About Us (.about-revamp) and Contact Us (.contact-revamp), and shares their
   assets rather than approximating them: hero-banner.svg for the band and the
   Pattern-01/Pattern-02 corner wedges beside it.

   The SVG replaces the hand-sampled CSS ramp this file used to carry (still
   present in terms-conditions-revamp.css, which has not been converted). That
   ramp was a flat eleven-stop linear-gradient — it could reproduce the
   teal-to-cream colours but not Figma's dark radial vignette or the fine white
   grain over them, which is what gives the band its liquid look on the other
   inner pages. The asset keeps its own alpha (89% #006D62 fading to 0 by ~82%
   of its box) so it composites over the cream page colour exactly as Figma
   does, and preserveAspectRatio="none" lets it stretch to any width.

   The band is sized off the hero rather than off Figma's 1094px canvas - see
   the note on .pp-hero below for why.

   The policy body itself (h2/h3/p/ul/blockquote below .pp-article) is
   whatever the admin enters in Content Management -> Privacy Policy — the
   same free-text TinyMCE field About Us and Terms & Conditions share
   (App\Models\Content::$content). There's no dedicated "sections" table:
   ContentController::buildTocSections() splits that HTML on its <h2> tags to
   build both the numbered article and the sticky "Contents" nav.
   ========================================================================== */
.privacy-revamp {
    --pp-teal: #12736a;
    --pp-line: #e4dec4;
    --pp-ink: #16150e;
    --pp-body-text: #3e3d30;
    --pp-callout-text: #4a4939;
    --pp-purple: #8e3b78;
    --pp-active: #c87f08;
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    background-color: var(--hr-cream-500);
}
.privacy-revamp .hr-accent { color: var(--hr-yellow-400); }


/* Figma's angular corner wedges inside the Innerpage-hero instance: two DISTINCT
   vectors, "Pattern-01" (left, 305.329x160.658) and "Pattern-02" (right,
   305.29x204.731, mix-blend-mode: overlay), each carrying its own
   cream(#f9f7ea)-to-transparent gradient at 10% fill-opacity baked into the
   asset. Same pair and geometry as .abt-hero-decor / .cta-hero-decor.

   Anchored to the BOTTOM, not the top. On About Us and Contact Us the hero is a
   flat 256px, so pinning a 256px box to the top of the page put the wedges'
   bottom edge on the breadcrumb, which is what the design wants. This hero is
   ~557px tall, so the same top:0 left them stranded up by the nav with the
   breadcrumb 200px below. bottom:152px is the hero's own padding-bottom, which
   lands the box's bottom edge on the breadcrumb hairline - restoring the
   relationship About Us gets for free, and holding it at every breakpoint and
   any hero height rather than only at the one the number was measured for.

   z-index 0 against .pp-hero-inner's 1: the decor is first inside the hero, so
   it paints above the hero's own background but stays behind the title,
   subtitle and breadcrumb.

   The slight blur softens the vector edges to match how the wedges read in
   Figma's own render, where the 10% gradient dissolves into the teal rather
   than showing a hard diagonal. */
.pp-hero-decor {
    position: absolute;
    bottom: 152px;
    left: 0;
    width: 100%;
    height: 256px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.pp-hero-decor img {
    position: absolute;
    bottom: 0;
    max-width: none;
    filter: blur(1.5px);
}
.pp-hero-decor-left {
    left: 0;
    width: 305.329px;
    height: 160.658px;
}
.pp-hero-decor-right {
    right: 0;
    width: 305.29px;
    height: 204.731px;
    mix-blend-mode: overlay;
}
/* RTL keeps each pattern on its own visual side by flipping the pair, so the
   composition mirrors with the text direction instead of the taller wedge
   always sitting on the right. */
[dir="rtl"] .pp-hero-decor-left { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .pp-hero-decor-right { right: auto; left: 0; transform: scaleX(-1); }
/* No responsive height on the band, as on .cta-hero-decor: the wedges are
   pinned to the top of the page rather than to the bottom of a hero that
   shrinks, so only their widths scale — keeping their proportion of the
   viewport instead of swallowing a phone-width one. */
@media (max-width: 767.98px) {
    .pp-hero-decor-left { width: 190px; height: 100px; }
    .pp-hero-decor-right { width: 190px; height: 128px; }
}

.pp-diamond {
    width: 20px;
    height: 20px;
    /* 20 * (sqrt(2) - 1) / 2. A rotated 20px square is 28.28px wide visually but
       still occupies a 20px layout box, so the 4.142px overhang per side would
       make neighbours merge into one continuous zigzag. This margin separates
       the boxes by exactly that overhang, so adjacent tips just touch - corner
       to corner, 0px visible gap, no merge. Carried on the diamond rather than
       as a `gap` on the row so the last one also spaces itself off the line,
       matching .abt-diamond on About Us. */
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

/* ---------- Hero ---------- */
/* The band is painted here, on the hero, not on the page wrapper, so it is
   sized as a PERCENTAGE of the hero and tracks it at every breakpoint and for
   any length of translated title or subtitle.

   background-clip is border-box, so the hero CLIPS this image at its own bottom
   edge — whatever teal is left at that point ends in a hard line. The only way
   to avoid the step is for the ramp to reach zero on that edge exactly.
   hero-banner.svg is fully transparent at 86% of its own box (the teal ramp is
   gone by 81.8%, the dark radial vignette over it by 86.0%), so the box is
   scaled to 1/0.86006 = 116.271% of the hero: the green hits zero just as the
   clip happens, and the fade reads as a fade.

   .pp-body's padding-top lives on this element's padding-bottom, so the hero's
   box - and therefore the band - carries on past the breadcrumb instead of
   stopping on it.

   padding-bottom is 152px against a margin-bottom of -80px. The 152 is what the
   ramp gets to run through; the -80 pulls .pp-body back up over the tail of it,
   so what you actually SEE between the breadcrumb hairline and the Contents card
   is 152 - 80 = 72px. Splitting the two is the point: the gap stayed tight at
   72px while the band grew, and the teal under the breadcrumb came back from
   ~11% to ~26% - enough for the breadcrumb and its hairline (cream on teal, so
   invisible once the ground turns cream) to read again. With a plain 72px
   padding and no negative margin, the ramp died on the hairline and took them
   with it.

   The green now fades out ~80px below the card's top edge rather than exactly on
   it. That tail is under 11% teal the whole way and the card has its own opaque
   background, so it shows only as a faint wash beside the card - not the ~380px
   of green over the article that the original fixed 1094px band produced.

   Two other things read these numbers, so keep them in step: .pp-hero-decor's
   `bottom` is the full 152px (it anchors the wedges to the hairline, not to the
   hero's bottom edge), and the band height is a percentage of the hero, so it
   grows and shrinks with the padding.

   This replaces a fixed `background-size: 100% 1094px` on the page wrapper.
   1094px is the Figma canvas height, but the hero renders ~560px tall, so the
   green ran ~330px into the article instead of stopping above it.

   padding-inline is 160px, not the 24px this used to carry: that is the inset
   .header-revamp .container-xl uses at >=992px, and what .abt-hero/.abt-intro
   use on About Us, so the title, breadcrumb and article all line up with the
   logo and nav above them. The 40px/16px steps below match About Us too. */
.pp-hero {
    position: relative;
    padding: 200px 160px 152px;
    margin-bottom: -80px;
    /* Two layers. Underneath, the banner. Over it, a cream wash that is fully
       opaque across the bottom 80px - the strip the negative margin tucks under
       .pp-body - and fades to nothing 152px up, at the breadcrumb hairline.

       This is what stops the green grazing the article. The banner's own ramp is
       too gradual to be both strong at the breadcrumb and gone 72px later, and
       cutting it short instead just moved the problem: clip it and you get a
       hard line, shorten it and the breadcrumb washes out. Masking the tail
       keeps the ramp long where it is wanted and accelerates it where it is not,
       so the teal reads at ~26% on the hairline and is at exactly 0 by the
       Contents card.

       Stops are px from the bottom, not percentages, so they stay pinned to the
       card and the hairline whatever the hero's height - a percentage would
       drift as the title wraps or the breakpoint changes. Keep 80px in step with
       margin-bottom and 152px with padding-bottom. The cream is --hr-cream-500's
       literal value: a gradient needs the alpha-0 stop to be that same colour
       (fading to `transparent` can grey out mid-ramp), and a var() cannot carry
       alpha. */
    background-image:
        linear-gradient(to top,
            var(--hr-cream-500) 0,
            var(--hr-cream-500) 80px,
            rgba(249, 247, 233, 0) 152px),
        var(--pp-hero-bg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%, 100% 116.271%;
}
.pp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.pp-hero-top {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, not center: this row is the 72px title against a 151px column
       (subtitle + Download PDF), so centring dropped the title 40px and its line
       no longer read level with the subtitle's first line. Aligning the tops
       starts both blocks of text together. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.pp-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-cream-500);
    margin: 0;
    max-width: 640px;
}
.pp-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-width: 560px;
}
.pp-subtitle {
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-cream-600, #e3e1d4);
    margin: 0;
}

/* Decorative, not wired to a download — no PDF export exists yet. Same
   convention as .agd-pdf-btn (Agenda Details) and .tnc-pdf-btn. */
/* Same pill as the home page hero's "Culture" button (.hr-btn +
   .hr-btn-primary): 2px outset white border with the bottom edge dropped, and
   Figma's five stacked shadows - one inset highlight along the top plus four
   ambient layers - rather than the single flat 0 3px 6px this carried before,
   which read as a plain orange rectangle next to the real component.
   Geometry is .hr-btn's: 14.5px/22.5px padding against a 24px line-height puts
   the box at 56px tall, the same as the hero button.

   Duplicated here rather than adding the hr-btn classes in the blade: the
   .hr-btn base is scoped to .header-revamp/.footer-revamp/.home-revamp and
   would not apply on this page, and this file loads after layout-revamp.css so
   its own border/box-shadow would override the shared .hr-btn-primary anyway.
   Keep in step with .hr-btn-primary in layout-revamp.css. */
.pp-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
    /* Glass + jump, kept in step with .agd-pdf-btn on the Agenda Details page
       (the convention both blades cite). The glass half is the shared hover
       glow, wired up by adding this class to the three lists in
       layout-revamp.css; the jump is the 2px lift below.

       This replaces a note saying the lift was deliberately withheld because
       the control is a decorative placeholder (aria-disabled, no export wired
       up) and a transform would advertise an interaction that does not exist.
       That reasoning still holds on its own terms - it is overridden here for
       consistency with the other orange buttons, on request. Both buttons are
       currently commented out in the markup, so none of this renders until
       they are switched back on. */
    transition: transform .2s ease-in-out;
    cursor: default;
}
.pp-pdf-btn img { width: 20px; height: 20px; }
.pp-pdf-btn:hover { transform: translateY(-2px); color: var(--hr-cream-50); }

.pp-breadcrumb-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
}
/* Full-bleed hairline after the breadcrumb row (Figma), not above it —
   escapes .pp-hero-inner's max-width the same way .agd-breadcrumb-row::after
   does, reaching both viewport edges. */
.pp-breadcrumb-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}
/* Type scales with the viewport so the trail always stays on one line. The
   last crumb is the CMS page title, and its length varies a lot - "TERMS AND
   CONDITIONS" needs 421px at 20px, which overflows a 430px phone (398px of
   content width) where "PRIVACY POLICY" still fits. Fixed breakpoints kept
   missing cases like that one.

   Measured: the trail needs roughly 18.6px of width per 1px of font size, plus
   ~33px for gaps and separators, against (100vw - 32px) of space. 5vw - 3px
   satisfies that from 320px up with margin to spare, and the 20px ceiling means
   desktop keeps the Figma size untouched. Gap scales alongside so the spacing
   stays proportional instead of dominating at small sizes. */
.pp-breadcrumb {
    display: flex;
    align-items: center;
    /* Wrap as a last resort. Each crumb is nowrap/no-shrink below so a phrase
       is never split mid-word, but the last crumb is the CMS page title, so its
       length is not fixed - with nowrap on the row too, a long title simply
       disappeared past the viewport edge (at 320px the trail needs 341px and
       the current crumb was clipped). Wrapping keeps every crumb readable; at
       375px and up the trail still sits on one line. */
    flex-wrap: wrap;
    row-gap: 4px;
    gap: clamp(8px, 2.2vw, 12px);
    font-size: clamp(13px, calc(5vw - 3px), 20px);
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* nowrap + no shrink keeps each crumb whole. The row is already flex-wrap:
   nowrap, but the crumbs are shrinkable flex items, so they were squeezed
   below their text width and broke internally - "ABOUT BILARABY" and "PRIVACY
   POLICY" each split over two lines on a phone even though the row itself had
   room. The separators stay shrinkable; they are 1px and have nothing to
   break. */
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.pp-breadcrumb a,
.pp-breadcrumb span:not(.pp-breadcrumb-sep) {
    opacity: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.pp-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.pp-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.pp-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.pp-breadcrumb-sep {
    width: 1px;
    /* Tracks the type: a fixed 16px rule looked oversized beside 13px text. */
    height: clamp(11px, 0.9em, 16px);
    background: rgba(249, 247, 234, .5);
}
.pp-hero-divider { display: none; }
@media (min-width: 1200px) {
    .pp-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    .pp-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so
           an extra negative offset here would eat into it. */
        margin-inline-start: 0;
    }
}

/* ---------- Body: sidebar + article ---------- */
.pp-body {
    position: relative;
    /* app.css sets a blanket `section { overflow: hidden }` — left at that,
       it makes this section (not the viewport) the sticky containing block
       for .pp-toc below, so the sidebar scrolls away with the page instead
       of following it. */
    overflow: visible;
    /* padding-top now lives on .pp-hero's padding-bottom — see the note
       there. Same 80px gap, but inside the hero's box so the band covers it. */
    padding: 0 160px 120px;
}
.pp-body-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

/* ---------- Contents sidebar ---------- */
.pp-toc {
    position: sticky;
    top: 24px;
    flex: 0 0 340px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    border: 1px solid #fff;
    border-radius: 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .8) 76%, rgba(255, 255, 255, .6) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6px rgba(255, 255, 255, .23);
}
.pp-toc-head { display: flex; align-items: center; gap: 12px; }
/* Abstract compass mark: an outlined diamond behind a smaller solid one,
   both tilted — plain CSS shapes, no icon asset needed. */
.pp-toc-icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.pp-toc-icon::before,
.pp-toc-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.pp-toc-icon::before {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--pp-purple);
}
/* No top override: the shared rule above centres both squares on the 32px box
   (top/left 50% + translate(-50%,-50%)). A top:22% here put the filled
   diamond's centre 9px above the outline's, so the solid shape sat up against
   the outline's top vertex with an empty gap toward the bottom instead of
   nesting concentrically. */
.pp-toc-icon::after {
    width: 11px;
    height: 11px;
    background: var(--pp-purple);
}
.pp-toc-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0;
}
.pp-toc-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}
.pp-toc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 13px;
    color: var(--hr-brown-500);
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.pp-toc-link:hover { color: var(--hr-brown-500); text-decoration: none; background: rgba(0, 0, 0, .03); }
.pp-toc-link-number { width: 22px; flex-shrink: 0; font-weight: 700; }
.pp-toc-link.is-active {
    background: rgba(232, 147, 13, .1);
    color: var(--pp-active);
    font-weight: 700;
}
.pp-toc-link.is-active .pp-toc-link-number { color: var(--pp-active); }
.pp-toc-note {
    padding-top: 30px;
    border-top: 1px solid #eae3c9;
    font-size: 16px;
    line-height: 24px;
    color: #6b6a57;
}
.pp-toc-note a { color: inherit; text-decoration: underline; }

/* ---------- Article ---------- */
.pp-article {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.pp-section { scroll-margin-top: 24px; }
.pp-section-head {
    display: flex;
    align-items: center;
    gap: 27px;
    margin-bottom: 32px;
}
.pp-section-number {
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
    color: var(--pp-teal);
    flex-shrink: 0;
}
.pp-section-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--pp-line);
}
.pp-section-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--pp-ink);
    margin: 0 0 32px;
}

/* Admin-authored (TinyMCE) section body: paragraphs, sub-headings, lists and
   the occasional callout note. */
.pp-prose {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-size: 20px;
    line-height: 28px;
    color: var(--pp-body-text);
}
.pp-prose > :first-child { margin-top: 0; }
.pp-prose > :last-child { margin-bottom: 0; }
.pp-prose p { margin: 0; }
.pp-prose p:empty { display: none; }
.pp-prose strong,
.pp-prose b { color: var(--pp-ink); font-weight: 700; }
.pp-prose a { color: var(--hr-blue-500, #005087); text-decoration: underline; }
.pp-prose h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--pp-ink);
    margin: 0;
}
.pp-prose ul,
.pp-prose ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-prose li {
    position: relative;
    padding: 12px 0 12px 32px;
    font-size: 20px;
    line-height: 28px;
}
[dir="rtl"] .pp-prose li { padding: 12px 32px 12px 0; }
.pp-prose li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 22px;
    width: 11.3px;
    height: 11.3px;
    background: var(--pp-teal);
    transform: rotate(45deg);
}
/* Callout note: TinyMCE's native "Blockquote" format, restyled to the design's
   bordered cream card rather than a quote-with-rule. */
.pp-prose blockquote {
    margin: 0;
    padding: 25px 33px;
    background: #fffdf5;
    border: 1px solid #eae3c9;
    border-inline-start: 1px solid #eae3c9;
    border-radius: 19px;
    font-size: 20px;
    line-height: 28px;
    color: var(--pp-callout-text);
}
.pp-prose img { display: block; width: 100%; height: auto; border-radius: 24px; }
.pp-prose table { width: 100%; border-collapse: collapse; }
.pp-prose td,
.pp-prose th { border: 1px solid rgba(0, 0, 0, .1); padding: 12px; }

/* Fallback for content with no <h2> yet: one plain block, no sidebar. */
.pp-plain {
    max-width: 900px;
}

/* ---------- Closing note + back to top ---------- */
.pp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* No margin-top or padding-top: .pp-article is a flex column with gap:60px,
       so the closing note is already separated from the last section by the same
       rhythm as every other block in the article. The 60px margin and 32px
       padding stacked on top of that gap for a 152px void - the padding existed
       only to sit under the 1px rule that has since been removed, and the margin
       to hold it off that rule. With the rule gone both were dead space. */
}
.pp-foot-note {
    font-size: 16px;
    line-height: 24px;
    color: var(--pp-callout-text);
    margin: 0;
}
.pp-foot-note a { color: var(--pp-teal); text-decoration: underline; }
/* Same pill as the home page's "Discover More" (.hr-btn + .hr-btn-ghost-dark):
   a 20% white fill and matching 1.5px white border, over Figma's single
   0 4px 6.1px/6% shadow rather than the flatter 0 3px 6px/3% this carried.

   Padding is .hr-btn's 14.5px/22.5px, not the 16px/24px that was here: against
   a 24px line-height and 1.5px borders top and bottom, 16/24 made the box 59px
   tall where every other revamp pill is 56px. 14.5 + 24 + 14.5 + 3 = 56.

   Duplicated rather than reusing the hr-btn classes because that base is scoped
   to .header-revamp/.footer-revamp/.home-revamp and does not reach this page.
   Keep in step with .hr-btn-ghost-dark in home-revamp.css. */
.pp-back-to-top {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    border: 1.5px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .2);
    color: var(--hr-brown-900, #0b0b05);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: all .2s ease-in-out;
}
/* Keeps the 2px lift .hr-btn gives its pills on hover - this one is a real
   working button, so unlike .pp-pdf-btn the affordance belongs here. */
.pp-back-to-top:hover { transform: translateY(-2px); color: var(--hr-brown-900, #0b0b05); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .pp-hero, .pp-body { padding-inline: 40px; }
    .pp-title { font-size: 48px; line-height: 56px; }
    .pp-body-inner { gap: 40px; }
    .pp-toc { flex-basis: 300px; width: 300px; }
}
@media (max-width: 991.98px) {
    .pp-hero { padding-top: 140px; }
    .pp-title { font-size: 40px; line-height: 48px; }
    .pp-hero-copy { max-width: 100%; }
    .pp-body-inner { flex-direction: column; }
    .pp-toc { position: static; top: auto; width: 100%; flex-basis: auto; }
    .pp-article { gap: 48px; }
    .pp-section-title { font-size: 32px; line-height: 40px; }
}
/* ---------- Phone board ----------
   Every number below is measured off the 402px artboard, Figma node
   40004843:83249 ("Privacy Policy"). The frame tree gives absolute x/y per
   node, so each value here is a DELTA between siblings rather than a figure
   read off one node - the derivations are named per rule.

   The hero and the body do NOT share a gutter on this board: the hero's
   content frame (40004843:83254) sits at x=24 on a 355 column, while the body
   column (the Card, 40004843:83291, and the article frame 40004843:83312) sits
   at x=20 on a 362 one. They were collapsed to a single 16px here, which is
   why neither matched. Split, and stated as two rules so a later edit cannot
   silently re-merge them. */
@media (max-width: 767.98px) {
    .pp-hero { padding-inline: 24px; padding-top: 120px; }
    /* 60px top and bottom: the Card starts at y=60 inside the body frame
       (40004843:83289), and that frame is 6826 tall against a last child
       ending at 6766. The 120px this carried from the base rule was double the
       board's bottom inset. */
    .pp-body { padding-inline: 20px; padding-top: 60px; padding-bottom: 60px; }

    /* Title and description centre on the phone board, unlike desktop. Both
       are centred in the artboard by geometry, not by eye: the title
       (40004843:83256) is 346 wide at x=4.5 inside its 355 frame - (355-346)/2
       - and the Download PDF button (40004843:83259) is 164 at x=95.5, which
       is (355-164)/2. The description is a full-width 355 box, so its centring
       is text-align rather than a centred box.

       The breadcrumb is deliberately NOT centred: its own frame
       (40004843:83260) is x=0 full-width and renders left, so it stays on the
       leading edge under the centred block. */
    .pp-hero-top {
        flex-direction: column;
        align-items: center;
        /* 16px: the title ends at 98+40=138 inside frame 40004843:83255 and the
           description frame starts at 154. */
        gap: 16px;
    }
    .pp-title { font-size: 32px; line-height: 40px; text-align: center; max-width: none; }
    /* align-items as well as text-align: .pp-hero-copy is a flex column, so the
       Download PDF pill inside it takes its cross-axis placement from here, not
       from the text alignment - it is commented out in the markup today, but
       leaving these disagreeing would put it back on the left the moment it is
       restored. */
    .pp-hero-copy { align-items: center; text-align: center; max-width: none; }
    /* 16/24, giving the artboard's two-line 355x48 description box
       (40004843:83258) - it was inheriting the 24/32 desktop size. */
    .pp-subtitle { font-size: 16px; line-height: 24px; }
    /* 24px, requested. The board has 16 here (the copy frame ends at 316,
       the breadcrumb frame starts at 332), but that left the trail crowded
       against the standfirst - .pp-breadcrumb-row already carries 24px
       below it, so matching that sits the breadcrumb evenly between the
       copy and the hairline. Both pages keep the same value. */
    .pp-hero-inner { gap: 24px; }
    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps, a
       12px separator. Replaces the fluid 13-20px clamp this page carried. */
    .pp-breadcrumb { font-size: 12px; gap: 8px; }
    .pp-breadcrumb-sep { height: 12px; }

    /* 32px between the Contents card and the article: the Card ends at
       60+628=688 and the article frame starts at y=720. */
    .pp-body-inner { gap: 32px; }
    /* 20px inset, from the card's own rows - each is 322 wide at x=20 inside
       the 362 card (e.g. 40004952:90245). The head row is 65 tall with its icon
       at (20,20), so the 32px block padding this carried overshot the board. */
    .pp-toc { padding: 20px; gap: 16px; }

    /* The closing note stays full width (its container is 362 in the artboard,
       the same as the article column), so align-items stays at the default
       stretch - centring the flex items would shrink-wrap the note too. Only
       the button centres, and it does so on its own: Figma places it at x=134.5
       on the 402 board, which is (402-133)/2 (node 40004843:83605). 32px above
       it, from the article frame ending at 6686 and the button starting at
       6718. */
    .pp-foot { flex-direction: column; align-items: stretch; gap: 32px; }
    .pp-back-to-top { align-self: center; }

    /* The painted band's LENGTH, sampled from Figma's own render rather than
       guessed. Down the left gutter of node 40004843:83251 the teal lightens
       gradually across the whole hero - still (161,195,185) at y=410 against a
       421px hero - and does not reach cream (249,247,233) until y=536. So the
       band runs 115px PAST the hero's bottom edge, behind the top of the
       Contents card, and at the point where the body begins it is still teal.

       That is the opposite of what this had. The base rule finishes the ramp
       80px ABOVE the body's start, so the body always begins on flat cream and
       the band stops short - which is what read as too little colour here.

       So: overlap 115px instead of 80, and a ramp that is fully cream at the
       hero's own bottom edge (115px into the body) and gone 135px above it -
       the height of Figma's own transition wedge, node 40004843:83253 (134.3).
       padding-bottom is that 115px overlap plus the artboard's 16px between the
       breadcrumb and the hero's bottom.

       The 135px ramp against a 131px padding puts the transparent stop 4px
       above the breadcrumb's baseline box, so the crumbs sit on unwashed teal -
       the failure mode of the previous attempt, which ramped from the hero's
       bottom edge and left them barely legible. */
    .pp-hero {
        padding-bottom: 131px;
        margin-bottom: -115px;
        background-image:
            linear-gradient(to top,
                var(--hr-cream-500) 0,
                rgba(249, 247, 233, 0) 135px),
            var(--pp-hero-bg);
    }
}