/* ══════════════════════════════════════════════════════════════════════════
   css/trust-and-safety.css — TRUST AND SAFETY  (fw-trs)
   /trust-and-safety, built 10 Oct 2026 (Manage › Site Content › Legal
   Asset › Trust Badges). Hybrid, no form.

   Its idea is PROVED, DATED, ON RECORD, and its centrepiece is a seal wall:
     §1  the opening on the tools-page pattern: clay rings, gradient title,
         three counted facts, three promises, beside the live badges as
         seals (each with the month its proof runs to)
     §2  EVERY BADGE: grouped by how it is proved, each row the mark, the
         claim and what it covers, and the sentence saying how it is checked
     §3  OUR RULES: four rules beside a photograph
     §4  OUR POLICIES: four ruled columns, the version and date in force
     §5  questions beside the invitation to report anything that looks wrong
   PALETTE: pink is the voice, blue the quiet second colour; each badge's
   accent comes from Manage. No boxes, no inline styles, colour from :root.
   ══════════════════════════════════════════════════════════════════════════ */

/* 00 · TOKENS & PRIMITIVES */
.fw-trs-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 10%, transparent);
	--fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
	--fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
	--sec:clamp(32px, 5.8vh, 64px);
	--gap:clamp(28px, 5vw, 80px);
	--glow:0 8px 20px -8px color-mix(in srgb, var(--pk-dd) 70%, transparent);
	--glow-lg:0 14px 28px -10px color-mix(in srgb, var(--pk-dd) 75%, transparent);
	--ease:cubic-bezier(.22,1,.36,1);
	background:var(--wh);
}
.fw-trs{display:block;position:relative;background:var(--wh)}
.fw-trs em{font-family:var(--ff);font-style:normal}
.fw-trs-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-trs-sec{position:relative;padding:var(--sec) 0}
.fw-trs-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)}
.fw-trs-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)}
.fw-trs-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap}
.fw-trs-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;min-width:0}
.fw-trs-head--row > .fw-trs-sub{flex:0 1 40%;min-width:260px;text-align:right}
.fw-trs-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-dd)}
.fw-trs-eyebrow img{width:34px;height:34px;object-fit:contain;flex:none}
.fw-trs-sample{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;vertical-align:2px}
.fw-trs-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.fw-trs-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-trs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:999px;background:linear-gradient(150deg, var(--pk-d), var(--pk-dd));box-shadow:var(--glow);color:var(--wh);font-size:15px;font-weight:600;white-space:nowrap;transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.fw-trs-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:var(--glow-lg)}
.fw-trs-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--pk-dd);transition:color .2s var(--ease)}
.fw-trs-link .bi-arrow-right{transition:transform .25s var(--ease)}
.fw-trs-link:hover{color:var(--pk-ink)}
.fw-trs-link:hover .bi-arrow-right{transform:translateX(4px)}
.fw-trs-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
@keyframes fw-trs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Accent families: each badge's colour is chosen in Manage. */
.fw-trs-seal--pk,.fw-trs-item--pk{--ac:var(--pk-l);--ac2:var(--pk-l2);--aci:var(--pk-ink);--acd:var(--pk-d)}
.fw-trs-seal--bl,.fw-trs-item--bl{--ac:var(--bl-l);--ac2:var(--bl-l2);--aci:var(--bl-ink);--acd:var(--bl-d)}
.fw-trs-seal--mt,.fw-trs-item--mt{--ac:var(--mt-l);--ac2:var(--mt-l2);--aci:var(--mt-ink);--acd:var(--mt-d)}
.fw-trs-seal--go,.fw-trs-item--go{--ac:var(--go-l);--ac2:var(--go-l2);--aci:var(--go-ink);--acd:var(--go-d)}
.fw-trs-seal--pu,.fw-trs-item--pu{--ac:var(--pu-l);--ac2:var(--pu-l2);--aci:var(--pu-ink);--acd:var(--pu-d)}

