/* ArbStrike: the legal and company pages (terms, privacy, cookies, refunds, 18+, about, contact, 404).
   Loaded after og.css and m2.css; uses their tokens (--v, --d, --t, .wrap, .display, .paper, .btn, .note).
   A black head with the title in the display face and "the short version" on a volt ticket, then the page
   turns white for the reading text: one column of about 70 characters, clauses numbered because legal text
   is cited by number. Nothing here animates. */

/* ---- head ---- */
.lg-head { position: relative; background: #000; color: #fff; }
.lg-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 0 clamp(32px, 6vw, 110px); align-items: end; padding-top: clamp(30px, 4.6vw, 66px); }
.lg-head.solo .wrap { grid-template-columns: minmax(0, 1fr); }
.lg-intro { padding-bottom: clamp(30px, 4.4vw, 58px); min-width: 0; }
.lg-title { font-size: clamp(4.1rem, 10.4vw, 10.2rem); max-width: 4.7em; overflow-wrap: break-word; }
.lg-head.solo .lg-title { max-width: 6.4em; }
.lg-title:focus { outline: none; }
.lg-lede { margin-top: 20px; max-width: 37rem; font-size: clamp(1.04rem, 1.3vw, 1.18rem); line-height: 1.5; color: #D2D2D2; }
.lg-date { margin-top: 14px; font-size: .9rem; color: #949494; font-variant-numeric: tabular-nums; }

/* the short version: the hero's ticket, used for the five lines a reader must not miss */
.lg-short { align-self: center; background: var(--v); color: #000; padding: 18px 22px 20px; box-shadow: -8px -8px 0 #fff; transform: rotate(-2.2deg); margin: 12px 6px clamp(38px, 5vw, 64px) 8px; }
.lg-short h2 { font: italic 900 2.1rem/.9 var(--d); text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid #000; }
.lg-short ul { display: grid; }
.lg-short li { padding: 9px 0 8px; border-bottom: 1px solid rgba(0, 0, 0, .28); font-size: .96rem; line-height: 1.38; font-weight: 600; }
.lg-short li:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-short p { margin-top: 10px; font-size: .8rem; line-height: 1.4; color: #2B2B2B; }

/* the set of documents: leaning tabs standing on the white page; the open one is part of the page */
.lg-docs { grid-column: 1 / -1; display: flex; gap: 5px; padding-left: 6px; margin-bottom: -1px; }
.lg-docs a { display: block; padding: 13px 20px 8px; background: #1F1F1F; color: #D2D2D2; font: italic 900 1.35rem/1 var(--d); text-transform: uppercase; letter-spacing: .012em; text-decoration: none; white-space: nowrap; transform: skewX(-9deg); transition: background-color .14s, color .14s; }
.lg-docs a > span { display: block; transform: skewX(9deg); }
.lg-docs a[aria-current="page"] { background: #fff; color: #000; }
.lg-docs a:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .lg-docs a:not([aria-current]):hover { background: #333; color: #fff; } }

/* ---- the reading page ---- */
.lg-body { padding: clamp(38px, 5.6vw, 80px) 0 clamp(64px, 9vw, 124px); }
.lg-body > .wrap { display: grid; grid-template-columns: 15.5rem minmax(0, 45rem); gap: 0 clamp(36px, 6.5vw, 104px); align-items: start; }
.lg-body.solo > .wrap { grid-template-columns: minmax(0, 45rem); }
/* about, contact: the main column, and a grey panel beside it for what comes second */
.lg-body.duo > .wrap { grid-template-columns: minmax(0, 1fr); }
.lg-body.duo .lg-text { display: grid; grid-template-columns: minmax(0, 45rem) minmax(0, 25rem); justify-content: space-between; gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.lg-side { padding: 24px 26px 28px; background: #F3F3EF; border-top: 6px solid #000; font-size: .98rem; line-height: 1.6; }
.lg-side h2 { font-size: 1.85rem; }
.lg-side section + section { margin-top: 34px; }

.lg-toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: hidden auto; scrollbar-width: thin; font-size: .92rem; line-height: 1.3; }
.lg-toc summary { list-style: none; font: italic 900 1.5rem/1 var(--d); text-transform: uppercase; padding-bottom: 10px; border-bottom: 3px solid #000; cursor: default; }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc ol { display: grid; }
.lg-toc a { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); padding: 7px 6px 6px 0; color: #444; text-decoration: none; border-bottom: 1px solid #D9D9D3; }
.lg-toc a b { font-variant-numeric: tabular-nums; font-weight: 700; color: #000; }
.lg-toc a.on { color: #000; font-weight: 700; background: linear-gradient(var(--v), var(--v)) 0 0 / 1.55em 100% no-repeat; }
.lg-toc a b { padding-left: .35em; }
@media (hover: hover) { .lg-toc a:hover { color: #000; } }

.lg-text { font-size: 1.0625rem; line-height: 1.66; color: #1B1B1B; min-width: 0; overflow-wrap: break-word; }
.lg-text section + section { margin-top: clamp(44px, 5vw, 66px); }
.lg-text section > * + * { margin-top: .85em; }
.lg-text h2 { display: flex; align-items: flex-start; gap: 14px; font: italic 900 clamp(1.95rem, 3.3vw, 2.65rem)/.94 var(--d); text-transform: uppercase; color: #000; scroll-margin-top: 84px; }
.lg-text h2[data-n]::before { content: attr(data-n); flex: none; min-width: 1.42em; padding: .1em .3em 0; margin-top: -.06em; background: #000; color: var(--v); text-align: center; font-variant-numeric: tabular-nums; transform: skewX(-9deg); }
.lg-text h2 + * { margin-top: 16px; }
.lg-text h3 { font: 800 1.08rem/1.35 var(--t); color: #000; margin-top: 1.7em; scroll-margin-top: 84px; }
.lg-text h3 + * { margin-top: .4em; }
.lg-text b, .lg-text strong { font-weight: 700; color: #000; }
.lg-text a:not(.btn) { color: #000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { .lg-text a:not(.btn):hover { background: var(--v); } }
.lg-text ul, .lg-text ol { display: grid; gap: 7px; }
.lg-text ul > li { position: relative; padding-left: 24px; }
.lg-text ul > li::before { content: ""; position: absolute; left: 1px; top: .68em; width: 11px; height: 5px; background: #000; transform: skewX(-14deg); }
.lg-text ol { counter-reset: lg; }
.lg-text ol > li { position: relative; padding-left: 30px; counter-increment: lg; }
.lg-text ol > li::before { content: counter(lg) "."; position: absolute; left: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.lg-text .note { color: #1B1B1B; border-left-color: #000; }
.lg-text .lg-key { padding: 16px 20px 15px; background: var(--v); color: #000; font-weight: 600; line-height: 1.5; }
.lg-text address { font-style: normal; }
.lg-small { font-size: .9rem; line-height: 1.55; color: #555; }

/* a blank the owner still has to fill in: hazard tape, so it cannot be missed on a live page */
.fill { padding: 1px 7px; color: #000; font-weight: 700; background: repeating-linear-gradient(-60deg, var(--v) 0 7px, #F0FF9C 7px 14px); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ruled tables; under 760 px each row is a block and the column names move in front of the cells */
.lg-table { width: 100%; border-collapse: collapse; border-top: 3px solid #000; font-size: .95rem; line-height: 1.5; }
.lg-table th, .lg-table td { text-align: left; vertical-align: top; padding: 11px 18px 10px 0; border-bottom: 1px solid #000; }
.lg-table th:last-child, .lg-table td:last-child { padding-right: 0; }
.lg-table thead th { font-weight: 800; font-size: .84rem; color: #000; }
.lg-table tbody th { font-weight: 700; color: #000; }
.lg-table code, .lg-text code { font: 600 .92em ui-monospace, "Cascadia Mono", Consolas, monospace; background: #EFEFEA; padding: 1px 5px; }
.lg-table .n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-wide { width: min(100vw - 2 * var(--pad), 62rem); max-width: none; }

/* ---- 18+: the helplines ---- */
.lg-help { border-top: 3px solid #000; }
.lg-help > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 4px 22px; align-items: baseline; padding: 13px 0 11px; border-bottom: 1px solid #000; }
.lg-text ul.lg-help > li { padding-left: 0; }
.lg-text ul.lg-help > li::before { content: none; }
.lg-help .where { font: italic 900 1.45rem/1 var(--d); text-transform: uppercase; }
.lg-help .who span { display: block; font-size: .9rem; color: #555; }
.lg-help .tel { font: italic 900 1.7rem/1 var(--d); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.lg-text .lg-help a.tel { text-decoration: none; }
.lg-age { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.lg-age b { flex: none; font: italic 900 clamp(6.5rem, 17vw, 15rem)/.76 var(--d); color: var(--v); letter-spacing: -.02em; }
.lg-age .lg-title { font-size: clamp(2.7rem, 6.2vw, 6rem); }

/* ---- contact: one address, then the subjects as rows that open a ready-made email ---- */
.lg-mail { display: inline-block; margin-top: 4px; padding: .12em .32em 0; background: var(--v); color: #000; font: italic 900 clamp(1.9rem, 5.6vw, 4.4rem)/1 var(--d); text-transform: uppercase; text-decoration: none; transform: skewX(-9deg); overflow-wrap: anywhere; }
.lg-text a.lg-mail { text-decoration: none; }
.lg-topics { border-top: 3px solid #000; }
.lg-text ul.lg-topics { gap: 0; }
.lg-text ul.lg-topics > li { padding: 0; }
.lg-text ul.lg-topics > li::before { content: none; }
.lg-topics a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 15px 4px 13px 0; border-bottom: 1px solid #000; }
.lg-text .lg-topics a { text-decoration: none; }
.lg-topics a b { font: italic 900 1.7rem/1 var(--d); text-transform: uppercase; }
.lg-topics a span { font-size: .95rem; line-height: 1.45; color: #333; }
.lg-topics a i { display: block; width: 22px; height: 12px; background: #000; clip-path: polygon(0 36%, 62% 36%, 62% 0, 100% 50%, 62% 100%, 62% 64%, 0 64%); transition: transform .16s var(--out); }
@media (hover: hover) { .lg-text .lg-topics a:hover { background: var(--v); } .lg-topics a:hover i { transform: translateX(5px); } }

/* ---- cookie page: the choice in force, and the two buttons again ---- */
.lg-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; border: 2px solid #000; }
.lg-choice p { flex: 1 1 15rem; margin: 0; }
.lg-choice div { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- 404: a row of the board that the server did not send ---- */
.nf { position: relative; background: #000; color: #fff; min-height: calc(100svh - 63px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.nf .wrap { padding-block: clamp(40px, 7vw, 96px); display: grid; gap: clamp(22px, 3vw, 34px); }
.nf-n { font: italic 900 clamp(8.5rem, 25vw, 21rem)/.74 var(--d); letter-spacing: -.03em; color: var(--v); margin-left: -.03em; }
.nf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 56rem; padding: 10px 18px 8px; background: #0E0E0E; border-left: 14px solid var(--v); }
.nf-row .pc { font-size: 2rem; line-height: .9; }
.nf-row .rs { font: italic 900 1.35rem/1 var(--d); text-transform: uppercase; white-space: nowrap; }
.nf-row .tp { height: 22px; background: repeating-linear-gradient(-60deg, #fff 0 6px, transparent 6px 12px); opacity: .5; transform: skewX(-12deg); }
.nf-row .tg { font: italic 900 1.05rem/1 var(--d); text-transform: uppercase; background: var(--v); color: #000; padding: 4px 11px 2px; transform: skewX(-9deg); white-space: nowrap; }
.nf h1 { font-size: clamp(2.8rem, 6.6vw, 6rem); }
.nf p { max-width: 34rem; color: #D2D2D2; font-size: 1.08rem; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* ---- narrower screens ---- */
@media (max-width: 1040px) {
  .lg-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .lg-short { justify-self: start; max-width: 30rem; margin: 0 0 clamp(34px, 6vw, 50px) 10px; }
  .lg-body > .wrap { grid-template-columns: minmax(0, 45rem); }
  .lg-toc { position: static; max-height: none; margin-bottom: 34px; border: 2px solid #000; }
  .lg-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 4px 14px 0; border-bottom: 0; cursor: pointer; }
  .lg-toc summary::after { content: ""; width: 14px; height: 9px; background: #000; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .16s var(--out); }
  .lg-toc[open] summary::after { transform: rotate(180deg); }
  .lg-toc[open] summary { border-bottom: 2px solid #000; }
  .lg-toc ol { padding: 2px 14px 6px; }
  .lg-toc a { padding-block: 11px 10px; }
  .lg-toc li:last-child a { border-bottom: 0; }
  .lg-wide { width: 100%; }
  .lg-body.duo .lg-text { grid-template-columns: minmax(0, 45rem); justify-content: start; }
  .lg-side { margin-top: 48px; }
}
@media (max-width: 760px) {
  .lg-intro { padding-bottom: 28px; }
  .lg-age { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lg-age b { font-size: 7.4rem; }
  .lg-age .lg-title { font-size: 3.5rem; max-width: none; }
  .lg-short { margin-left: 8px; margin-right: 2px; box-shadow: -6px -6px 0 #fff; transform: rotate(-1.4deg); padding: 15px 16px 17px; }
  .lg-short h2 { font-size: 1.8rem; }
  .lg-docs { gap: 3px; padding-left: 4px; }
  .lg-docs a { flex: 1 1 auto; padding: 14px 4px 9px; font-size: 1.18rem; text-align: center; }
  .lg-text { font-size: 1.03rem; line-height: 1.62; }
  .lg-text h2 { gap: 11px; }
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table td, .lg-table th { display: block; }
  .lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table tr { padding: 12px 0 11px; border-bottom: 1px solid #000; }
  .lg-table th, .lg-table td { padding: 0; border: 0; }
  .lg-table tbody th { font-size: 1.04rem; margin-bottom: 4px; }
  .lg-table td + td { margin-top: 6px; }
  .lg-table td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: #000; }
  .lg-help > li { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-help .where { grid-column: 1 / -1; font-size: 1.25rem; }
  .lg-help .tel { font-size: 1.55rem; min-height: 44px; display: inline-flex; align-items: center; }
  .lg-topics a { grid-template-columns: minmax(0, 1fr) auto; padding-block: 15px 13px; }
  .lg-topics a span { grid-column: 1; grid-row: 2; }
  .lg-topics a i { grid-row: 1 / 3; grid-column: 2; }
  .lg-choice .btn { flex: 1 1 auto; }
  .nf { min-height: calc(100svh - 120px); }
  .nf-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; border-left-width: 10px; padding-inline: 12px; }
  .nf-row .tp + .tp { display: none; }
  .nf-acts .btn { width: 100%; }
}
@media (max-width: 420px) {
  .lg-help > li { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .nav, .foot, .lg-docs, .lg-toc, .cc, .m2-tabs { display: none !important; }
  .lg-head, .lg-short { background: #fff !important; color: #000 !important; box-shadow: none; transform: none; }
  .lg-lede, .lg-date { color: #000; }
  .lg-body > .wrap { display: block; }
}