/* ============================================================
   GWS — legal pages (Imprint, Privacy, Terms, Disclaimer)
   Long reading, so everything is solid, on cream, at a comfortable
   measure. A contents list rides alongside on wide screens; the four
   pages are one set, so each carries tabs to the other three.
   ============================================================ */

.legal-page{background:var(--cream)}
.legal{padding-block:clamp(36px,5vw,72px) var(--band)}

/* ---- head ------------------------------------------------------- */
.legal-head{max-width:74ch;margin-bottom:clamp(36px,5vw,64px)}
.legal-tabs{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 26px;
  padding-bottom:14px;border-bottom:1px solid var(--hairline-on-cream)}
.legal-tabs a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm-grey);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.legal-tabs a:hover{color:var(--ink)}
.legal-tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
.legal-head .heading{margin:0 0 14px}
.legal-meta{margin:0 0 18px;font-size:13px;letter-spacing:.03em;color:var(--warm-grey)}
.legal-head > p:not(.legal-meta){font-family:var(--f-serif);font-size:18px;line-height:1.6;margin:0 0 14px}

/* ---- layout ----------------------------------------------------- */
.legal-grid{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);align-items:start}

.legal-toc{position:sticky;top:120px;max-height:calc(100vh - 150px);overflow:auto;
  padding-right:6px;font-size:13px;line-height:1.35}
.legal-toc .micro{margin:0 0 12px}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hairline-on-cream)}
.legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;
  color:var(--warm-grey);text-decoration:none;border-left:2px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.legal-toc a:hover{color:var(--ink)}
.legal-toc a.is-current{color:var(--ink);border-left-color:var(--signal)}

/* ---- reading ---------------------------------------------------- */
.legal-body{max-width:70ch;font-family:var(--f-serif);font-size:17px;line-height:1.7;color:var(--ink)}
.legal-body h2{font-family:var(--f-sans);font-weight:600;font-size:clamp(19px,1.7vw,22px);
  letter-spacing:-.01em;line-height:1.3;margin:52px 0 14px;padding-top:28px;
  border-top:1px solid var(--hairline-on-cream);scroll-margin-top:120px}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-family:var(--f-sans);font-weight:600;font-size:15.5px;letter-spacing:.01em;margin:28px 0 8px}
.legal-body p{margin:0 0 14px}
.legal-body ul,.legal-body ol{margin:0 0 18px;padding-left:1.35em}
.legal-body li{margin:0 0 7px;padding-left:.2em}
.legal-body li > ul{margin:8px 0 4px}
.legal-body ul li::marker{color:var(--signal)}
.legal-body ol li::marker{font-family:var(--f-sans);font-size:.9em;font-weight:600;color:var(--warm-grey)}
.legal-body b{font-family:var(--f-sans);font-weight:600;font-size:.93em}
.legal-body a{color:var(--ink);text-decoration-color:var(--signal);text-underline-offset:3px}

/* numbered clauses: the number hangs in its own column */
.clause{display:grid;grid-template-columns:3.1em minmax(0,1fr);gap:0 .5em}
.clause-n{font-family:var(--f-sans);font-size:13px;font-weight:600;color:var(--warm-grey);
  padding-top:.28em;font-variant-numeric:tabular-nums}

/* company details */
.legal-card{margin:18px 0 22px;padding:20px 22px;background:rgba(17,40,32,.04);
  border-left:2px solid var(--signal);font-family:var(--f-sans);font-size:14.5px;line-height:1.5}
.legal-card-title{margin:0 0 4px;font-weight:600}
.legal-card-title + dl{margin-top:12px}
.legal-card dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 24px;margin:0}
.legal-card dt{color:var(--warm-grey)}
.legal-card dd{margin:0;overflow-wrap:anywhere}

.legal-body address,.legal-head address{font-style:normal;font-family:var(--f-sans);font-size:15px;
  line-height:1.65;margin:10px 0 18px;padding-left:16px;border-left:2px solid var(--hairline-on-cream)}


/* footer: the legal pages, one per line, and plainly links */
.footer-legal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  font-size:14px;line-height:1.4;color:var(--sand)}
.footer-legal a,.footer-legal .cc-open{color:var(--sand);text-decoration:underline;
  text-decoration-color:rgba(216,211,199,.35);text-underline-offset:4px;text-decoration-thickness:1px;
  transition:color .2s ease,text-decoration-color .2s ease}
.footer-legal a:hover,.footer-legal .cc-open:hover{color:var(--cream);text-decoration-color:var(--signal)}
.footer-legal a:focus-visible,.footer-legal .cc-open:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.footer > .wrap > .footer-legal{margin-top:28px}

/* system.html still lists the assessment in its footer row */
.footer .nav a.footer-assess{color:#9FC7E8;font-weight:600}

/* ---- The footer ---------------------------------------------------
   The usual conventions: the mark and line, then three labelled
   columns that all start on one line (Explore, Tools, Get in touch),
   then a bottom bar with the copyright and the legal links, small and
   in a row. Links are plain until hovered. Markup: tools/footgen.py. */
.ft-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,1.15fr) minmax(0,.95fr);
  gap:44px clamp(28px,3.6vw,60px);align-items:start}
