/* ============================================================
   DOCUMENT TEMPLATE — Code of Ethics, Privacy, Terms, PAIA …
   Pattern taken from Wyvern's own policy documents:
   notice → plain-language summary → contents → numbered sections
   → document control. Layout: sticky route-line contents rail +
   ~70ch reading column (long-form doc convention).
   ============================================================ */

/* ---------- Page header ---------- */
.doc-hero{border-bottom:1px solid var(--line);background:linear-gradient(to bottom,var(--tint),#fff 70%)}
.doc-hero .container{padding-top:80px;padding-bottom:64px}
.doc-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:end}
.doc-hero h1{margin-top:var(--eb-gap-banner);font:500 var(--fs-banner)/var(--lh-display) var(--sans);letter-spacing:var(--track-display)}
.doc-lead{margin-top:20px;max-width:58ch;font:400 var(--fs-lead)/1.5 var(--sans);color:var(--muted)}
.doc-acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}  /* banner action buttons (Maersk hero pattern, user 2026-10-22) */

/* Metadata panel */
.doc-meta{border:1px solid var(--line);border-radius:0;background:#fff}
.doc-meta dl{display:grid;grid-template-columns:1fr 1fr;margin:0}
.doc-meta dl > div{padding:16px 18px;border-bottom:1px solid var(--line)}
.doc-meta dl > div:nth-child(odd){border-right:1px solid var(--line)}
.doc-meta dt{font:500 var(--fs-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.doc-meta dd{margin:8px 0 0;font:500 15px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere} /* long e-mail addresses wrap on 320px phones */
.doc-meta .acts{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}
.doc-meta .btn-f .lbl{padding:0 14px}

/* ---------- Notice + summary ---------- */
.doc-notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--red);border-radius:0;background:#fff;
  font:400 14px/1.55 var(--sans);color:var(--ink-2);margin-bottom:56px}
.doc-notice b{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:8px}

.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
.principles li{padding:24px 24px 26px 0;border-bottom:1px solid var(--line)}
.principles li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.principles .no{font:500 12px/1 var(--mono);color:var(--red)}
.principles h3{margin-top:12px;font:500 18px/1.25 var(--sans);letter-spacing:-.01em}
.principles p{margin-top:8px;font:400 14.5px/1.55 var(--sans);color:var(--muted)}

/* ---------- Layout: contents rail + reading column ---------- */
.doc-body .container{display:grid;grid-template-columns:260px minmax(0,1fr);gap:80px;padding-top:72px;padding-bottom:120px}
.doc-article{max-width:72ch}

/* Contents — drawn as a corridor: every section is a stop */
.toc{position:sticky;top:calc(var(--bar-compact) + 32px);align-self:start;max-height:calc(100vh - var(--bar-compact) - 64px);overflow:auto;padding-right:4px}
.toc-h{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.toc ol{position:relative;list-style:none;margin:0;padding:0}
.toc ol::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1.5px;background:var(--line-strong)}
.toc ol::after{content:"";position:absolute;left:4px;top:10px;width:1.5px;height:var(--progress,0px);background:var(--red);transition:height .35s var(--ease-press)}
.toc li a{position:relative;display:flex;gap:10px;padding:7px 0 7px 24px;font:400 14px/1.35 var(--sans);color:var(--muted);border-radius:0;transition:color .2s var(--ease-press)}
.toc li a::before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%;background:#fff;border:1.5px solid var(--line-strong);z-index:1;transition:border-color .2s,background .2s,box-shadow .2s}
.toc li a .n{font:500 12px/1.6 var(--mono);color:var(--subtle);min-width:20px}
.toc li a:hover{color:var(--ink)}
.toc li a.is-past::before{border-color:var(--red);background:var(--red)}
.toc li a.is-active{color:var(--ink);font-weight:500}
.toc li a.is-active::before{border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(217,20,14,.14)}
.toc li a.is-active .n{color:var(--red)}
.toc li a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.toc-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* Mobile contents */
.toc-m{display:none}

/* ---------- Sections + prose ---------- */
.doc-sec{scroll-margin-top:calc(var(--bar-compact) + 24px);padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)}
.doc-sec:last-of-type{border-bottom:0;margin-bottom:0}
.doc-sec > h2{display:flex;align-items:baseline;gap:16px;font:500 var(--fs-h3)/1.15 var(--sans);letter-spacing:-.02em}
.doc-sec > h2 .n{font:500 13px/1 var(--mono);color:var(--red);letter-spacing:0;flex-shrink:0;width:28px}
.prose{margin-top:20px;padding-left:44px}
.prose p,.prose li{font:400 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink-2)}
.prose p + p{margin-top:16px}
.prose h3{margin:32px 0 10px;font:500 19px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.prose ul,.prose ol{margin:14px 0 0;padding-left:20px}
.prose li + li{margin-top:8px}
.prose ul li::marker{color:var(--red)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--red)}

/* Placeholder text (until final copy is supplied) */
.ph{display:block;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:0;background:repeating-linear-gradient(135deg,#fff 0 10px,var(--tint) 10px 20px);
  font:400 13px/1.5 var(--mono) !important;color:var(--subtle) !important}
.ph + .ph{margin-top:10px}

/* Key rule */
.rule{margin:24px 0 0;padding:20px 22px;background:var(--ink);color:#fff;position:relative}
.rule b{display:block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#FF8A85;margin-bottom:10px}
.rule p{color:#fff !important;font:500 17px/1.5 var(--sans) !important;letter-spacing:-.005em}

/* Do / Don't */
.dd2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;border:1px solid var(--line);border-radius:0;overflow:hidden}
.dd2 > div{padding:18px 20px}
.dd2 > div + div{border-left:1px solid var(--line)}
.dd2 h4{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.dd2 .do h4{color:var(--ok)}
.dd2 .dont h4{color:var(--red)}
.dd2 h4 i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dd2 ul{list-style:none;margin:0;padding:0}
.dd2 li{font:400 14.5px/1.5 var(--sans) !important;color:var(--ink-2);padding:6px 0}
.dd2 li + li{border-top:1px solid var(--line);margin-top:0 !important}

/* Table */
.doc-table{width:100%;border-collapse:collapse;margin-top:20px;font:400 14.5px/1.45 var(--sans)}
.doc-table th{text-align:left;font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.doc-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.doc-table td:first-child{color:var(--ink);font-weight:500}

/* Speak-up card */
.speak{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:0}
.speak > div{padding:18px 20px}
.speak > div + div{border-left:1px solid var(--line)}
.speak dt{font:500 var(--fs-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.speak dd{margin:10px 0 0;font:500 15px/1.4 var(--sans);color:var(--ink)}
.speak-cta{display:flex;align-items:center;gap:24px;margin-top:20px;flex-wrap:wrap}

/* Related */
.related{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.related li{border-bottom:1px solid var(--line)}
.related li:nth-child(odd){border-right:1px solid var(--line)}
.related a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none !important;transition:background .15s}
.related a:hover{background:var(--hover)}
.related a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.related b{font:500 15px/1.3 var(--sans);color:var(--ink)}
.related span{font:400 12px/1.3 var(--mono);color:var(--subtle)}

/* ---------- Responsive ---------- */
@media (max-width:1139px){
  .doc-body .container{grid-template-columns:200px minmax(0,1fr);gap:48px}
  .toc{top:calc(var(--bar) + 24px)}
}
@media (max-width:899px){
  .doc-hero-grid{grid-template-columns:1fr;gap:32px}
  .doc-hero .container{padding-top:48px;padding-bottom:48px}
  .doc-body .container{display:block;padding-top:40px;padding-bottom:80px}
  .toc{display:none}
  .toc-m{display:block;position:sticky;top:var(--bar);z-index:10;margin:0 calc(-1 * var(--gutter)) 40px;background:#fff;border-bottom:1px solid var(--line)}
  .toc-m summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px var(--gutter);cursor:pointer;font:500 14px/1 var(--sans)}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary .lab{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
  .toc-m summary .cur{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toc-m summary svg{transition:transform .2s var(--ease-press);color:var(--subtle)}
  .toc-m[open] summary svg{transform:rotate(180deg)}
  .toc-m ol{list-style:none;margin:0;padding:4px var(--gutter) 16px;max-height:55vh;overflow:auto;border-top:1px solid var(--line)}
  .toc-m li a{display:flex;gap:10px;padding:10px 0;font:400 15px/1.35 var(--sans);color:var(--ink-2);border-bottom:1px solid var(--line)}
  .toc-m li a .n{font:500 12px/1.8 var(--mono);color:var(--subtle);min-width:22px}
  .toc-m li a.is-active{color:var(--red)}
  .principles{grid-template-columns:1fr}
  .principles li:nth-child(even){padding-left:0;border-left:0}
  .prose{padding-left:0}
}
@media (max-width:599px){
  .doc-meta dl{grid-template-columns:1fr}
  .doc-meta dl > div:nth-child(odd){border-right:0}
  .doc-meta .acts{flex-direction:column;align-items:stretch}
  .dd2,.speak,.related{grid-template-columns:1fr}
  .dd2 > div + div,.speak > div + div{border-left:0;border-top:1px solid var(--line)}
  .related li:nth-child(odd){border-right:0}
  .doc-table{font-size:13.5px}
}

/* ---------- Print / "Download PDF" ---------- */
@media print{
  .wh,.drawer,.ft,.to-top,.to-track,.toc,.toc-m,.skip,.doc-meta .acts,.speak-cta{display:none !important}
  body{font-size:11pt}
  .doc-hero{background:none;border:0}
  .doc-hero .container,.doc-body .container{padding:0;display:block;max-width:none}
  .doc-sec{break-inside:auto;border-color:#ccc}
  .doc-sec > h2{break-after:avoid}
  .rule{background:none;color:#000;border:1.5pt solid #000}
  .rule p,.rule b{color:#000 !important}
  .prose a{text-decoration:none}
}

/* ---------- Image banner variant ---------- */
.doc-hero.has-img{position:relative;overflow:hidden;background:var(--night);border-bottom:0;color:var(--on-night)}
.doc-hero-img{position:absolute;inset:0}
.doc-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.doc-hero.has-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,14,18,.92) 0%,rgba(11,14,18,.78) 38%,rgba(11,14,18,.30) 72%,rgba(11,14,18,.15) 100%),
             linear-gradient(0deg,rgba(11,14,18,.55) 0%,rgba(11,14,18,0) 45%)}
.doc-hero.has-img .container{position:relative;z-index:1;padding-top:128px;padding-bottom:88px}
.doc-hero.has-img h1{color:var(--on-night)}
.doc-hero.has-img .doc-lead{color:var(--on-night-2)}
.doc-hero.has-img .doc-meta{border-color:transparent;box-shadow:var(--shadow-overlay)}
@media (max-width:899px){
  .doc-hero.has-img .container{padding-top:96px;padding-bottom:40px}
  .doc-hero.has-img::after{background:linear-gradient(0deg,rgba(11,14,18,.95) 0%,rgba(11,14,18,.75) 55%,rgba(11,14,18,.35) 100%)}
}
@media print{
  .doc-hero-img,.doc-hero.has-img::after{display:none}
  .doc-hero.has-img,.doc-hero.has-img h1,.doc-hero.has-img .doc-lead{background:none;color:#000}
}

/* Banner with image: text only; details move to a strip below */
.doc-hero.has-img .doc-hero-grid{grid-template-columns:minmax(0,640px)}
.doc-hero-img img{transform:scale(1.2);transform-origin:0% 62%}
.doc-hero.has-img .container{padding-top:136px;padding-bottom:120px}

/* Document details strip */
.doc-metabar{border-bottom:1px solid var(--line);background:#fff}
.doc-metabar .doc-meta{display:flex;align-items:stretch;border:0;border-radius:0;box-shadow:none}
.doc-metabar .doc-meta dl{display:flex;flex:1}
.doc-metabar .doc-meta dl > div{flex:1;border-bottom:0;border-right:1px solid var(--line);padding:20px 24px 20px 0}
.doc-metabar .doc-meta dl > div + div{padding-left:24px}
.doc-metabar .doc-meta dl > div:nth-child(odd){border-right:1px solid var(--line)}
.doc-metabar .doc-meta .acts{gap:28px;padding:0 0 0 28px}
@media (max-width:1023px){
  .doc-metabar .doc-meta{flex-direction:column}
  .doc-metabar .doc-meta dl{display:grid;grid-template-columns:1fr 1fr}
  .doc-metabar .doc-meta dl > div{padding:16px 0;border-bottom:1px solid var(--line)}
  .doc-metabar .doc-meta dl > div:nth-child(even){padding-left:20px;border-right:0}
  .doc-metabar .doc-meta dl > div:nth-child(odd){padding-left:0}
  .doc-metabar .doc-meta .acts{padding:16px 0;justify-content:flex-start}
}
@media (max-width:899px){
  .doc-hero.has-img .container{padding-top:120px;padding-bottom:48px}
  .doc-hero-img img{transform:none;object-position:62% 60%}
}
@media print{ .doc-metabar .doc-meta .acts{display:none} }

/* ---------- Code of Ethics content components ---------- */
.doc-tag{margin-top:18px;font:500 clamp(20px,1.8vw,26px)/1.25 var(--sans);letter-spacing:-.015em;color:var(--on-night)}
.doc-hero:not(.has-img) .doc-tag{color:var(--ink)}
.doc-hero .doc-lead{margin-top:14px}

/* Opening statement above section 1 */
.doc-intro{margin-bottom:64px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.doc-intro p{font:400 var(--fs-lead)/1.55 var(--sans);color:var(--ink-2)}
.doc-intro p + p{margin-top:16px}

/* Unfilled facts: visible until replaced, never shipped by accident */
.tbd{background:#FFF3C4;color:var(--ink);padding:1px 5px;border-radius:0;box-shadow:inset 0 0 0 1px #F0D77A}

/* "If a payment is requested" — three-step instruction */
.steps{margin:24px 0;padding:20px 22px;border-left:2px solid var(--red);background:var(--tint)}
.steps-h{font:500 16px/1.3 var(--sans);letter-spacing:-.005em;color:var(--red) !important;margin-bottom:14px !important}
.steps ol{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:10px}
.steps li{counter-increment:st;position:relative;padding-left:36px;margin:0 !important;min-height:22px}
.steps li::before{content:counter(st);position:absolute;left:0;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font:500 12px/1 var(--mono)}

.prose-lead{font-weight:500 !important;color:var(--ink) !important;font-size:18px !important}
.prose ul.cols-2{columns:2;column-gap:40px}
.prose ul.cols-2 li{break-inside:avoid}
.prose .btn-p{color:#fff;text-decoration:none}
.speak{grid-template-columns:repeat(2,minmax(0,1fr))}
.speak > div:nth-child(3){border-left:0;border-top:1px solid var(--line)}
.speak > div:nth-child(4){border-top:1px solid var(--line)}

/* Closing statement */
.doc-close .close-lead{font:500 var(--fs-h3)/1.15 var(--sans) !important;letter-spacing:-.02em;color:var(--ink) !important;margin-bottom:18px}
.doc-close .close-end{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-weight:500 !important;color:var(--ink) !important}

@media (max-width:599px){
  .prose ul.cols-2{columns:1}
  .speak > div:nth-child(3){border-top:1px solid var(--line)}
}
.doc-sec > h2:not(:has(.n)){padding-left:44px}
.prose .related li{margin:0 !important}
@media (max-width:899px){ .doc-sec > h2:not(:has(.n)){padding-left:0} }

/* ---------- Document details strip (refined) ---------- */
.doc-metabar{background:var(--tint);border-bottom:1px solid var(--line)}
.doc-metabar .doc-meta{display:flex;align-items:center;gap:40px;padding:24px 0;background:none;border:0;border-radius:0;box-shadow:none}
.doc-metabar .doc-meta dl{display:flex;flex:1;margin:0}
.doc-metabar .doc-meta dl > div:nth-child(n){flex:0 0 auto;padding:0 40px 0 0;margin:0 40px 0 0;border:0;border-right:1px solid var(--line)}
.doc-metabar .doc-meta dl > div:last-child{border-right:0;margin-right:0;padding-right:0}
.doc-metabar .doc-meta dt{color:var(--muted)}
.doc-metabar .doc-meta dd{margin-top:8px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.doc-metabar .doc-meta .acts{margin-left:auto;padding:0}
.doc-metabar .doc-meta .btn-f{background:#fff}
@media (max-width:1023px){
  .doc-metabar .doc-meta{flex-direction:column;align-items:stretch;gap:20px;padding:20px 0}
  .doc-metabar .doc-meta dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
  .doc-metabar .doc-meta dl > div:nth-child(n){padding:0;margin:0;border:0}
  .doc-metabar .doc-meta .acts{margin-left:0}
  .doc-metabar .doc-meta .btn-f{width:100%;--h:48px}
  .doc-metabar .doc-meta .btn-f .lbl{flex:1;justify-content:center;padding-right:40px}
}

/* Banner framing for the SA mountain-pass photo (truck sits right of the title) */
.doc-hero-img img{transform:none;object-position:60% 58%}
@media (max-width:899px){ .doc-hero-img img{object-position:78% 60%} }

/* Unnumbered sections: heading and text share one left edge */
.doc-sec > h2:not(:has(.n)){padding-left:0}
.prose{padding-left:0}
.prose .rule{margin:24px 0}
.prose .rule:first-child{margin-top:8px}

/* Banner framing for the document photo (papers sit right of the title) */
.doc-hero-img img{object-position:62% 52%}
@media (max-width:899px){ .doc-hero-img img{object-position:70% 50%} }

/* ============================================================
   SPACING PASS: one centred document column, one vertical rhythm
   Rhythm: 88px between sections (44 + rule + 44), 24px inside blocks.
   ============================================================ */
:root{--doc-max:984px;--sec-gap:44px}
.doc .container{max-width:var(--doc-max)}
.doc-body .container{grid-template-columns:240px minmax(0,1fr);gap:64px;padding-top:64px;padding-bottom:96px}
.doc-article{max-width:none}
.prose,.doc-intro p{max-width:var(--doc-measure)}
.doc-intro{margin-bottom:var(--sec-gap);padding-bottom:var(--sec-gap)}
.doc-sec{padding-bottom:var(--sec-gap);margin-bottom:var(--sec-gap)}
.prose > :last-child{margin-bottom:0}
.doc-hero.has-img .container{padding-top:104px;padding-bottom:88px}
@media (max-width:1139px){
  .doc-body .container{grid-template-columns:200px minmax(0,1fr);gap:48px}
}
@media (max-width:899px){
  .doc-body .container{padding-top:40px;padding-bottom:72px}
  .doc-hero.has-img .container{padding-top:88px;padding-bottom:48px}
  :root{--sec-gap:36px}
}

/* Single-contact block (security email) */
.speak.speak-1{grid-template-columns:minmax(0,1fr);max-width:360px}
.speak.speak-1 > div{border:0 !important}
/* "You must not" list: struck marker reads as prohibition */
.prose ul.dont{list-style:none;padding-left:0}
.prose ul.dont li{position:relative;padding-left:22px}
.prose ul.dont li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1.5px;background:var(--red);transform:rotate(-45deg)}
.prose ul.dont li::after{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1.5px;background:var(--red);transform:rotate(45deg)}
.prose ul + p,.prose ol + p,.prose dl + p{margin-top:16px}
.prose p + ul,.prose p + dl{margin-top:12px}

/* Warning-signs list inside a .steps box: indicator marks, not numbers */
.steps ul.signs{list-style:none;margin:0;padding:0}
.steps ul.signs li{counter-increment:none;padding-left:22px;min-height:0;margin-top:8px !important}
.steps ul.signs li:first-child{margin-top:0 !important}
.steps ul.signs li::before{content:"";top:.62em;left:2px;width:8px;height:8px;border-radius:0;background:none;border:1.5px solid var(--red);transform:rotate(45deg)}
/* Metadata strip: tighter item spacing so 4 items + action always fit in the 984px column */
.doc-metabar .doc-meta{gap:28px}
.doc-metabar .doc-meta dl{min-width:0;flex-wrap:wrap;row-gap:12px}
.doc-metabar .doc-meta dl > div:nth-child(n){padding-right:28px;margin-right:28px}
.doc-metabar .doc-meta dl > div:last-child{padding-right:0;margin-right:0}
.doc-metabar .doc-meta .acts{flex-shrink:0}
@media (max-width:1023px){ .doc-metabar .doc-meta dl > div:nth-child(n){padding:0;margin:0} }

/* ============================================================
   INTEGRITY LINE FORM (ethics-whistleblowing.html)
   Same field language as the route builder: mono labels,
   hairline borders, square corners, red only for state.
   ============================================================ */
.int-form{margin-top:24px;display:grid;gap:24px;padding:28px;border:1px solid var(--line);border-radius:0;background:var(--canvas)}
.int-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.int-f{display:grid;gap:8px;align-content:start}
.int-f label,.int-lab{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.int-f .opt{margin-left:6px;color:var(--subtle);letter-spacing:.04em;text-transform:none;font-weight:400}
.int-f .req{color:var(--red)}
.int-f input,.int-f textarea,.int-f select{width:100%;margin:0;font:400 16px/1.5 var(--sans);color:var(--ink);background:var(--canvas);
  border:1px solid var(--line-field);border-radius:0;padding:12px 14px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.int-f input{height:48px}
.int-f textarea{min-height:168px;resize:vertical}
.int-f ::placeholder{color:var(--subtle);opacity:1}
.int-f input:hover,.int-f textarea:hover,.int-f select:hover{border-color:var(--muted)}
.int-f input:focus-visible,.int-f textarea:focus-visible,.int-f select:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.int-f [aria-invalid="true"]{border-color:var(--red)}
.int-sel{position:relative}
.int-sel select{appearance:none;-webkit-appearance:none;height:48px;padding-right:40px;cursor:pointer}
.int-sel svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.int-help{margin:0 !important;font:400 13px/1.45 var(--sans) !important;color:var(--muted) !important}
.int-err{margin:0 !important;font:500 13px/1.45 var(--sans) !important;color:var(--red) !important}
.int-err:empty{display:none}
.int-drop{display:flex;align-items:center;justify-content:center;gap:12px;min-height:104px;padding:20px;border:1px dashed var(--line-strong);border-radius:0;
  background:var(--tint);color:var(--muted);font:400 15px/1.4 var(--sans);cursor:pointer;text-align:center;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.int-drop u{color:var(--ink);text-decoration-color:var(--red);text-underline-offset:3px}
.int-drop:hover,.int-drop.is-drag{border-color:var(--ink);background:var(--hover)}
.int-drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.int-files{list-style:none;margin:0 !important;padding:0 !important;display:grid;gap:0}
.int-files:empty{display:none}
.int-files li{display:flex;align-items:center;gap:12px;margin:0 !important;padding:10px 0;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--sans)}
.int-files li::before{display:none !important}
.int-files .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.int-files .sz{font:400 12px/1 var(--mono);color:var(--subtle)}
.int-files .warn .sz{color:var(--red)}
.int-files button{width:32px;height:32px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:0;font-size:18px;line-height:1}
.int-files button:hover{background:var(--hover);color:var(--ink)}
.int-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:4px}
.int-submit .btn-p[disabled]{opacity:.6;cursor:progress}
.int-done{margin-top:24px;padding:28px;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:0}
.int-done:focus{outline:none}
.int-done-h{font:600 22px/1.2 var(--sans) !important;letter-spacing:-.015em;color:var(--ink) !important;margin:0 0 8px !important}
.int-done .speak{margin:20px 0 4px}
.int-ref{font:500 22px/1 var(--mono) !important;letter-spacing:.06em}
@media (max-width:640px){
  .int-form{padding:20px 16px}
  .int-row{grid-template-columns:minmax(0,1fr)}
}
@media print{ .int-form,.int-done{display:none} }

/* Integrity Line page: same .doc container (984px) and 240px rail grid as the policy pages,
   so the heading, rail and form share their edges with the rest of the site */
.int-page{background:#fff}
.int-lead{margin:20px 0 0;font:400 var(--fs-lead)/1.5 var(--sans);color:var(--ink-2);max-width:600px}
.int-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;padding-top:48px;padding-bottom:96px}
.int-side{position:sticky;top:calc(var(--bar-compact) + 24px);align-self:start;display:grid;gap:24px}
.int-note{display:grid;grid-template-columns:16px 1fr;gap:10px;margin:0;padding:16px;background:var(--tint);border-left:3px solid var(--ok);
  font:500 14px/1.5 var(--sans);color:var(--ink)}
.int-note svg{margin-top:2px;color:var(--ok)}
.int-main{max-width:600px}
.int-page .int-form{margin-top:0}
.int-page .int-done{margin-top:0;background:var(--canvas)}
.int-page .int-done p{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.int-page .int-done p + p,.int-page .int-done .speak + p{margin-top:12px}
.int-page .int-done a,.int-follow a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;overflow-wrap:anywhere}
.int-follow{padding-top:20px;border-top:1px solid var(--line)}
.int-follow-h{margin:0;font:600 15px/1.3 var(--sans);color:var(--ink)}
.int-follow p + p{margin:8px 0 0;font:400 14px/1.6 var(--sans);color:var(--muted)}
@media (max-width:1139px){ .int-grid{grid-template-columns:200px minmax(0,1fr);gap:48px} }
@media (max-width:899px){
  .int-top{padding-top:40px;padding-bottom:28px}
  .int-grid{display:flex;flex-direction:column;gap:24px;padding-top:28px;padding-bottom:64px}
  .int-side{position:static;display:contents}
  .int-note{order:0}.int-main{order:1;max-width:none}.int-follow{order:2}
}

/* ============================================================
   SYSTEM v2 — rhythm, route stops, fewer boxes
   Overrides the per-component spacing above. Grounded in the
   Maersk measurement: light large headings, tight heading-to-text,
   big breaks between sections. Values come from tokens.css.
   ============================================================ */
/* Section = a stop on the route: hairline + red diamond, then the heading */
.doc-intro{margin-bottom:0;padding-bottom:0;border-bottom:0}
.doc-sec{position:relative;margin:var(--sp-break-above) 0 0;padding:var(--sp-break-below) 0 0;border-top:1px solid var(--line);border-bottom:0}
.doc-intro + .doc-sec{margin-top:calc(var(--sp-break-above) * .7)}
.doc-sec::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:#fff;border:1.5px solid var(--red);transform:rotate(45deg)}
.doc-sec:first-of-type{margin-top:0}
.doc-intro + .doc-sec:first-of-type{margin-top:calc(var(--sp-break-above) * .7)}
.doc-sec > h2{font:400 clamp(30px,2.8vw,40px)/1.05 var(--sans);letter-spacing:-.028em;color:var(--ink)}
.doc-sec > .prose{margin-top:var(--sp-tight)}
.prose h3{margin:var(--sp-block) 0 8px}
.prose .rule,.prose .steps,.prose .dd2,.prose .speak,.prose .related,.prose .doc-table{margin-top:var(--sp-block);margin-bottom:0}
.prose .rule + p,.prose .steps + p,.prose .speak + p,.prose .dd2 + p{margin-top:var(--sp-block)}

/* Steps: stops along a vertical route line, not a tinted box */
.steps{padding:0;border:0;background:none;border-radius:0}
.steps-h{font:500 var(--fs-label)/1 var(--mono) !important;letter-spacing:.1em;text-transform:uppercase;color:var(--red) !important;margin-bottom:18px !important}
.steps ol{position:relative;gap:18px}
.steps ol::before{content:"";position:absolute;left:10.5px;top:12px;bottom:12px;width:1px;background:var(--line-strong)}
.steps li{padding-left:40px}
.steps li::before{z-index:1;box-shadow:0 0 0 4px #fff}
.steps ul.signs{display:grid;gap:10px}
.steps ul.signs li{padding-left:24px}

/* Contacts: open columns divided by hairlines, no card */
.speak{border:0;border-radius:0;gap:0 32px;border-top:1px solid var(--ink)}
.speak > div{padding:16px 0 0}
.speak > div + div{border-left:0}
@media (max-width:899px){ .speak{gap:0} .speak > div{padding:14px 0;border-top:1px solid var(--line)} .speak > div:first-child{border-top:0} }

/* Integrity Line: no form card; fields sit on the page grid */
.int-page .int-form{padding:0;border:0;border-radius:0;gap:var(--sp-block) 0;background:none}
.int-page .int-row{gap:24px}
.int-page .int-f{gap:10px}
.int-page .int-submit{padding-top:8px;border-top:1px solid var(--line);padding-top:var(--sp-block)}
.int-page .int-done{border:0;border-left:3px solid var(--ok);border-radius:0;padding:4px 0 4px 24px}
.int-grid{position:relative;padding-top:var(--sp-block);margin-top:var(--sp-break-below)}
.int-grid::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:var(--line)}
.int-grid::before{content:"";position:absolute;left:var(--gutter);top:-4px;z-index:1;width:9px;height:9px;background:#fff;border:1.5px solid var(--red);transform:rotate(45deg)}
.int-side{gap:var(--sp-block)}
.int-note{background:none;padding:0 0 0 16px}
.int-follow{padding-top:0;border-top:0}
@media (max-width:899px){
  .int-grid{gap:var(--sp-block)}
  .int-follow{padding-top:var(--sp-block);border-top:1px solid var(--line)}
}
.speak dd{overflow-wrap:anywhere}
@media (max-width:480px){ .speak.dept{grid-template-columns:minmax(0,1fr)} }

/* ============================================================
   GRID v3 — policy pages sit on the SITE container (1440px) and a
   12-column grid, so every left edge matches the header logo and the
   right edge matches the Get a Quote button. Replaces the 984px column.
     cols 1-3  : contents rail / side notes
     cols 4-12 : reading column (text up to --doc-measure, 760px)
   User 2026-10-22: the article stopped at col 9 with 600px text, leaving cols 10-12 empty and every
   policy page longer than needed. The article now runs to col 12; the text measure is 760px (about
   90 characters at 17px), not the full column, so lines stay readable.
   ============================================================ */
.doc{--doc-measure:760px}
.doc .container{max-width:var(--container)}
.doc-hero.has-img .doc-hero-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap)}
.doc-hero.has-img .doc-hero-grid > div{grid-column:1 / span 7}
.doc-body .container{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);row-gap:0;padding-top:var(--sp-break-below)}
.doc-body .toc{grid-column:1 / span 3}
.doc-body .doc-article{grid-column:4 / -1;max-width:none}
.doc-metabar .doc-meta .acts{margin-left:auto}
/* Integrity Line on the same grid */
.int-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap)}
.int-side{grid-column:1 / span 3}
.int-main{grid-column:4 / span 6;max-width:none}
@media (max-width:1139px){
  .doc-body .toc,.int-side{grid-column:1 / span 4}
  .doc-body .doc-article,.int-main{grid-column:5 / span 8}
  .doc-hero.has-img .doc-hero-grid > div{grid-column:1 / span 10}
}
@media (max-width:899px){
  .doc-body .container,.doc-hero.has-img .doc-hero-grid{display:block}
}

/* Section lines stop where the text stops (no overhang past the text measure) */
.doc-intro,.doc-sec{max-width:var(--doc-measure)}
/* Closing statement: one headline, not two. The h2 becomes the label
   (still an h2, so the contents rail keeps it); the line is the headline. */
.doc-close > h2{font:500 var(--fs-label-lg)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.doc-close > .prose{margin-top:14px}
.doc-close .close-lead{font:400 clamp(30px,2.8vw,40px)/1.08 var(--sans) !important;letter-spacing:-.028em;margin-bottom:var(--sp-tight)}
.doc-close .close-end{margin-top:var(--sp-tight);padding-top:var(--sp-tight)}

/* Integrity Line v3: one centred column like the live page.
   Column = grid cols 4-9, which is the exact centre band of the site
   container, so it shares the header's centre axis and the 12-col grid. */
.int-c{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);padding-top:72px;padding-bottom:96px}
.int-col{grid-column:4 / span 6;display:grid;gap:var(--sp-block);align-content:start}
.int-head{text-align:center}
.int-head h1{margin:var(--eb-gap-banner) 0 0;font:400 var(--fs-banner)/var(--lh-display) var(--sans);letter-spacing:-.035em;color:var(--ink)}
.int-head .int-lead{margin:20px auto 0;max-width:560px;font:400 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink-2)}
.int-col > .int-note{margin:0;padding:14px 16px;background:var(--tint);border-left:3px solid var(--ok)}
.int-col .int-form{margin:0}
.int-col .int-submit{justify-content:center;border-top:1px solid var(--line);padding-top:var(--sp-block)}
.int-col .int-submit .int-err{flex-basis:100%;text-align:center}
.int-col .int-done{margin:0}
.int-col .int-follow{padding-top:var(--sp-block);border-top:1px solid var(--line);text-align:center}
@media (max-width:1139px){ .int-col{grid-column:3 / span 8} }
@media (max-width:899px){
  .int-c{display:block;padding-top:40px;padding-bottom:64px}
  .int-head h1{font-size:clamp(34px,9vw,44px)}
}

/* Sitemap page (generated by build.mjs): same 12-col grid as the policy pages.
   Group label in cols 1-3, links in cols 4-9, route-stop divider per group. */
.sm-c{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);padding-top:72px;padding-bottom:96px}
.sm-head{grid-column:1 / -1;margin-bottom:var(--sp-break-above)}
.sm-head h1{margin:var(--eb-gap-banner) 0 0;font:400 var(--fs-banner)/var(--lh-display) var(--sans);letter-spacing:-.035em;color:var(--ink)}
.sm-group{grid-column:1 / span 9;display:grid;grid-template-columns:subgrid;position:relative;padding-top:var(--sp-break-below);border-top:1px solid var(--line)}
.sm-group + .sm-group{margin-top:var(--sp-break-above)}
.sm-group::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:#fff;border:1.5px solid var(--red);transform:rotate(45deg)}
.sm-group h2{grid-column:1 / span 3;font:500 var(--fs-label-lg)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sm-group ul{grid-column:4 / span 6;list-style:none;margin:0;padding:0}
.sm-group li{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.sm-group li:first-child{padding-top:0}
.sm-group a{font:400 20px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);text-decoration:none;background:linear-gradient(var(--red),var(--red)) 0 100%/0 1.5px no-repeat;transition:background-size var(--t-base) var(--ease)}
.sm-group a:hover{background-size:100% 1.5px}
.sm-group a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sm-group time{flex-shrink:0;font:400 var(--fs-label)/1 var(--mono);letter-spacing:.04em;color:var(--subtle)}
.sm-foot{grid-column:4 / span 6;margin-top:var(--sp-break-above);font:400 14px/1.5 var(--sans);color:var(--muted)}
.sm-foot a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
@media (max-width:1139px){ .sm-group{grid-column:1 / -1} .sm-group h2{grid-column:1 / span 4} .sm-group ul,.sm-foot{grid-column:5 / span 8} }
@media (max-width:899px){
  .sm-c{display:block;padding-top:40px;padding-bottom:64px}
  .sm-group{display:block}
  .sm-group h2{margin-bottom:16px}
  .sm-group li{flex-direction:column;gap:6px}
}

/* Terms & Conditions: clause numbers are part of the legal text (cross-references
   such as "section 23.4" depend on them), so they stay, set as a quiet mono marker. */
.doc-terms .cl{display:inline-block;min-width:2.6em;margin-right:4px;font:500 13px/1 var(--mono);color:var(--red);letter-spacing:0}
.doc-terms .doc-sec > h2 .n{width:auto;min-width:28px;font-size:14px;align-self:baseline}
.doc-terms .prose ol{padding-left:22px}
.doc-terms .prose ol li{margin-top:6px}
.doc-terms .doc-intro .rule{margin-top:var(--sp-block)}

/* Numbered section headings on every legal page (same treatment as the Terms) */
.doc-sec > h2 .n{width:auto;min-width:28px;font:500 14px/1 var(--mono);color:var(--red);letter-spacing:0;align-self:baseline}

/* Contents rail: no browser scrollbar; when the list overflows, the bottom
   fades out (until you reach the end) so the overflow reads as intentional */
.toc{scrollbar-width:none;overscroll-behavior:contain}
.toc::-webkit-scrollbar{display:none}
.toc.is-scroll:not(.is-end){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent)}

/* Tap areas, 44px minimum (ui-ux-pro-max re-check 2026-10-20) */
@media (max-width:899px){
  .toc-m summary{padding-top:15px;padding-bottom:15px}
  .toc-m li a{padding:12px 0}
}
.sm-group a{position:relative}
.sm-group a::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}

/* ------------------------------------------------------------
   Scam Alerts & Fraud Prevention (legal/scam-alert.html)
   "Before you act" checklist: the .steps numbering, without the box (the warning rule above it already carries the
   accent, so the page stays calm rather than red). FAQ rows come from track.css, one column in the reading width.
   ------------------------------------------------------------ */
.sa-check{list-style:none;margin:20px 0 0;padding:0;counter-reset:sc;display:grid;gap:12px}
.sa-check li{counter-increment:sc;position:relative;padding-left:36px;font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.sa-check li::before{content:counter(sc);position:absolute;left:0;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font:500 12px/1 var(--mono)}
.sa-check b{color:var(--ink);font-weight:500}
.sa-page .sa-faq{grid-template-columns:minmax(0,1fr);margin-top:8px}
.sa-page .sa-faq .fq-in{padding-right:0}

/* Details bar on one line (user 2026-10-22: label above value wasted the bar's width). From 1024px each item reads
   "LABEL value" on a single baseline, so the bar is one slim row; pages with long values (an e-mail, a country)
   wrap to a second row on narrower desktops instead of clipping. Below 1024px the two-column stack above stays. */
@media (min-width:1024px){
  .doc-metabar .doc-meta{padding:16px 0}
  .doc-metabar .doc-meta dl{flex-wrap:wrap;align-items:center;row-gap:10px}
  .doc-metabar .doc-meta dl > div:nth-child(n){display:flex;align-items:baseline;gap:12px;white-space:nowrap;padding-right:24px;margin-right:24px}
  .doc-metabar .doc-meta dl > div:last-child{padding-right:0;margin-right:0}
  .doc-metabar .doc-meta dd{margin-top:0}
}

/* Reduced motion (audit 2026-10-22, approved recommendation): the contents rail progress line, link and marker
   transitions switch off when the visitor asks the system for less motion */
@media (prefers-reduced-motion:reduce){
  .doc-hero *,.doc-body *,.toc,.toc *,.toc-m *,.toc ol::after,.toc li a::before{transition:none !important}
}