/* Teixa, public website.
   Point of view: a well-kept Swiss business document, not a startup landing page.
   Type: the sans-serif family the Swiss QR-bill standard itself prescribes for the payment part
   (Helvetica, Arial, Liberation Sans), from the visitor's system: zero font download, no third-party request.
   References, IBANs and account numbers are set in the system monospace, as on a bank statement.
   Colour: paper and ink. Teal is the weft of the Teixa mark and means one thing only: information that
   travels between applications (the thread). Red is reserved for an overdue amount. Light only, on purpose.
   Radius scale: 2px tags, 4px controls, 8px documents. Shadow only for the one element that floats (mobile menu).
   Motion: only the thread in "Un exemple" is drawn as you scroll; nothing else moves. */

:root {
  --paper: #F5F3EE;
  --paper-2: #ECE9E1;
  --sheet: #FFFFFF;
  --ink: #121619;
  --text: #121619;
  --text-2: #4B5256;
  --text-3: #5D6468;
  --rule: rgba(18, 22, 25, .14);
  --rule-2: rgba(18, 22, 25, .3);
  --thread: #1F5E5B;
  --thread-2: #174744;
  --thread-soft: #DDEAE6;
  --thread-on-ink: #8CC3BC;
  --signal: #A93A29;
  --on-ink: #EDF0EF;
  --on-ink-2: #A9B4B3;

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.9vw, 3.75rem);
  --fs-h1: clamp(2.375rem, 1.1rem + 4.9vw, 5.5rem);

  --r-tag: 2px;
  --r-ctl: 4px;
  --r-doc: 8px;

  --gutter: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 2.2vw, 32px);
  --wrap: 1280px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 24px; }
body { font: 400 var(--fs-base)/1.55 var(--sans); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
p a, li a, dd a, td a { color: var(--thread); }
b, strong, th, dt { font-weight: 700; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }
code, .mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
::selection { background: var(--thread); color: #fff; }
:focus-visible { outline: 3px solid var(--thread); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-ctl); text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.label { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--text-2); letter-spacing: 0; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; border-radius: var(--r-ctl); font: 500 1rem/1.2 var(--sans); text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--thread-2); border-color: var(--thread-2); }
.btn--small { min-height: 40px; padding: 8px 14px; font-size: .9375rem; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.foot .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.foot .btn:hover { background: #fff; border-color: #fff; }

/* ---------- header (not sticky: a document has a letterhead, not a toolbar) ---------- */
.top { border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.top__logo { display: block; margin-right: auto; }
.top__logo img { width: 104px; height: 30px; }
.top__nav { display: flex; gap: 24px; font-size: var(--fs-sm); }
.top__nav a { text-decoration: none; color: var(--text-2); padding: 6px 0; }
.top__nav a:hover { color: var(--text); text-decoration: underline; }
.top__login { font-size: var(--fs-sm); text-decoration: none; }
.top__login:hover { text-decoration: underline; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl); font-size: var(--fs-sm); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: var(--ink); }
.menu[open] summary { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-doc); padding: 8px; z-index: 20; box-shadow: 0 12px 32px -12px rgba(18, 22, 25, .35); }
.menu__panel a { display: flex; justify-content: space-between; gap: 12px; padding: 12px; text-decoration: none; border-radius: var(--r-ctl); }
.menu__panel a:hover { background: var(--paper); }
.menu__panel a span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); }
.menu__panel .btn { justify-content: center; margin-top: 6px; }
.menu__panel .btn:hover { background: var(--thread-2); }