/* 01 · THE OPENING */
.fw-trs .fw-trs-mast{position:relative;padding-bottom:clamp(26px, 4.4vh, 48px)}
.fw-trs-open{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:center;gap:clamp(30px, 5vw, 90px);margin-top:4px}
.fw-trs-open__copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.fw-trs-rings{display:flex;margin-bottom:2px}
.fw-trs-rings img{width:clamp(50px, 6.6vh, 60px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:var(--wh);box-shadow:0 8px 22px var(--pk-ring), 0 0 0 3px var(--wh);animation:fw-trs-float 6s ease-in-out infinite}
.fw-trs-rings img + img{margin-left:-12px}
.fw-trs-rings img:nth-child(2){animation-delay:-2s}
.fw-trs-rings img:nth-child(3){animation-delay:-4s}
.fw-trs .fw-trs-h1{margin:0;font-size:clamp(38px, 6.6vh, 64px);line-height:1.02;letter-spacing:-.035em;background:linear-gradient(100deg, var(--dk-d) 35%, var(--pk-d) 78%, var(--bl-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-trs-lead{margin:0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-trs-lead b{color:var(--pk-dd)}
.fw-trs-facts{position:relative;display:grid;grid-template-columns:repeat(3, auto);justify-content:start;width:100%;margin:4px 0 0;padding:16px 0 0;list-style:none}
.fw-trs-facts::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-trs-facts li{position:relative;display:grid;grid-template-columns:46px auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding-right:clamp(14px, 1.8vw, 28px);margin-right:clamp(14px, 1.8vw, 28px)}
.fw-trs-facts li:not(:last-child)::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:var(--fade-v)}
.fw-trs-facts img{grid-row:1 / 3;width:46px;height:46px;object-fit:contain}
.fw-trs-facts b{font-family:var(--ff);font-size:clamp(26px, 4vh, 36px);font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-trs-facts span{font-size:13px;font-weight:600;color:var(--g6)}
.fw-trs-promises{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.fw-trs-promises li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g7)}
.fw-trs-promises .bi{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mt-l);color:var(--mt-ink);font-size:14px}
.fw-trs-promises li:nth-child(2) .bi{background:var(--bl-l);color:var(--bl-ink)}
.fw-trs-promises li:nth-child(3) .bi{background:var(--pk-l);color:var(--pk-ink)}
/* The seal wall: the live badges as seals, gently out of step. */
.fw-trs-wall{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(14px, 2vh, 22px) clamp(10px, 1.4vw, 18px);align-content:center;padding:clamp(8px, 1.6vh, 18px) 0}
.fw-trs-wall::before{content:"";position:absolute;inset:8% 6%;z-index:0;border-radius:50%;background:radial-gradient(closest-side, var(--pk-wash), transparent 75%);filter:blur(10px)}
.fw-trs-seal{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;padding:4px;text-align:center;color:inherit;animation:fw-trs-float 7s ease-in-out infinite}
.fw-trs-seal--n2,.fw-trs-seal--n4,.fw-trs-seal--n6,.fw-trs-seal--n8{animation-delay:-2.3s;margin-top:18px}
.fw-trs-seal--n3,.fw-trs-seal--n6{animation-delay:-4.6s}
.fw-trs-seal__ring{position:relative;display:grid;place-items:center;width:clamp(68px, 9vh, 88px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%, var(--wh) 42%, var(--ac) 100%);box-shadow:0 0 0 5px var(--wh), 0 0 0 7px var(--ac2), 0 18px 34px -18px var(--acd);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.fw-trs-seal__ring::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed var(--ac2)}
.fw-trs-seal__ring .bi{font-size:clamp(26px, 3.4vh, 32px);color:var(--acd)}
.fw-trs-seal b{max-width:150px;font-family:var(--ff);font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.fw-trs-seal small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--aci)}
.fw-trs-seal:hover .fw-trs-seal__ring{transform:translateY(-4px) scale(1.04)}
.fw-trs-wall.is-empty{display:flex;align-items:center}
.fw-trs-wall__none{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;font-size:16px;line-height:1.6;color:var(--g6)}
.fw-trs-wall__none .bi{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--mt-l);color:var(--mt-ink);font-size:30px}

/* 02 · EVERY BADGE */
.fw-trs-list{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 70%)}
.fw-trs-group + .fw-trs-group{margin-top:clamp(22px, 3.4vh, 36px)}
.fw-trs-group__head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.fw-trs-group__head img{width:48px;height:48px;object-fit:contain}
.fw-trs-group__head h3{margin:0;font-family:var(--ff);font-size:19px;font-weight:600;color:var(--ink)}
.fw-trs-group__head p{margin:2px 0 0;font-size:14px;color:var(--g6)}
.fw-trs-items{margin:0;padding:0;list-style:none}
.fw-trs-item{position:relative;display:grid;grid-template-columns:56px minmax(0, 6fr) minmax(0, 5fr);gap:clamp(14px, 2vw, 32px);align-items:start;padding:18px 0;scroll-margin-top:150px}
.fw-trs-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-trs-item__mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 38%, var(--wh) 30%, var(--ac) 100%);box-shadow:0 0 0 2px var(--ac2)}
.fw-trs-item__mark .bi{font-size:24px;color:var(--acd)}
.fw-trs-item__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.fw-trs-item__body h4{margin:0;font-family:var(--ff);font-size:18px;font-weight:600;color:var(--ink)}
.fw-trs-item__claim{margin:0;font-size:15.5px;line-height:1.55;color:var(--g7)}
.fw-trs-item__detail{margin:0;font-size:14px;line-height:1.6;color:var(--g6)}
.fw-trs-item__proof{display:flex;flex-direction:column;gap:10px;padding-left:clamp(14px, 2vw, 28px);border-left:2px solid var(--ac2)}
.fw-trs-item__proof p{display:flex;gap:8px;margin:0;font-size:14px;line-height:1.6;color:var(--g7)}
.fw-trs-item__proof p .bi{flex:none;margin-top:2px;color:var(--mt-ink)}
.fw-trs-item__links{display:flex;flex-wrap:wrap;gap:8px 18px}
.fw-trs-item__links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--pk-dd)}
.fw-trs-item__links a:hover{color:var(--pk-ink)}
/* The badge a footer link arrived for (?badge=<slug>, data-fw-arrive): a soft wash in its own colour that fades once seen. */
.fw-trs-item[data-fw-arrive]{margin:0 calc(-1 * clamp(12px, 1.6vw, 22px));padding-left:clamp(12px, 1.6vw, 22px);padding-right:clamp(12px, 1.6vw, 22px);border-radius:16px;background-color:var(--ac);animation:fw-trs-arrive 2.4s ease-out 2s forwards}
.fw-trs-item[data-fw-arrive]::before{display:none}
.fw-trs-item[data-fw-arrive]:focus{outline:none}
@keyframes fw-trs-arrive{to{background-color:transparent}}
@media (prefers-reduced-motion: reduce){.fw-trs-item[data-fw-arrive]{animation:none;background-color:transparent;box-shadow:inset 3px 0 0 var(--acd)}}
.fw-trs-item__links .bi{font-size:12px}

