/* ==========================================================================
   Contract Loop — legal pages (terms of use, EN / NL / FR).

   Same look as privacy-policy.html, which carries its own copy of these rules
   because it must also render on internal.contractloop.eu. The terms only live
   on the marketing site, so the three language versions share this file.
   Brand tokens are copied from :root in style.css.
   ========================================================================== */

:root {
    --navy: #03234A;
    --blue: #0268BF;
    --pale: #EAF2FB;
    --pale-50: #F6FAFE;
    --paper: #FFFFFF;
    --ink: #10243B;
    --muted: #5A7085;
    --line: #DFE8F3;
    --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--pale-50);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Jost', 'Century Gothic', Futura, sans-serif;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.02em;
}

a { color: var(--blue); overflow-wrap: anywhere; }
a:hover { color: var(--navy); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip-link {
    position: absolute; left: -9999px;
    background: var(--navy); color: #fff;
    padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 10;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- header -------------------------------------------------------------- */

.masthead { background: var(--navy); padding: 1.1rem 0; }
.masthead .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead img { height: 34px; width: auto; display: block; }

.lang-switch {
    display: flex; gap: 2px; padding: 3px;
    font-family: 'Jost', sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px;
}
.lang-switch a {
    padding: .22rem .55rem; border-radius: 6px; line-height: 1.5;
    color: rgba(255, 255, 255, .68); text-decoration: none;
}
.lang-switch a[aria-current] { background: #fff; color: var(--navy); }
.lang-switch a:not([aria-current]):hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* --- layout -------------------------------------------------------------- */

.wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }

.hero { padding-block: 3rem 2rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.hero .updated {
    display: inline-block; margin-top: 1.25rem;
    font-size: .85rem; color: var(--muted);
    background: var(--pale); border: 1px solid var(--line);
    border-radius: 999px; padding: .3rem .85rem;
}

main { padding-bottom: 3.5rem; }
main > .wrap > p { margin-top: .85rem; }
main > .wrap > p:first-child { margin-top: 0; }

.parties {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-top: .85rem;
}

section { margin-top: 2.5rem; }
section h2 { font-size: 1.3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
section > p, section > ul, section > ol { margin-top: .85rem; }
section h3 { font-size: 1rem; margin-top: 1.5rem; }
section h3 + p { margin-top: .5rem; }

ul { padding-left: 1.25rem; }
li { margin-top: .4rem; }

/* (a), (b), (c) sub-clauses: the letter is part of the supplied text, so the
   list carries no marker of its own. */
ol.clauses { list-style: none; padding-left: 1.25rem; }
ol.clauses li { margin-top: .5rem; }

/* Data the client has not supplied yet is shown as such, not invented. */
mark.pending {
    background: #FDF1DE; color: #6B4407;
    border: 1px dashed #B4720F; border-radius: 4px;
    padding: 0 .3rem;
}

/* --- footer -------------------------------------------------------------- */

.foot {
    background: var(--navy);
    color: rgba(255, 255, 255, .72);
    padding: 1.75rem 0;
    font-size: .9rem;
}
.foot a { color: #4FC3F7; }
.foot a:hover { color: #fff; }
.foot .row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

@media (max-width: 480px) {
    body { font-size: 15px; }
    .hero { padding-block: 2.25rem 1.5rem; }
    .masthead img { height: 28px; }
}