/* ==========================================================================
   Nextalent — Privacy Notice (legal document layout)
   Page-scoped styles. Loaded after style.css, so it wins ties.
   Design frame: 1280px, 52px gutter → 1176px content column.
   ========================================================================== */

.s-privacy-hero,
.s-privacy-doc,
.s-privacy-governance {
  /* measured off the frame — no token covers these warm document tints */
  --privacy-band:    #FDF8FC;   /* pale lilac paper the document sits on   */
  --privacy-beige:   #F5EDE2;   /* contents card / contact panel fill      */
  --privacy-beige-2: #F5ECE2;   /* small tinted sub-cards                  */
  --privacy-beige-3: #F3EDE6;   /* numbered rows                           */
  --privacy-badge:   #EBD8C9;   /* numeral discs                           */
  --privacy-burnt:   #B4652F;   /* the solid terracotta e-mail tile        */
  --privacy-orange:  #F08A5D;   /* the Figma's orange document action      */
  --privacy-label:   #A08A79;   /* muted brown kicker, as on About         */
}

/* ==========================================================================
   1 — hero band
   ========================================================================== */
.s-privacy-hero {
  background: linear-gradient(95deg,
              #E9E7DB 0%, #F5EDE2 26%, #F5EDE2 60%, #F3E2D1 100%);
  padding-block: 52px 56px;
}

.s-privacy-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.s-privacy-hero__copy { min-width: 0; }

/* the pill has to survive the Indonesian string, which is four times longer
   than the English one — so it wraps instead of forcing the page wide */
.s-privacy-hero__tag {
  align-items: flex-start;
  max-width: 100%;
  padding: 8px 16px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .15em;
  text-align: left;
}
.s-privacy-hero__tag::before { margin-top: 6px; }
.s-privacy-hero__sep { opacity: .45; }

.s-privacy-hero__title {
  margin-top: 20px;
  font-size: 54px;
  line-height: 1.1;
  color: var(--ink-900);
}

.s-privacy-hero__facts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
}
.s-privacy-hero__fact {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-600);
}
.s-privacy-hero__fact-icon {
  flex: none;
  margin-top: 2px;
  color: var(--terracotta);
}
.s-privacy-hero__fact:last-child .s-privacy-hero__fact-icon { color: #5C7F72; }

/* ---- the two document actions ------------------------------------------ */
.s-privacy-hero__actions {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 12px;
}
.s-privacy-hero__action {
  height: auto;
  min-height: 52px;
  max-width: 100%;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.3;
  /* .btn is nowrap; these labels grow a long way in Indonesian */
  white-space: normal;
}
.s-privacy-hero__action-icon { flex: none; }
.s-privacy-hero__action-text { display: block; max-width: 22ch; }

/* the Figma's orange action — a page-local modifier, .btn is left alone */
.s-privacy-hero__action--pdf {
  background: var(--privacy-orange);
  color: var(--green-900);
}
.s-privacy-hero__action--pdf:hover { background: #E87E4E; }

.s-privacy-hero__code {
  display: block;
  font-weight: 600;
  opacity: .78;
}
/* The frame prints the reference code after the English label, so it lives in
   markup as a data-i18n-skip suffix. The sheet's Indonesian label already ends
   in its own code ("… (KODE: #ETR-SEC)"), so the suffix would read twice over —
   drop it once the page switches, the same way cookies.css hides its
   English-only lock label. */
html[lang="id"] .s-privacy-hero__code { display: none; }

/* ==========================================================================
   2 — document band: sticky rail + section cards
   ========================================================================== */
.s-privacy-doc {
  background: var(--privacy-band);
  padding-block: 44px 64px;
}

.s-privacy-doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 352px) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.s-privacy-doc__rail { min-width: 0; }
.s-privacy-doc__rail-inner {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- table of contents -------------------------------------------------- */
.s-privacy-toc {
  background: var(--privacy-beige);
  border-radius: var(--radius-lg);
  padding: 22px 18px 18px;
}
.s-privacy-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px 16px;
}
.s-privacy-toc__title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.s-privacy-toc__count {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--terracotta);
}