.ft-home{display:inline-block}
.ft-logo{display:block;height:clamp(62px,5.4vw,78px);width:auto}
.ft-line{margin:24px 0 0;max-width:30ch;font-size:17px;line-height:1.55;color:var(--sand)}
.ft-h{margin:2px 0 18px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,229,.55)}
.ft-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ft-links a{font-size:15.5px;color:var(--cream);text-decoration:none;transition:color .2s ease}
.ft-links a:hover{color:#9FC7E8}
/* the one tool, as a small card */
.ft-tool{display:block;max-width:300px;padding:15px 18px 16px;border:1px solid rgba(216,211,199,.18);border-radius:4px;
  background:rgba(243,239,229,.035);text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.ft-tool b{display:block;font-weight:600;font-size:15px;line-height:1.35;color:#9FC7E8}
.ft-tool b::after{content:"\00a0\2192"}
.ft-tool span{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--sand)}
.ft-tool:hover{border-color:rgba(159,199,232,.6);background:rgba(159,199,232,.07)}
.ft-tools{display:grid;gap:10px;max-width:300px}
.ft-bottom-r{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.ft-bottom .lang{font-size:13px}
.ft-bottom .lang a{color:var(--sand);text-decoration:none}
.ft-bottom .lang a:hover{color:var(--cream)}
.ft-addr{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--sand)}
/* inside a labelled column the line labels step down, so they don't read as headings */
.ft-col .footer-contact{gap:14px}
.ft-col .footer-contact .fc-k{font-size:13px;letter-spacing:0;text-transform:none}
/* the bottom bar */
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;
  margin-top:clamp(44px,5vw,68px);padding-top:22px;border-top:1px solid rgba(216,211,199,.14)}
.ft-copy{margin:0;font-size:13px;color:var(--sand)}
.ft-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
.ft-legal a,.ft-legal .cc-open{font:inherit;font-size:13px;color:var(--sand);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
  transition:color .2s ease}
.ft-legal a:hover,.ft-legal .cc-open:hover{color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#9FC7E8}
.ft-links a:focus-visible,.ft-tool:focus-visible,.ft-home:focus-visible,.ft-legal a:focus-visible,.ft-legal .cc-open:focus-visible{
  outline:2px solid #9FC7E8;outline-offset:4px}
/* tablets: the mark and line on a row of their own, the three columns under it */
@media (max-width:1100px){
  .ft-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-brand{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(32px,6vw,72px)}
  .ft-line{margin:0}
}
/* phones: Explore and Get in touch side by side, the tool across, the
   bottom bar stacked; every link a finger's height */
@media (max-width:640px){
  .ft-top{grid-template-columns:minmax(0,1fr);gap:34px}
  .ft-brand{display:block}
  .ft-line{margin-top:20px}
  .ft-links{display:flex;flex-wrap:wrap;gap:0 26px}
  .ft-links a{display:inline-block;padding:8px 0}
  .ft-h{margin-bottom:10px}
  .ft-col .footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ft-col--contact{order:2}
  .ft-col--tools{order:3}
  .ft-tool,.ft-tools{max-width:none}
  .ft-bottom-r{flex-direction:column;align-items:flex-start;gap:6px}
  .ft-bottom{flex-direction:column-reverse;align-items:flex-start;gap:12px}
  .ft-legal{gap:0 22px}
  .ft-legal a,.ft-legal .cc-open{display:inline-block;padding:9px 0}
}

@media (max-width:1024px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{display:none}
}
@media (max-width:560px){
  .legal-body{font-size:16px}
  .legal-card dl{grid-template-columns:1fr;gap:0}
  .legal-card dt{margin-top:10px}
  .legal-card dt:first-child{margin-top:0}
  .clause{grid-template-columns:2.6em minmax(0,1fr)}
}
@media print{
  .site-header,.legal-toc,.legal-tabs,.footer,.cc-banner{display:none}
  .legal-grid{display:block}
  .legal-body{max-width:none;font-size:11pt}
}

/* the direct lines, in every footer */
.footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-contact a{display:flex;flex-direction:column;gap:3px;color:var(--cream);text-decoration:none}
.footer-contact .fc-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.footer-contact .fc-v{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;transition:color .2s ease}
.footer-contact a:hover .fc-v{color:#9FC7E8}
.footer-contact a:focus-visible{outline:2px solid #9FC7E8;outline-offset:3px}
.footer-meta .footer-contact{margin-bottom:10px}

/* phones: footer links a finger's height apart */
@media (max-width:820px){
  .footer-nav,.footer-legal{gap:0}
  .footer-nav a,.footer-legal a,.footer-legal .cc-open{display:inline-block;padding:10px 0}
  .footer .nav a{padding:8px 0}
  .footer-contact{gap:4px}
  .footer-contact a{padding:8px 0}
}