/* The privacy and cookie policies (parts/policy.php, assets/js/policy.js): a sheet on a wooden clipboard, the text in
   parts; reading a part clicks its padlock shut (privacy) or takes a bite out of its cookie (cookies, crumbs fall).
   Beside the text the site's snail crawls down as far as it has been read and leaves a shiny trail; scrolled back up
   it turns round (the drawing looks right: turned it looks down, or up). */

@property --bite { syntax: '<length>'; inherits: false; initial-value: 0px; }

.po { position: relative; padding: 40px 0 110px; }
.po-wrap { padding: 0 30px; }
.bg .po .po-part__title { font-family: 'Neucha', Arial, sans-serif; }

/* the clipboard */
.po-board { position: relative; max-width: 980px; margin: 30px auto 0; padding: 22px 22px 26px; border-radius: 18px; background: repeating-linear-gradient(100deg, rgba(120, 70, 30, .07) 0 3px, transparent 3px 14px), linear-gradient(135deg, #d39556, #a8693a); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .06), 0 34px 50px -30px rgba(70, 45, 20, .65); }
.po-clip { position: absolute; z-index: 3; left: 50%; top: -30px; width: 200px; height: 60px; margin-left: -100px; border-radius: 14px 14px 8px 8px; background: linear-gradient(#eef1f3, #a3adb3); box-shadow: 0 7px 10px rgba(0, 0, 0, .25), inset 0 2px 0 #fff; }
.po-clip::before { content: ''; position: absolute; left: 50%; top: -18px; width: 74px; height: 34px; margin-left: -37px; border: 7px solid #8e999f; border-bottom: 0; border-radius: 34px 34px 0 0; box-sizing: border-box; }
.po-clip::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 12px; height: 8px; border-radius: 4px; background: #7d878d; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35); }
.po-sheet { position: relative; padding: 70px 64px 50px 110px; border-radius: 6px; background: #fffefb; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }

/* the snail's lane beside the text */
.po-lane { position: absolute; left: 46px; top: 70px; bottom: 50px; width: 30px; }
.po-lane::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 2px dashed #ebe3d6; }
.po-trail { position: absolute; left: 12px; top: 0; width: 6px; height: var(--t, 0px); border-radius: 3px; background: linear-gradient(rgba(190, 205, 230, .25), rgba(170, 190, 225, .85)); box-shadow: 0 0 6px rgba(160, 185, 230, .55); }
.po-snail { position: absolute; left: -12px; top: -14px; width: 54px; height: 38px; background: url('../images/snail.svg') no-repeat center / contain; translate: 0 var(--p, 0px); rotate: 90deg; transition: rotate .5s cubic-bezier(.34, 1.4, .64, 1); }
.po-snail.is-up { rotate: -90deg; }
.po-snail.is-crawl { animation: po-crawl .5s ease-in-out infinite; }
@keyframes po-crawl { 0%, 100% { scale: 1 1; } 50% { scale: 1.08 .94; } }

/* the parts of the text */
.po-part { position: relative; margin: 0 0 30px; padding: 26px 30px 12px; border-radius: 14px; background: #fbf7f1; box-shadow: inset 0 0 0 1px #f1e9dd; }
.po .po-part__title { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 400 27px/1.2 'Cabin Sketch', 'Neucha', Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #3c4741; }
.po-sign { position: relative; flex: none; width: 46px; height: 48px; }
.po-js .po-part:not(.is-in) { opacity: 0; translate: 0 34px; }
.po-part.is-in { animation: po-rise .7s cubic-bezier(.3, 1.2, .5, 1) backwards; }
@keyframes po-rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }

/* the padlock: open until its part is read, then it clicks shut */
.po--privacy .po-sign i { position: absolute; left: 5px; bottom: 0; width: 36px; height: 29px; border-radius: 7px; background: linear-gradient(#ffd23f, #e9b400); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); }
.po--privacy .po-sign i::before { content: ''; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #6b4e00; }
.po--privacy .po-sign i::after { content: ''; position: absolute; left: 50%; top: 13px; width: 4px; height: 8px; margin-left: -2px; border-radius: 0 0 2px 2px; background: #6b4e00; }
.po--privacy .po-sign::before { content: ''; position: absolute; left: 11px; top: 4px; width: 24px; height: 24px; box-sizing: border-box; border: 5px solid #8e999f; border-bottom: 0; border-radius: 14px 14px 0 0; transform-origin: 100% 100%; transition: translate .35s cubic-bezier(.5, 0, .7, .4), rotate .35s cubic-bezier(.5, 0, .7, .4); }
.po-js .po--privacy .po-part:not(.is-read) .po-sign::before { translate: 0 -10px; rotate: 28deg; }
.po--privacy .po-part.is-read .po-sign i { animation: po-click .35s .3s ease-out; }
@keyframes po-click { 40% { translate: 0 3px; scale: 1.08 .92; } }

/* the cookie: a bite is taken out of it when its part is read */
.po--cookies .po-sign i { position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 30% 35%, #5a3418 0 3px, transparent 3.5px), radial-gradient(circle at 62% 28%, #5a3418 0 2.5px, transparent 3px), radial-gradient(circle at 55% 62%, #5a3418 0 3px, transparent 3.5px), radial-gradient(circle at 28% 70%, #5a3418 0 2.5px, transparent 3px), radial-gradient(circle at 76% 55%, #5a3418 0 2px, transparent 2.5px), radial-gradient(circle at 40% 38%, #edbb76, #c98a3c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); -webkit-mask: radial-gradient(circle at 96% 10%, transparent 0 var(--bite), #000 calc(var(--bite) + .5px)); mask: radial-gradient(circle at 96% 10%, transparent 0 var(--bite), #000 calc(var(--bite) + .5px)); transition: --bite .25s cubic-bezier(.5, 0, .3, 1.4) .2s; }
.po--cookies .po-part.is-read .po-sign i, html:not(.po-js) .po--cookies .po-sign i { --bite: 18px; }

/* the terms of use (2026-11-13): a green circle in which a tick is drawn when its part is read */
.po--terms .po-sign i { position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(#8fd16a, #5aa83a); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.po--terms .po-sign i::after { content: ''; position: absolute; left: 12px; top: 10px; width: 16px; height: 9px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; rotate: -45deg; transform-origin: 30% 70%; scale: 1; transition: scale .3s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.po-js .po--terms .po-part:not(.is-read) .po-sign i::after { scale: 0; }

/* the parts' own subheadings, tables and notes (the policies of 2026-11-13) */
.po .po-text h3 { margin: 22px 0 10px; font: 700 17px/1.4 'Open Sans', Arial, sans-serif !important; letter-spacing: 0; text-transform: none; color: #3c4741; }
.po .po-text h3:first-child { margin-top: 4px; }
.po .po-text .po-table { margin: 4px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; box-shadow: inset 0 0 0 1px #eadfcf; }
.po .po-text table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }
.po .po-text th, .po .po-text td { padding: 10px 12px; border-bottom: 1px solid #f0e7da; text-align: left; vertical-align: top; font: 400 14px/1.55 'Open Sans', Arial, sans-serif; color: #555; }
.po .po-text th { background: #f6efe4; font-weight: 700; color: #3c4741; }
.po .po-text tr:last-child td { border-bottom: 0; }
.po .po-text code { padding: 1px 6px; border-radius: 6px; background: #f3ede3; font: 600 13px/1.4 Consolas, Menlo, monospace; color: #6b4e2a; overflow-wrap: anywhere; }
.po .po-text .po-updated { color: #8a8a8a !important; font-size: 14px !important; }
.po .mch-cookie-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0 16px; }
.po .mch-cookie-choice .btn { margin: 0; }
.po .mch-cookie-choice span { font: 600 14px/1.4 'Open Sans', Arial, sans-serif; color: #2f7d26; }
.po .po-text ul { list-style: disc; }
.po .po-text ul ul { list-style: circle; }
/* a phone: each row of a table is a card, the column's name above each cell (data-label) */
@media only screen and (max-width: 600px) {
	.po .po-text .po-table { overflow: visible; border-radius: 0; box-shadow: none; }
	.po .po-text table { min-width: 0; background: none; }
	.po .po-text thead { display: none; }
	.po .po-text tr { display: block; margin: 0 0 10px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #eadfcf; }
	.po .po-text td { display: block; padding: 8px 12px; }
	.po .po-text tr td:last-child { border-bottom: 0; }
	.po .po-text td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 12px/1.4 'Open Sans', Arial, sans-serif; letter-spacing: .02em; color: #9a8466; }
}

/* the editor's text, as it is, in the site's letters */
.po .po-text p, .po .po-text li { font-family: 'Open Sans', Arial, sans-serif !important; font-size: 15.5px !important; line-height: 1.75 !important; color: #555 !important; }
.po .po-text p { margin: 0 0 14px; }
.po .po-text ol, .po .po-text ul { margin: 0 0 18px; padding-left: 26px; }
.po .po-text li { margin: 0 0 10px; padding-left: 4px; }
.po .po-text li::before { display: none; }
.po .po-text ol { list-style: decimal; }
.po .po-text ol ol { list-style: lower-latin; }
.po .po-text li::marker { color: #52aae8; font-weight: 700; }
.po .po-text strong, .po .po-text b { color: #3c4741; }
.po .po-text a { color: #2f7fb8; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.po .po-text a:hover { color: #ff5736; }
.po-intro { margin: 0 0 26px; }

@media only screen and (max-width: 768px) {
	.po { padding: 30px 0 80px; }
	/* a phone: the text gets the width – a thin board, the snail's lane narrow at the edge of the sheet */
	.po-wrap { padding: 0 8px; }
	.po-board { padding: 8px 6px 10px; border-radius: 12px; }
	.po-clip { width: 140px; height: 48px; margin-left: -70px; top: -24px; }
	.po-clip::before { width: 56px; margin-left: -28px; }
	.po-sheet { padding: 46px 8px 24px 32px; }
	.po-lane { left: 2px; top: 46px; bottom: 24px; }
	.po-snail { left: -4px; width: 36px; height: 26px; top: -10px; }
	.po-part { margin-bottom: 20px; padding: 18px 12px 4px; }
	.po .po-text ol, .po .po-text ul { padding-left: 20px; }
	.po .po-text li { padding-left: 2px; }
	.po .po-part__title { gap: 10px; font-size: 22px; }
	.po-sign { width: 38px; height: 40px; scale: .85; }
	.po .po-text p, .po .po-text li { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.po-snail.is-crawl { animation: none; }
}