.s-privacy-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s-privacy-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-700);
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease;
}
.s-privacy-toc__chev {
  flex: none;
  opacity: .4;
  transition: opacity .18s ease, transform .18s ease;
}
.s-privacy-toc__link:hover {
  background: rgba(255, 255, 255, .55);
  color: var(--ink-900);
}
.s-privacy-toc__link:hover .s-privacy-toc__chev { opacity: .75; transform: translateX(2px); }
.s-privacy-toc__link.is-active {
  background: var(--surface);
  color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}
.s-privacy-toc__link.is-active .s-privacy-toc__chev { opacity: .9; color: var(--terracotta); }

/* ---- enterprise registry card ------------------------------------------- */
.s-privacy-registry {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
}
.s-privacy-registry__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.s-privacy-registry__icon { flex: none; color: #4C7F74; }

.s-privacy-registry__copy {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600);
}

.s-privacy-registry__rows { margin-top: 16px; }
.s-privacy-registry__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.s-privacy-registry__key {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-400);
}
.s-privacy-registry__val {
  margin: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-900);
}

/* ==========================================================================
   3 — the document itself
   ========================================================================== */
.s-privacy-doc__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.s-privacy-doc__item {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px 34px 32px;
  scroll-margin-top: 24px;
}
.s-privacy-doc__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--terracotta);
}

.s-privacy-doc__label {
  font-size: 10.5px;
  letter-spacing: .15em;
}
.s-privacy-doc__dot { opacity: .55; }

.s-privacy-doc__title { margin-top: 6px; }

.s-privacy-doc__prose {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-600);
}

/* ---- tinted sub-cards (sections 02, 05, 06) ----------------------------- */
.s-privacy-doc__cards {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.s-privacy-doc__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-privacy-doc__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.s-privacy-doc__card {
  background: var(--privacy-beige-2);
  border-radius: var(--radius);
  padding: 15px 17px 17px;
}
.s-privacy-doc__card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
}
.s-privacy-doc__card-icon { flex: none; color: var(--terracotta); }
.s-privacy-doc__card:nth-child(2) .s-privacy-doc__card-icon { color: #4C7F74; }
.s-privacy-doc__card:nth-child(3) .s-privacy-doc__card-icon { color: #5F7D92; }

.s-privacy-doc__card-copy {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* ---- numbered rows (section 03) ----------------------------------------- */
.s-privacy-doc__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}
.s-privacy-doc__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--privacy-beige-3);
  border-radius: var(--radius);
  padding: 15px 18px;
}
.s-privacy-doc__step-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--privacy-badge);
  font-size: 11.5px;
  font-weight: 700;
  color: #9A5631;
}
.s-privacy-doc__step-text { min-width: 0; }
.s-privacy-doc__step-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
}
.s-privacy-doc__step-note {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ---- guarantee chips (section 04) --------------------------------------- */
.s-privacy-doc__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.s-privacy-doc__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--privacy-beige-2);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}
.s-privacy-doc__chip-icon { flex: none; color: #4C7F74; }

/* ==========================================================================
   4 — contact panel (section 07)
   ========================================================================== */
.s-privacy-contact {
  margin-top: 24px;
  background: var(--privacy-beige);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.s-privacy-contact__mail {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.s-privacy-contact__badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--privacy-burnt);
  color: var(--on-dark);
}
.s-privacy-contact__mail-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.s-privacy-contact__mail-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.s-privacy-contact__mail-link {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.25;
  color: var(--ink-900);
  overflow-wrap: anywhere;
  transition: color .18s ease;
}
.s-privacy-contact__mail-link:hover { color: var(--terracotta); }

.s-privacy-contact__btn {
  flex: none;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: left;
  white-space: normal;
}

/* ---- jurisdiction blocks ------------------------------------------------ */
.s-privacy-contact__places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 37, 35, .10);
}
.s-privacy-contact__place { min-width: 0; }
.s-privacy-contact__place-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--privacy-label);
}
.s-privacy-contact__place-icon { flex: none; color: var(--terracotta); }
.s-privacy-contact__place-name {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
}
.s-privacy-contact__place-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-600);
}

/* ==========================================================================
   5 — closing governance band
   ========================================================================== */
