/* ============================================================
   PMCK — legal / policy pages
   PDPA notice, privacy, cookies, terms. The article layout with
   everything removed that a policy has no use for: no cover, no
   table of contents, no sidebar, no related rail.
   ============================================================ */

.pmck-legal{background:var(--brand-soft);}

/* ---------- hero ----------
   The same dark hero every other page uses: solid brand green when there is no
   featured image, and the image behind a left-weighted wash when there is, so
   the photograph survives instead of being flattened. */

.pmck-legal__head{
  position:relative;background:var(--brand-dark);color:#fff;overflow:hidden;
}
.pmck-legal__head.has-image::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-img);background-size:cover;background-position:center right;
}
.pmck-legal__head.has-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,36,0,.92) 0%,rgba(0,36,0,.74) 36%,rgba(0,36,0,0) 70%);
}
.pmck-legal__head .pmck-wrap{position:relative;z-index:1;}
.pmck-legal__headinner{max-width:620px;padding:80px 0 88px;}

.pmck-legal__crumb{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font-size:18px;color:rgba(255,255,255,.72);margin-bottom:22px;
}
.pmck-legal__crumb a{text-decoration:none;color:#fff;}
.pmck-legal__crumb a:hover{text-decoration:underline;}

.pmck-legal__title{font-size:52px;line-height:1.12;margin:0 0 16px;color:#fff;}
.pmck-legal__lede{
  margin:0 0 14px;max-width:52ch;
  font-size:19px;line-height:1.7;color:rgba(255,255,255,.92);
}
.pmck-legal__updated{margin:0;font-size:18px;color:rgba(255,255,255,.72);}

/* ---------- the document itself ----------
   Held to a reading measure. A policy is long and unbroken, so a full-width
   column would run past 150 characters a line and nobody would finish it. */

.pmck-legal__body{padding:52px 0 78px;}
/* Centred, and wider than a blog measure. A policy is read in one sitting
   rather than skimmed, and the source has long list items that wrap badly in a
   narrow column — but a full 1400px would run past 150 characters a line, so
   this sits between the two. */
.pmck-legal__body .pmck-prose{
  max-width:92ch;margin-inline:auto;
  background:#fff;border-radius:14px;padding:52px 60px;
  font-size:19px;line-height:1.75;color:var(--body);
}
.pmck-legal__body .pmck-prose > *:first-child{margin-top:0;}
.pmck-legal__body .pmck-prose > *:last-child{margin-bottom:0;}

.pmck-legal__body .pmck-prose h2{
  font-size:25px;line-height:1.3;color:var(--brand-ink);
  margin:2em 0 .6em;padding-bottom:.4em;border-bottom:1px solid var(--line);
}
.pmck-legal__body .pmck-prose h3{font-size:21px;color:var(--brand);margin:1.6em 0 .5em;}
.pmck-legal__body .pmck-prose h4{font-size:19px;color:var(--brand-ink);margin:1.4em 0 .4em;}
.pmck-legal__body .pmck-prose p{margin:0 0 1.1em;}
.pmck-legal__body .pmck-prose a{color:var(--brand);}

/* The PDPA notice is mostly lists. Ticks would read as benefits, so these stay
   as plain markers — this is a legal disclosure, not a feature list. */
.pmck-legal__body .pmck-prose ul,
.pmck-legal__body .pmck-prose ol{margin:0 0 1.3em;padding-left:1.4em;}
.pmck-legal__body .pmck-prose li{margin-bottom:.5em;}
.pmck-legal__body .pmck-prose ul li::marker{color:var(--accent);}
.pmck-legal__body .pmck-prose ol li::marker{color:var(--brand);font-weight:600;}

.pmck-legal__body .pmck-prose table{
  width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:18px;
}
.pmck-legal__body .pmck-prose th,
.pmck-legal__body .pmck-prose td{
  border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;
}
.pmck-legal__body .pmck-prose th{background:var(--brand-soft);color:var(--brand-ink);}

/* An address block pasted as one paragraph of line breaks. */
.pmck-legal__body .pmck-prose strong{color:var(--brand-ink);}

@media (max-width:900px){
  .pmck-legal__headinner{max-width:none;padding:56px 0 62px;}
  .pmck-legal__title{font-size:36px;}
  /* One column: the wash has to cover the full width or the words sit on the
     photograph. */
  .pmck-legal__head.has-image::after{
    background:linear-gradient(90deg,rgba(0,36,0,.94) 0%,rgba(0,36,0,.72) 100%);
  }
  .pmck-legal__body{padding:32px 0 56px;}
  .pmck-legal__body .pmck-prose{padding:30px 26px;font-size:18px;}
  .pmck-legal__body .pmck-prose h2{font-size:22px;}
}