/* ---------- opening ---------- */
.open { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.open__kicker { grid-column: 1 / -1; margin-bottom: 24px; }
.open h1 { grid-column: 1 / span 11; font-size: var(--fs-h1); letter-spacing: -.035em; line-height: 1; max-width: 17ch; }
.open h1 .t { color: var(--thread); }
.open__lead { grid-column: 1 / span 6; margin-top: clamp(28px, 4vw, 48px); }
.open__lead p { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 38em; }
.open__lead p + p { margin-top: 14px; font-size: var(--fs-base); color: var(--text-2); }
.open__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.open__cta a:not(.btn) { font-size: var(--fs-sm); }
.toc { grid-column: 8 / -1; margin-top: clamp(28px, 4vw, 48px); align-self: start; border-top: 2px solid var(--ink); }
.toc h2 { font: 700 var(--fs-sm)/1.4 var(--sans); letter-spacing: 0; padding: 12px 0 10px; }
.toc ol { counter-reset: q; border-top: 1px solid var(--rule); }
.toc li { counter-increment: q; border-bottom: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 2.25em 1fr; gap: 8px; padding: 11px 0; text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
.toc a::before { content: counter(q, decimal-leading-zero); font: 400 var(--fs-xs)/1.7 var(--mono); color: var(--text-3); }
.toc a:hover span { text-decoration: underline; }

/* ---------- shared section scaffolding (each section then takes its own form) ---------- */
.sec { padding: clamp(64px, 8vw, 128px) 0; border-top: 1px solid var(--rule); }
.q { display: block; font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--thread); margin-bottom: 16px; }
.sec h2 { font-size: var(--fs-h2); letter-spacing: -.03em; }
.answer { font-size: var(--fs-lead); line-height: 1.5; margin-top: 20px; max-width: 36em; }
.note { font-size: var(--fs-sm); color: var(--text-2); margin-top: 14px; max-width: 44em; }

/* 1. Swiss rules: dense specification sheet */
.spec__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: 24px; }
.spec__head .answer { font-size: var(--fs-base); }
.spec__table { grid-column: 5 / -1; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; }
.spec table { font-size: var(--fs-sm); line-height: 1.45; border-top: 2px solid var(--ink); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.spec thead th { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--text-3); padding-top: 10px; padding-bottom: 10px; }
.spec tbody th { width: 27%; }
.spec td:last-child { width: 19%; padding-right: 0; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); }

/* 2. One flow end to end: the documents themselves */
.trail-sec { background: var(--paper-2); }
.trail__head { grid-column: 1 / span 9; }
.trail__head .answer { max-width: 40em; }
.trail { grid-column: 1 / -1; position: relative; margin-top: clamp(48px, 6vw, 80px); view-timeline-name: --trail; }
.trail::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--thread); transform-origin: top; }
.step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap); padding-bottom: clamp(40px, 5vw, 72px); }
.step:last-child { padding-bottom: 0; }
.step__knot { grid-column: 1; width: 26px; height: 10px; margin-top: 6px; border-radius: 3px; background: var(--ink); outline: 3px solid var(--paper-2); position: relative; z-index: 1; }
.step__text { grid-column: 2; max-width: 30em; }
.step__app { display: block; margin-bottom: 8px; }
.step h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.2; }
.step p { margin-top: 10px; color: var(--text-2); }
.step__doc { grid-column: 3; }
.carry { background: var(--thread-soft); color: var(--thread-2); padding: 0 3px; border-radius: var(--r-tag); text-decoration: underline 2px var(--thread); text-underline-offset: .18em; }

.doc { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-doc); padding: clamp(16px, 2vw, 24px); font-size: var(--fs-sm); }
.doc__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.doc__top b { font-size: 1rem; }
.doc__meta { color: var(--text-2); font-size: var(--fs-xs); }
.tag { display: inline-block; font: 400 var(--fs-xs)/1.3 var(--mono); padding: 3px 7px; border-radius: var(--r-tag); border: 1px solid var(--rule-2); color: var(--text-2); white-space: nowrap; }
.tag--ok { border-color: var(--thread); color: var(--thread); }
.doc table { margin-top: 4px; }
.doc th, .doc td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-weight: 400; }
.doc thead th { font: 400 var(--fs-xs)/1.3 var(--mono); color: var(--text-3); }
.doc .n { text-align: right; padding-right: 0; white-space: nowrap; }
.doc tfoot td, .doc tfoot th { border-bottom: 0; padding-top: 6px; padding-bottom: 2px; color: var(--text-2); }
.doc tfoot tr.total td, .doc tfoot tr.total th { color: var(--text); font-weight: 700; font-size: 1rem; padding-top: 10px; border-top: 1px solid var(--ink); }
.doc .minus td { color: var(--thread-2); }
.doc .acct { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.doc p { margin-top: 12px; color: var(--text-2); }
.doc + .doc { margin-top: 12px; }
.doc--ledger { background: var(--paper); }

.slip { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--rule-2); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; font-family: Helvetica, Arial, "Liberation Sans", sans-serif; }
.slip__title { grid-column: 1 / -1; font-weight: 700; font-size: .9375rem; }
.qr { width: 150px; height: 150px; }
.slip dl { font-size: var(--fs-xs); line-height: 1.45; }
.slip dt { font-weight: 700; font-size: .6875rem; margin-top: 8px; }
.slip dt:first-child { margin-top: 0; }
.slip dd { font-family: var(--mono); }
.slip dd.plain { font-family: inherit; }