/* 03 · OUR RULES */
.fw-trs-how{background:linear-gradient(180deg, var(--mt-wash), var(--wh) 75%)}
.fw-trs-how__grid{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:var(--gap);align-items:stretch}
.fw-trs-how__grid.is-one{grid-template-columns:minmax(0, 1fr)}
.fw-trs-how__copy{display:flex;flex-direction:column;gap:10px}
.fw-trs-how__pic{position:relative;margin:0;min-height:clamp(280px, 40vh, 420px);overflow:hidden}
.fw-trs-how__pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.fw-trs-rules{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(22px, 3vw, 44px);margin:12px 0 4px;padding:0;list-style:none}
.fw-trs-rules li{position:relative;display:grid;grid-template-columns:52px minmax(0, 1fr);gap:14px;align-items:start;padding:16px 0}
.fw-trs-rules li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-trs-rules img{width:52px;height:52px;object-fit:contain}
.fw-trs-rules div{display:flex;flex-direction:column;gap:4px}
.fw-trs-rules b{font-family:var(--ff);font-size:16px;font-weight:600;color:var(--ink)}
.fw-trs-rules span{font-size:14px;line-height:1.6;color:var(--g6)}

/* 04 · OUR POLICIES — four ruled columns */
.fw-trs-pol{background:var(--wh)}
.fw-trs-pol__list{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0;margin:0;padding:0;list-style:none}
.fw-trs-pol__list li{position:relative}
.fw-trs-pol__list li + li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--fade-v)}
.fw-trs-pol__list a,.fw-trs-pol__list li > div{display:flex;flex-direction:column;gap:6px;height:100%;padding:6px clamp(16px, 2vw, 30px) 8px;color:inherit}
.fw-trs-pol__list li:first-child a,.fw-trs-pol__list li:first-child > div{padding-left:0}
.fw-trs-pol__v{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--bl-l);color:var(--bl-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.fw-trs-pol__list li > div .fw-trs-pol__v{background:var(--go-l);color:var(--go-ink)}
.fw-trs-pol__list b{font-family:var(--ff);font-size:18px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.fw-trs-pol__lede{flex:1 1 auto;font-size:14px;line-height:1.6;color:var(--g6)}
.fw-trs-pol__list small{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--pk-dd)}
.fw-trs-pol__list small .bi{transition:transform .25s var(--ease)}
.fw-trs-pol__list a:hover b{color:var(--pk-dd)}
.fw-trs-pol__list a:hover small .bi{transform:translateX(4px)}

/* 05 · QUESTIONS AND THE INVITATION */
.fw-trs-end{background:linear-gradient(180deg, var(--pk-wash), var(--wh) 70%)}
.fw-trs-end__grid{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:var(--gap);align-items:stretch}
.fw-trs-end__grid.is-one{grid-template-columns:minmax(0, 1fr)}
.fw-trs-end__qa{display:flex;flex-direction:column;gap:8px}
.fw-trs-end__qa .fw-trs-h2{margin-bottom:10px}
.fw-trs-end__ask{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding-left:clamp(24px, 3vw, 48px)}
.fw-trs-end__ask::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-v)}
.fw-trs-end__grid.is-one .fw-trs-end__ask{padding-left:0}
.fw-trs-end__grid.is-one .fw-trs-end__ask::before{display:none}
.fw-trs-end__ask > img{width:84px;height:84px;object-fit:contain;padding:8px;border-radius:50%;background:var(--wh);box-shadow:0 10px 26px var(--pk-ring), 0 0 0 3px var(--wh);animation:fw-trs-float 6s ease-in-out infinite}
.fw-trs-qa details{position:relative}
.fw-trs-qa details::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-trs-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.fw-trs-qa summary::-webkit-details-marker{display:none}
.fw-trs-qa summary:hover,.fw-trs-qa details[open] summary{color:var(--pk-dd)}
.fw-trs-qa summary .bi{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pk-l);color:var(--pk-ink);font-size:14px;transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease)}
.fw-trs-qa details[open] summary .bi{transform:rotate(45deg);background:var(--pk-dd);color:var(--wh)}
.fw-trs-qa p{margin:0 46px 15px 0;font-size:15px;line-height:1.65;color:var(--g6)}