.s-privacy-governance {
  background: linear-gradient(95deg,
              #F3E2D1 0%, #F5EDE2 40%, #F5EDE2 72%, #E9E7DB 100%);
  padding-block: 48px 52px;
}
.s-privacy-governance__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.s-privacy-governance__copy { min-width: 0; max-width: 760px; }
.s-privacy-governance__eyebrow {
  font-size: 10.5px;
  letter-spacing: .15em;
}
.s-privacy-governance__title { margin-top: 10px; }
.s-privacy-governance__lede { margin-top: 14px; }
.s-privacy-governance__btn {
  flex: none;
  max-width: 100%;
  height: auto;
  min-height: 52px;
  padding: 12px 25px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

/* ==========================================================================
   6 — responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .s-privacy-hero__title { font-size: 46px; }
  .s-privacy-doc__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; }
  .s-privacy-doc__item { padding: 26px 28px 28px; }
}

@media (max-width: 1023px) {
  .s-privacy-hero {
    padding-block: 40px 44px;
    background: linear-gradient(170deg, #EFEADF 0%, #F5EDE2 45%, #F3E2D1 100%);
  }
  .s-privacy-hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .s-privacy-hero__actions { width: 100%; }
  .s-privacy-hero__action { flex: 1 1 0; justify-content: flex-start; }
  .s-privacy-hero__action-text { max-width: none; }

  .s-privacy-doc { padding-block: 36px 52px; }
  .s-privacy-doc__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-privacy-doc__rail-inner { position: static; }

  .s-privacy-doc__cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .s-privacy-governance {
    background: linear-gradient(170deg, #F3E2D1 0%, #F5EDE2 55%, #EFEADF 100%);
  }
  .s-privacy-governance__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
}

@media (max-width: 640px) {
  /* the 52px frame gutter is far too heavy on a phone — the same 24px these
     bands' siblings in style.css drop to */
  .s-privacy-hero .container,
  .s-privacy-doc .container,
  .s-privacy-governance .container { padding-inline: 24px; }
}

@media (max-width: 639px) {
  .s-privacy-hero { padding-block: 32px 36px; }
  .s-privacy-hero__title { font-size: 36px; margin-top: 16px; }
  .s-privacy-hero__fact { font-size: 13px; }
  .s-privacy-hero__actions { flex-direction: column; }
  .s-privacy-hero__action { width: 100%; }

  .s-privacy-doc { padding-block: 28px 44px; }
  .s-privacy-doc__item { padding: 22px 20px 24px; border-radius: var(--radius); }
  .s-privacy-doc__title { font-size: 25px; }
  .s-privacy-doc__prose { font-size: 16px; margin-top: 14px; }

  .s-privacy-doc__cards--3,
  .s-privacy-doc__cards--2,
  .s-privacy-doc__chips { grid-template-columns: minmax(0, 1fr); }

  .s-privacy-toc { padding: 18px 14px 14px; }
  .s-privacy-toc__link { padding: 10px 11px; font-size: 13.5px; }

  .s-privacy-contact { padding: 16px; }
  .s-privacy-contact__mail { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .s-privacy-contact__mail-text { flex-basis: calc(100% - 58px); }
  .s-privacy-contact__mail-link { font-size: 19px; }
  .s-privacy-contact__btn { width: 100%; }
  .s-privacy-contact__places { grid-template-columns: minmax(0, 1fr); }

  .s-privacy-governance { padding-block: 36px 40px; }
  .s-privacy-governance__title { font-size: 25px; }
  .s-privacy-governance__btn { width: 100%; }
}

@media (max-width: 379px) {
  .s-privacy-hero .container,
  .s-privacy-doc .container,
  .s-privacy-governance .container { padding-inline: 18px; }
  .s-privacy-hero__title { font-size: 31px; }
  .s-privacy-contact__mail-text { flex-basis: 100%; }
}

/* ==========================================================================
   7 — motion / print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s-privacy-toc__link,
  .s-privacy-toc__chev,
  .s-privacy-contact__mail-link { transition: none; }
  .s-privacy-toc__link:hover .s-privacy-toc__chev { transform: none; }
}

@media print {
  .s-header,
  .s-footer,
  .s-privacy-hero__actions,
  .s-privacy-doc__rail { display: none; }

  .s-privacy-hero,
  .s-privacy-governance { background: none; padding-block: 0 18px; }

  .s-privacy-doc {
    background: none;
    padding-block: 0;
  }
  .s-privacy-doc__grid { display: block; }
  .s-privacy-doc__item {
    box-shadow: none;
    border: 1px solid var(--line);
    break-inside: avoid;
    padding: 18px 20px;
  }
  .s-privacy-doc__body { gap: 16px; }
}