.threads { grid-column: 1 / -1; margin-top: clamp(56px, 6vw, 88px); border-top: 2px solid var(--ink); }
.threads h3 { font: 700 var(--fs-sm)/1.4 var(--sans); letter-spacing: 0; padding: 12px 0; }
.threads li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 4px var(--gap); padding: 14px 0; border-top: 1px solid var(--rule); font-size: var(--fs-sm); }
.threads li b { font-weight: 500; font-size: 1rem; }
.threads .path { color: var(--text-2); }
.threads .path span { color: var(--text); }

/* 3. Before / after */
.swap__head { grid-column: 1 / span 8; }
.swap__table { grid-column: 1 / -1; margin-top: clamp(36px, 5vw, 64px); }
.swap table { border-top: 2px solid var(--ink); }
.swap th, .swap td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); }
.swap thead th { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--text-3); padding-top: 12px; padding-bottom: 12px; }
.swap tbody th { width: 22%; font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.3; }
.swap td.before { width: 33%; color: var(--text-2); }
.swap td.after { padding-right: 0; }
.swap td.after .label { display: block; margin-top: 6px; color: var(--thread); }

/* 4. Applications: a register, not tiles */
.reg__head { grid-column: 1 / span 6; }
.reg__aside { grid-column: 8 / -1; align-self: end; font-size: var(--fs-sm); color: var(--text-2); }
.reg__aside dl { border-top: 1px solid var(--rule); }
.reg__aside div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.reg__aside dt { color: var(--text); font-weight: 700; }
.reg__list { grid-column: 1 / -1; margin-top: clamp(36px, 5vw, 64px); border-top: 2px solid var(--ink); }
.app { border-bottom: 1px solid var(--rule); }
.app summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3em minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr) 1.5em; gap: 4px var(--gap); align-items: baseline; padding: 18px 0; }
.app summary::-webkit-details-marker { display: none; }
.app summary:hover { background: var(--paper-2); }
.app summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.app__n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); padding-left: 4px; }
.app h3 { font-size: 1.375rem; letter-spacing: -.015em; }
.app__one { color: var(--text-2); font-size: var(--fs-sm); }
.app__state { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); }
.app__sign { font-family: var(--mono); text-align: right; padding-right: 4px; }
.app__sign::before { content: "+"; }
.app[open] .app__sign::before { content: "\2212"; }
.app__body { display: grid; grid-template-columns: 3em minmax(0, 3fr) minmax(0, 8fr) 1.5em; gap: var(--gap); padding: 0 0 28px; }
.app__body > p { grid-column: 2; color: var(--text-2); font-size: var(--fs-sm); }
.app__body ul { grid-column: 3; font-size: var(--fs-sm); }
.app__body li { padding: 7px 0 7px 18px; position: relative; border-top: 1px solid var(--rule); }
.app__body li:first-child { border-top: 0; padding-top: 0; }
.app__body li::before { content: ""; position: absolute; left: 0; top: 1em; width: 8px; height: 2px; background: var(--ink); }
.app__body li:first-child::before { top: .55em; }
.app__links { grid-column: 3; font-size: var(--fs-xs); font-family: var(--mono); color: var(--text-2); margin-top: 4px; }
.app__links a { color: var(--thread); margin-left: 6px; }

/* 5. Data: editorial long-form with margin notes */
.data__head { grid-column: 1 / span 9; }
.data__text { grid-column: 1 / span 7; margin-top: clamp(32px, 4vw, 56px); }
.data__text p { font-size: 1.1875rem; line-height: 1.65; max-width: 34em; }
.data__text p + p { margin-top: 1.1em; }
.data__text h3 { font-size: var(--fs-h3); margin: 48px 0 16px; }
.roles { border-top: 2px solid var(--ink); font-size: var(--fs-base); }
.roles th, .roles td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.roles th { width: 30%; }
.roles td { color: var(--text-2); padding-right: 0; }
.margin { grid-column: 9 / -1; margin-top: clamp(32px, 4vw, 56px); align-self: start; font-size: var(--fs-sm); }
.margin div { padding: 14px 0; border-top: 1px solid var(--rule); }
.margin div:first-child { border-top: 2px solid var(--ink); }
.margin dt { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--text-3); margin-bottom: 4px; }
.margin dd { line-height: 1.5; }

