/* Privacy Policy page: readable long-form layout with a sticky contents list. */

/* The site sets `overflow-x: hidden` on body, which turns body into a scroll container and stops
   `position: sticky` from working. `clip` hides the same overflow without creating one. */
html body { overflow-x: clip !important; overflow-y: visible !important; }

.pp { background: var(--ax-white); padding: clamp(36px, 6vw, 80px) 0; }
.pp__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }

/* Contents */
.pp__toc { position: sticky; top: 110px; align-self: start; }
.pp__toc-box { background: var(--ax-paper, #f6f8fc); border: 1px solid var(--ax-line, #e3e8f2); border-radius: 18px; padding: 8px 8px 12px; }
.pp__toc-box summary { list-style: none; cursor: pointer; padding: 12px 14px; font-family: var(--ax-font-display); font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ax-navy-900); display: flex; justify-content: space-between; align-items: center; }
.pp__toc-box summary::-webkit-details-marker { display: none; }
.pp__toc-box summary::after { content: "\f107"; font-family: "Font Awesome 6 Free", FontAwesome; font-weight: 900; font-size: 1rem; transition: transform .25s; }
.pp__toc-box:not([open]) summary::after { transform: rotate(-90deg); }
.pp__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: pp; max-height: calc(100vh - 230px); overflow-y: auto; }
.pp__toc li { counter-increment: pp; }
.pp__toc a { display: flex; gap: 10px; padding: 8px 14px; border-radius: 10px; font-size: .92rem; line-height: 1.35; color: var(--ax-ink-soft, #4a5877); text-decoration: none; transition: background .2s, color .2s; }
.pp__toc a::before { content: counter(pp, decimal-leading-zero); font-weight: 700; font-size: .78rem; color: var(--ax-cyan-600, #0aa); padding-top: 2px; }
.pp__toc a:hover, .pp__toc a:focus-visible { background: var(--ax-white); color: var(--ax-navy-900); }

/* Body */
.pp__body { max-width: 820px; min-width: 0; font-family: var(--ax-font-sans); font-size: 1.04rem; line-height: 1.8; color: var(--ax-ink-soft, #3d4a66); overflow-wrap: anywhere; }
.pp__date { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px; border-radius: 100px; background: color-mix(in srgb, var(--ax-cyan-500, #19c6d1) 12%, var(--ax-white)); color: var(--ax-navy-900); font-size: .88rem; font-weight: 700; }
.pp__lead { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.7; color: var(--ax-navy-900); }
.pp__body h2 { margin: 2.4em 0 .6em; padding-top: .2em; font-family: var(--ax-font-display); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ax-navy-900); scroll-margin-top: 110px; }
.pp__body h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--ax-cyan-500, #19c6d1), var(--ax-blue-600, #2563eb)); }
.pp__body h3 { margin: 1.6em 0 .4em; font-family: var(--ax-font-display); font-size: 1.15rem; color: var(--ax-navy-900); }
.pp__body p { margin: 0 0 1.1em; }
.pp__body a { color: var(--ax-blue-600, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.pp__body a:hover { color: var(--ax-cyan-600, #0aa); }
.pp__body ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.pp__body ul li { position: relative; margin: 0 0 .65em; padding-left: 26px; }
.pp__body ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--ax-cyan-500, #19c6d1), var(--ax-cyan-600, #0aa)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-cyan-500, #19c6d1) 16%, transparent); }
.pp__body strong { color: var(--ax-navy-900); }

.pp__callout { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; background: var(--ax-navy-900); color: var(--ax-white); font-weight: 700; }
.pp__callout i { color: var(--ax-cyan-300, #5eead4); font-size: 1.2rem; }
.pp__card { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--ax-line, #e3e8f2); border-radius: 20px; background: var(--ax-paper, #f6f8fc); }
.pp__card-title { font-family: var(--ax-font-display); font-weight: 800; color: var(--ax-navy-900); margin-bottom: .8em !important; }
.pp__body ul.pp__contact li { display: flex; gap: 12px; padding-left: 0; }
.pp__body ul.pp__contact li::before { display: none; }
.pp__contact i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ax-white); color: var(--ax-cyan-600, #0aa); box-shadow: 0 4px 14px color-mix(in srgb, var(--ax-navy-900) 10%, transparent); }
.pp__body ul.pp__contact--plain li { display: block; padding-left: 26px; }
.pp__body ul.pp__contact--plain li::before { display: block; }

/* Tablet and below: contents becomes a collapsible block above the text */
@media (max-width: 991.98px) {
    .pp__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pp__toc { position: static; }
    .pp__toc ol { max-height: none; columns: 2; column-gap: 16px; }
    .pp__toc li { break-inside: avoid; }
}
@media (max-width: 575.98px) {
    .pp__toc ol { columns: 1; }
    .pp__body { font-size: 1rem; line-height: 1.75; }
    .pp__lead { font-size: 1.1rem; }
    .pp__body h2 { scroll-margin-top: 90px; }
}
@media (prefers-reduced-motion: reduce) { .pp__toc-box summary::after { transition: none; } }