/* 06 · RESPONSIVE (the phone is designed as an app) */
@media (max-width:1200px){
	.fw-trs-rules{grid-template-columns:minmax(0, 1fr)}
	.fw-trs-pol__list{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-trs-pol__list li:nth-child(3) a,.fw-trs-pol__list li:nth-child(3) > div{padding-left:0}
	.fw-trs-pol__list li:nth-child(3)::before{display:none}
	.fw-trs-pol__list li:nth-child(n+3){margin-top:22px}
	.fw-trs-item{grid-template-columns:56px minmax(0, 1fr)}
	.fw-trs-item__proof{grid-column:2;padding-left:14px}
}
@media (max-width:1024px){
	.fw-trs-open,.fw-trs-how__grid,.fw-trs-end__grid{grid-template-columns:minmax(0, 1fr)}
	.fw-trs-head--row{align-items:flex-start}
	.fw-trs-head--row > .fw-trs-sub{flex-basis:100%;text-align:left}
	.fw-trs-wall{grid-template-columns:repeat(auto-fill, minmax(130px, 1fr))}
	.fw-trs-seal--n2,.fw-trs-seal--n4,.fw-trs-seal--n6,.fw-trs-seal--n8{margin-top:0}
	.fw-trs-how__pic{min-height:0;aspect-ratio:4 / 3}
	.fw-trs-end__ask{padding-left:0;padding-top:24px}
	.fw-trs-end__ask::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:var(--fade)}
}
@media (max-width:640px){
	.fw-trs-page{--pad:14px}
	.fw-trs .fw-trs-h1{font-size:clamp(32px, 9vw, 42px)}
	.fw-trs-h2{font-size:clamp(24px, 6.6vw, 30px)}
	.fw-trs-act .fw-trs-btn{width:100%}
	.fw-trs-qa p{margin-right:0}
	.fw-trs-facts li{grid-template-columns:36px auto;column-gap:8px;padding-right:12px;margin-right:12px}
	.fw-trs-facts img{width:36px;height:36px}
	.fw-trs-wall{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-trs-seal--n2,.fw-trs-seal--n4,.fw-trs-seal--n6,.fw-trs-seal--n8{margin-top:0}
	.fw-trs-item{grid-template-columns:44px minmax(0, 1fr);gap:12px}
	.fw-trs-item__mark{width:44px;height:44px}
	.fw-trs-item__mark .bi{font-size:19px}
	.fw-trs-item__proof{grid-column:1 / -1;padding-left:12px}
	.fw-trs-pol__list{grid-template-columns:minmax(0, 1fr)}
	.fw-trs-pol__list li a,.fw-trs-pol__list li > div{padding-left:0}
	.fw-trs-pol__list li::before{display:none}
	.fw-trs-pol__list li + li{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
}