/* 6. Switching: a checklist */
.move__head { grid-column: 1 / span 7; }
.move__list { grid-column: 1 / -1; margin-top: clamp(36px, 5vw, 56px); counter-reset: m; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.move__list li { counter-increment: m; display: grid; grid-template-columns: 3.25rem 1fr; padding: 18px 0; border-top: 1px solid var(--rule); }
.move__list li::before { content: counter(m); font-size: 2rem; line-height: 1; font-weight: 300; color: var(--thread); }
.move__list b { display: block; font-weight: 500; font-size: 1.125rem; margin-bottom: 4px; }
.move__list span { color: var(--text-2); font-size: var(--fs-sm); display: block; }
.move__after { grid-column: 1 / span 8; margin-top: 32px; padding: 20px 24px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-doc); }
.move__after p { color: var(--text-2); }
.move__after b { color: var(--text); }

/* 7. Plain questions list */
.faq__head { grid-column: 1 / span 4; align-self: start; }
.faq__list { grid-column: 5 / -1; border-top: 2px solid var(--ink); }
.faq__list div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.faq__list dt { font-weight: 500; font-size: 1.1875rem; letter-spacing: -.01em; }
.faq__list dd { margin-top: 6px; color: var(--text-2); max-width: 40em; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--on-ink); padding: clamp(56px, 7vw, 96px) 0 28px; }
.foot :focus-visible { outline-color: var(--thread-on-ink); }
.foot__close { grid-column: 1 / span 7; }
.foot__close p { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; max-width: 18em; }
.foot__close p + p { font-size: var(--fs-base); letter-spacing: 0; font-weight: 400; color: var(--on-ink-2); margin-top: 14px; line-height: 1.55; }
.foot__close .open__cta a:not(.btn) { color: var(--on-ink); }
.foot__cols { grid-column: 9 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-self: start; }
.foot h2 { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--on-ink-2); margin-bottom: 10px; letter-spacing: 0; }
.foot li { padding: 3px 0; font-size: var(--fs-sm); }
.foot a { color: var(--on-ink); text-decoration: none; } /* links in lists would otherwise take the teal link colour: 2.4:1 on the dark footer */
.foot a:hover { text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid rgba(237, 240, 239, .16); font-size: var(--fs-xs); color: var(--on-ink-2); }
.foot__base img { width: 104px; height: 30px; }
.foot__base p a { text-decoration: underline; text-underline-offset: 2px; } /* a link inside a sentence needs more than colour */

/* ---------- legal pages & 404 ---------- */
.page { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.legal { grid-column: 1 / span 8; }
.legal h1 { font-size: var(--fs-h2); letter-spacing: -.03em; margin: 12px 0 28px; }
.legal h2 { font-size: 1.375rem; letter-spacing: -.015em; margin: 40px 0 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.legal p, .legal li { max-width: 40em; }
.legal ul { margin-top: 8px; }
.legal li { padding: 6px 0 6px 18px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 2px; background: var(--ink); }
.legal .version { margin-top: 40px; font-size: var(--fs-sm); color: var(--text-2); }
.draft { margin-bottom: 8px; padding: 14px 18px; background: var(--sheet); border: 1px solid var(--signal); border-radius: var(--r-doc); font-size: var(--fs-sm); }
.legal__aside { grid-column: 10 / -1; align-self: start; position: sticky; top: 24px; font-size: var(--fs-sm); border-top: 2px solid var(--ink); }
.legal__aside a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.legal__aside a:hover { text-decoration: underline; }
.legal__aside a[aria-current] { font-weight: 700; }
.lost__text { grid-column: 1 / span 6; align-self: center; }
.lost__text h1 { font-size: var(--fs-h1); letter-spacing: -.035em; line-height: 1; margin: 16px 0 24px; max-width: 10ch; }
.lost__text h1 .t { color: var(--thread); }
.lost__text p { font-size: var(--fs-lead); max-width: 30em; }
.lost__art { grid-column: 8 / -1; align-self: center; }
.lost__art svg { width: 100%; height: auto; display: block; }
.lost__art .warp { stroke: var(--ink); }
.lost__art .weft { stroke: var(--thread); }
.lost__links { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.lost__links a { display: block; padding: 16px 20px 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.lost__links a + a { padding-left: 20px; border-left: 1px solid var(--rule); }
.lost__links a:hover b { text-decoration: underline; }
.lost__links span { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; }

/* ---------- the one motion: the thread is drawn as the example is read ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .trail::before { animation: thread linear both; animation-timeline: --trail; animation-range: cover 45vh cover calc(100% - 25vh); }
    @keyframes thread { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .top__nav { display: none; }
  .menu { display: block; }
  .open h1 { grid-column: 1 / -1; }
  .open__lead { grid-column: 1 / span 7; }
  .toc { grid-column: 8 / -1; }
  .spec__head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .spec__head .answer { font-size: var(--fs-lead); }
  .spec__table { grid-column: 1 / -1; }
  .step { grid-template-columns: 26px minmax(0, 1fr); row-gap: 20px; }
  .step__text { grid-column: 2; }
  .step__doc { grid-column: 2; max-width: 640px; }
  .reg__head { grid-column: 1 / span 7; }
  .reg__aside { grid-column: 1 / -1; margin-top: 28px; max-width: 640px; }
  .app summary { grid-template-columns: 2.5em minmax(0, 4fr) minmax(0, 6fr) 1.5em; }
  .app__state { grid-column: 2; grid-row: 2; }
  .app__one { grid-column: 3; grid-row: 1 / span 2; }
  .app__sign { grid-column: 4; grid-row: 1; }
  .app__body { grid-template-columns: 2.5em minmax(0, 1fr); }
  .app__body > p, .app__body ul, .app__links { grid-column: 2; }
  .data__text { grid-column: 1 / span 8; }
  .margin { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .margin div:nth-child(2) { border-top: 2px solid var(--ink); }
  .faq__head { grid-column: 1 / -1; margin-bottom: 32px; }
  .faq__list { grid-column: 1 / -1; }
  .foot__close { grid-column: 1 / -1; }
  .foot__cols { grid-column: 1 / -1; margin-top: 48px; max-width: 520px; }
  .legal { grid-column: 1 / span 9; }
  .legal__aside { display: none; }
}

/* ---------- phone: its own composition, one column, documents first-class ---------- */
@media (max-width: 720px) {
  :root { --fs-base: 1rem; }
  .top .wrap { gap: 12px; min-height: 64px; }
  .top__login { display: none; }
  .top .btn--small { display: none; }
  .open { padding-top: 32px; }
  .open__kicker { margin-bottom: 16px; }
  .open h1 { letter-spacing: -.03em; line-height: 1.04; }
  .open__lead, .toc { grid-column: 1 / -1; }
  .open__cta .btn { flex: 1 1 100%; justify-content: center; }
  .toc { margin-top: 40px; }
  .sec { padding: 56px 0; }
  .answer { font-size: 1.125rem; }

  .spec thead { display: none; }
  .spec table, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto !important; }
  .spec tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .spec th, .spec td { border: 0; padding: 0; }
  .spec td { margin-top: 4px; }
  .spec td:last-child { margin-top: 6px; }

  .trail__head, .swap__head, .move__head, .reg__head, .data__head, .data__text { grid-column: 1 / -1; }
  .trail { margin-top: 40px; }
  .trail::before { left: 5px; }
  .step { grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; row-gap: 16px; padding-bottom: 44px; }
  .step__knot { width: 14px; height: 8px; margin-top: 7px; }
  .step__doc { margin-right: calc(-1 * var(--gutter) + 4px); }
  .doc { padding: 14px; font-size: .875rem; }
  .doc th, .doc td { padding-right: 8px; }
  .slip { grid-template-columns: 1fr; gap: 12px; }
  .qr { width: 132px; height: 132px; }
  .threads li { grid-template-columns: 1fr; }

  .swap thead { display: none; }
  .swap table, .swap tbody, .swap tr, .swap th, .swap td { display: block; width: auto !important; }
  .swap tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .swap th, .swap td { border: 0; padding: 0; }
  .swap td.before { margin-top: 10px; font-size: var(--fs-sm); }
  .swap td.before::before { content: "Souvent : "; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); }
  .swap td.after { margin-top: 10px; }
  .swap td.after::before { content: "Teixa : "; font-family: var(--mono); font-size: var(--fs-xs); color: var(--thread); }
  :lang(de) .swap td.before::before { content: "Oft: "; } :lang(en) .swap td.before::before { content: "Often: "; }
  :lang(de) .swap td.after::before, :lang(en) .swap td.after::before { content: "Teixa: "; }

  .app summary { grid-template-columns: minmax(0, 1fr) 1.5em; padding: 16px 0; gap: 2px 12px; }
  .app summary:hover { background: transparent; }
  .app__n { display: none; }
  .app h3 { grid-column: 1; grid-row: 1; font-size: 1.25rem; }
  .app__one { grid-column: 1; grid-row: 2; }
  .app__state { grid-column: 1; grid-row: 3; margin-top: 4px; }
  .app__sign { grid-column: 2; grid-row: 1; }
  .app__body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .app__body > p, .app__body ul, .app__links { grid-column: 1; }

  .data__text p { font-size: 1.0625rem; }
  .margin { grid-template-columns: 1fr; }
  .margin div:nth-child(2) { border-top: 1px solid var(--rule); }
  .roles th, .roles td { display: block; width: auto; padding: 0; border: 0; }
  .roles tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .roles td { margin-top: 4px; }

  .move__list { grid-template-columns: 1fr; }
  .move__after { grid-column: 1 / -1; padding: 16px; }
  .faq__list dt { font-size: 1.0625rem; }

  .foot__cols { grid-template-columns: 1fr 1fr; }
  .legal, .lost__text, .lost__art, .lost__links { grid-column: 1 / -1; }
  .lost__art { max-width: 420px; margin-top: 40px; }
  .lost__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lost__links a + a { padding-left: 0; border-left: 0; }
  .lost__links a:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--rule); }
}

@media print {
  .top, .menu, .foot, .skip { display: none; }
  body { background: #fff; }
  .app__body { display: grid !important; }
}

/* Document examples on narrow screens: long references (27-digit QR, IBAN) may break, never widen the page */
.doc { overflow-x: auto; }
.doc table { width: 100%; }
.doc td, .doc th { overflow-wrap: anywhere; }

/* Pricing (/tarifs) and the data processing annex: plan cards and plain tables inside a legal page */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 12px; max-width: 40em; }
.plan { border-top: 2px solid var(--ink); padding: 16px 0 4px; }
.plan h2 { border-top: 0; margin: 0 0 4px; padding-top: 0; }
.plan__price { font-size: var(--fs-h2); letter-spacing: -.03em; margin: 4px 0 0; }
.plan__price small { font-size: var(--fs-sm); letter-spacing: 0; color: var(--text-2); }
.legal table { font-size: var(--fs-sm); line-height: 1.45; margin-top: 8px; max-width: 40em; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.legal thead th { font-weight: 600; border-bottom: 2px solid var(--ink); }
/* on a phone a wide table (supplements per plan) scrolls inside its own frame, never the whole page */
@media (max-width: 600px) { .legal table { display: block; overflow-x: auto; } }
.plan__calc { display: grid; gap: 6px; margin: 12px 0 0; font-size: var(--fs-sm); }
.plan__calc input { width: 7em; font: inherit; padding: 6px 8px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: inherit; }
.plan__calc output { font-weight: 600; }
/* four plans side by side when the text column is wide enough, otherwise two by two, one on a phone (never three and one) */
.legal:has(> .plans--four) { container: plans / inline-size; }
.plans--four { max-width: none; grid-template-columns: 1fr; column-gap: clamp(20px, 2.5vw, 32px); row-gap: 44px; margin-top: 32px; }
@container plans (min-width: 400px) { .plans--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container plans (min-width: 760px) { .plans--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the price follows the width of its own column (not the window): « CHF 745 » never runs into the next plan */
.plans--four .plan { container-type: inline-size; min-width: 0; }
.plans--four .plan__price { font-size: 22px; font-size: clamp(22px, 21cqi, var(--fs-h2)); white-space: nowrap; }
.plans--four .plan__price small { display: block; white-space: normal; }
.plan--rec { position: relative; border-top-color: var(--thread); box-shadow: inset 0 2px 0 var(--thread); }
.plan__badge { position: absolute; top: -1.9em; left: 0; margin: 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--thread); }
.plan__calc select { font: inherit; padding: 6px 8px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: inherit; width: max-content; }
.plan__extra { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }