/* ============================================================ legal.css — the five legal pages: termeni, retur, confidentialitate, cookies, dpa. Linked from inside their
only (the shared is not touched). Uses the tokens and the glass material of style.css and host.css; nothing here restyles the shared shell. Layout: black hero (ambient light, title, document switcher, "Pe scurt" glass card) → the document on a white sheet (.inv), with a sticky table of contents from 1100px and a collapsible one below it. Design notes: docs/design-review/termeni.md. ============================================================ */ /* ---------- 0. FRAME: hero + sheet replace the engine's padded column ---------- */ .lgx{padding:0} .lgx .lg-head{margin:0} /* ---------- 1. HERO ---------- */ .lgx-hero{position:relative;padding:calc(var(--hd-h) + clamp(44px,6.5vw,104px)) var(--pad) clamp(52px,6.5vw,96px)} .lgx-hero-in{max-width:1240px;margin-inline:auto;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,6vw,96px);align-items:center} .lgx-intro h1{margin:22px 0 20px;text-wrap:balance} .lgx-intro .lead{max-width:56ch} .lgx-intro .lead a{color:#fff;text-decoration:underline;text-decoration-color:var(--w42);text-underline-offset:3px} .lgx-intro .lead a:hover{text-decoration-color:#fff} .lgx .lgx-intro .lg-upd{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:12.5px;color:var(--w56)} .lgx .lgx-intro .lg-upd::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:#fff; box-shadow:0 0 0 3px var(--w08),0 0 12px rgb(255 255 255/.45)} /* the five documents, one recessed track; the current one is the white bead */ .lgx-docs{position:relative;display:flex;gap:2px;width:max-content;max-width:100%;margin-top:30px;padding:4px; border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none; background:rgb(255 255 255/.035);box-shadow:inset 0 1px 2px rgb(0 0 0/.7),inset 0 0 0 1px var(--w08)} .lgx-docs::-webkit-scrollbar{display:none} .lgx-docs a{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:var(--r-pill); font-size:13px;color:var(--w72);white-space:nowrap; transition:color var(--t1) var(--e),background-color var(--t1) var(--e)} .lgx-docs a:hover{color:#fff;background:var(--w05)} .lgx-docs a[aria-current="page"]{color:#000;background:#fff;font-weight:600; box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0/.18),0 8px 22px -10px rgb(255 255 255/.4)} /* "Pe scurt": the key figures, baked smoke glass over the ambient light */ .lgx-sum{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(12px,1.4vw,18px)} .lgx-sum>*{position:relative;z-index:2} .lgx-sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--w08)} .lgx-sum-h h2{font-family:var(--fd);font-size:11px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:#fff} .lgx-sum-h span{font-size:11.5px;line-height:1.4;color:var(--w56);text-align:right} .lgx-kv{margin:0} .lgx-kv>div{position:relative;padding:13px 58px 13px 0;border-bottom:1px solid var(--w05)} .lgx-kv>div:last-child{border-bottom:0} .lgx-kv dt{font-family:var(--fd);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--w56)} .lgx-kv dd{margin:5px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px} .lgx-kv dd b{font-size:15.5px;font-weight:500;letter-spacing:-.01em;color:var(--w96)} .lgx-kv dd span{font-size:12.5px;line-height:1.45;color:var(--w56)} .lgx-kv dd a{position:absolute;right:0;top:50%;translate:0 -50%;min-width:44px;height:30px;padding:0 10px; display:inline-grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--w12); font-family:var(--fd);font-size:10px;letter-spacing:.08em;color:var(--w72); transition:color var(--t1) var(--e),background-color var(--t1) var(--e),border-color var(--t1) var(--e)} .lgx-kv dd a:hover{color:#000;background:#fff;border-color:#fff} /* the big-figure variant (cookies): four tiles, the figure first */ .lgx-kv.stats{display:grid;grid-template-columns:1fr 1fr} .lgx-kv.stats>div{display:flex;flex-direction:column;padding:18px 16px 16px 0;border-bottom:1px solid var(--w05)} .lgx-kv.stats>div:nth-child(even){padding-left:18px;border-left:1px solid var(--w05)} .lgx-kv.stats>div:nth-last-child(-n+2){border-bottom:0} .lgx-kv.stats dd{order:-1;margin:0 0 8px;display:block} .lgx-kv.stats dd b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(2.2rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.02em} .lgx-kv.stats dd a{position:static;translate:none;margin-top:10px;height:26px;min-width:0} .lgx-kv.stats dt{font-family:var(--fb);font-size:13px;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--w72)} /* ---------- 2. THE SHEET: the document on white ---------- */ .lgx-sheet{padding:clamp(56px,7vw,112px) var(--pad) clamp(56px,7vw,104px)} .lgx-grid{max-width:1240px;margin-inline:auto;display:grid;grid-template-columns:232px minmax(0,1fr); gap:clamp(48px,6vw,104px);align-items:start} .lgx-doc{min-width:0;max-width:800px} /* table of contents: sticky, follows the reader (legal.js writes aria-current and --p) */ .lgx-rail{position:sticky;top:calc(var(--hd-h) + 34px);max-height:calc(100vh - var(--hd-h) - 58px); overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 4px 4px 0} .lgx-rail::-webkit-scrollbar{display:none} .lgx-toc-h{margin:0 0 12px 18px;font-family:var(--fd);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--w56)} .lgx-toc-btn{display:none} .lgx-toc-body{position:relative;padding-left:18px} .lgx-toc-bar{position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--w08);overflow:hidden} .lgx-toc-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--p,0)); transition:transform .18s linear} .lgx-toc-list{margin:0;padding:0;list-style:none;display:grid;gap:0} .lgx-toc-list a{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:baseline;gap:6px; padding:6px 6px 6px 0;font-size:13.5px;line-height:1.38;color:var(--w56);text-decoration:none; transition:color var(--t1) var(--e)} .lgx-toc-list a b{font-family:var(--fd);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--w42);font-variant-numeric:tabular-nums} .lgx-toc-list a:hover{color:var(--ink)} .lgx-toc-list a[aria-current]{color:var(--ink);font-weight:600} .lgx-toc-list a[aria-current] b{color:var(--ink)} /* the bead that marks where you are, sitting on the progress line */ .lgx-toc-list a::before{content:"";position:absolute;left:-21px;top:calc(6px + .69em);width:8px;height:8px;margin-top:-4px; border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px #fff;opacity:0;scale:.4; transition:opacity var(--t1) var(--e),scale var(--t1) var(--e)} .lgx-toc-list a[aria-current]::before{opacity:1;scale:1} .lgx-ask{margin:22px 0 0 18px;padding-top:18px;border-top:1px solid var(--w08);font-size:12.5px;line-height:1.6;color:var(--w56)} .lgx-ask a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);text-underline-offset:3px;overflow-wrap:anywhere} .lgx-ask a:hover{text-decoration-color:var(--ink)} /* ---------- 3. DOCUMENT TYPOGRAPHY (the legal text itself is unchanged) ---------- */ .lgx-doc>.lg-sec:first-child{padding-top:0;margin-top:0;border-top:0} .lgx-doc .lg-sec{padding-top:clamp(44px,5vw,68px);margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--w08)} .lgx-doc .lg-sec h2{font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.15;letter-spacing:-.022em;margin-bottom:24px; color:var(--ink);text-wrap:balance} .lgx-n{color:var(--w42);font-variant-numeric:tabular-nums;margin-right:.12em} .lgx-doc .lg-sec h3{font-family:var(--fb);font-size:1.1rem;font-weight:600;line-height:1.35;letter-spacing:-.012em; text-transform:none;color:var(--w96);margin:40px 0 12px} .lgx-doc .lg-sec p{font-size:16px;line-height:1.75;color:var(--w72);max-width:70ch} .lgx-doc .lg-sec li{font-size:15.5px;line-height:1.7;color:var(--w72);max-width:70ch} .lgx-doc .lg-sec li::before{top:.84em;width:10px;background:var(--w42)} .lgx-doc .lg-sec a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);text-decoration-thickness:1px; text-underline-offset:3px;transition:text-decoration-color var(--t1) var(--e)} .lgx-doc .lg-sec a:hover{text-decoration-color:var(--ink)} .lgx-doc .lg-sec strong{color:var(--ink)} .lgx-doc .lg-sec button.lk{color:var(--ink);text-decoration-color:var(--w42)} .lgx-doc code{font-family:var(--fm);font-size:.86em;padding:2px 6px;border-radius:6px;background:var(--w05);color:var(--ink)} /* two columns for short items */ .lgx-doc .lg-sec ul.lgx-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px} /* a list of rules that each start with a label: the label gets its own line */ .lgx-doc .lg-sec ul.lgx-terms{gap:0;border-top:1px solid var(--w08);margin-top:18px} .lgx-doc .lg-sec ul.lgx-terms li{padding:16px 0;border-bottom:1px solid var(--w08);max-width:none} .lgx-doc .lg-sec ul.lgx-terms li::before{display:none} .lgx-doc .lg-sec ul.lgx-terms li>strong:first-child{display:block;margin-bottom:4px;font-size:15.5px} .lgx-doc .lg-sec ul.lgx-terms li.lgx-inl>strong:first-child{display:inline;margin:0} /* ruled rows (retention rules and the like) */ .lgx-doc .lg-sec ul.lgx-rows{gap:0;border-top:1px solid var(--w08)} .lgx-doc .lg-sec ul.lgx-rows li{padding:14px 0 14px 22px;border-bottom:1px solid var(--w08);max-width:none} .lgx-doc .lg-sec ul.lgx-rows li::before{top:calc(14px + .84em)} /* small cards (recipients, transfers) */ .lgx-doc .lg-sec ul.lgx-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px} .lgx-doc .lg-sec ul.lgx-cards li{padding:18px 20px;border-radius:var(--r-m);background:#fff;border:1px solid var(--w08); box-shadow:0 1px 0 rgb(0 0 0/.02),0 16px 34px -28px rgb(0 0 0/.35);font-size:14.5px;line-height:1.62;max-width:none} .lgx-doc .lg-sec ul.lgx-cards li::before{display:none} .lgx-doc .lg-sec ul.lgx-cards li strong{font-size:15px} /* checklist (what every plan includes, security measures) */ .lgx-doc .lg-sec ul.lgx-check{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 36px} .lgx-doc .lg-sec ul.lgx-check li{padding-left:32px;max-width:none} .lgx-doc .lg-sec ul.lgx-check li::before{top:.2em;width:20px;height:20px;border-radius:50%;background:var(--ink)} .lgx-doc .lg-sec ul.lgx-check li::after{content:"";position:absolute;left:7.5px;top:calc(.2em + 5px);width:4px;height:8px; border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} /* numbered steps */ .lgx-doc .lg-sec ol.lgx-steps{counter-reset:lgst;list-style:none;padding-left:0;gap:12px;margin-top:4px} .lgx-doc .lg-sec ol.lgx-steps li{counter-increment:lgst;position:relative;padding-left:44px;min-height:28px;color:var(--w72);font-size:15.5px} .lgx-doc .lg-sec ol.lgx-steps li::before{content:counter(lgst);display:grid;place-items:center;position:absolute;left:0;top:-1px; width:28px;height:28px;border-radius:50%;border:1px solid var(--w18);background:#fff; font-family:var(--fd);font-size:11px;color:var(--ink)} /* ---------- 4. CARDS AND PANELS ON THE SHEET ---------- */ .lgx-box,.lgx-callout,.lgx-quote,.lgx-card,.lgx-cat,.lgx-cta{position:relative;overflow:hidden;border-radius:var(--r-l)} :is(.lgx-box,.lgx-callout,.lgx-quote,.lgx-card,.lgx-cat,.lgx-cta)>*{position:relative;z-index:2} .lgx-box{margin:34px 0 10px;padding:clamp(22px,2.6vw,32px)} .lgx-box>h3:first-child,.lgx-callout>h3:first-child{margin-top:0} .lgx-box>p:last-child,.lgx-callout>p:last-child{margin-bottom:0} .lgx-box ul{margin-bottom:18px} /* emphasis on the sheet: smoked glass (the "black card on the white sheet") */ .lgx-callout{margin:34px 0 10px;padding:clamp(24px,3vw,38px)} .lgx-callout.has-big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center} .lgx-big{font-family:var(--fd);font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.03em;color:transparent; -webkit-text-stroke:1px rgb(255 255 255/.55);white-space:nowrap} .lgx-doc .lgx-callout.has-big p{margin:0} /* tables: a light card, readable row headers, a sticky first column on phones */ .lgx-doc .lg-sec .lgx-tbl{position:relative;margin:14px 0 22px;border-radius:var(--r-m);border:1px solid var(--w08); overflow-x:auto;background: linear-gradient(90deg,#fff 30%,rgb(255 255 255/0)) left/40px 100% no-repeat local, linear-gradient(270deg,#fff 30%,rgb(255 255 255/0)) right/40px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%,rgb(0 0 0/.16),rgb(0 0 0/0)) right/14px 100% no-repeat scroll, #fff; box-shadow:0 26px 50px -42px rgb(0 0 0/.4)} .lgx-doc .lg-sec .lgx-tbl table{margin:0;min-width:540px;font-variant-numeric:tabular-nums} .lgx-doc .lg-sec .lgx-tbl th,.lgx-doc .lg-sec .lgx-tbl td{padding:14px 16px;border-bottom:1px solid var(--w08);font-size:14px;line-height:1.5;color:var(--w72)} .lgx-doc .lg-sec .lgx-tbl tbody tr:last-child>*{border-bottom:0} .lgx-doc .lg-sec .lgx-tbl thead th{font-family:var(--fd);font-size:9.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--w56);background:rgb(10 10 10/.03);white-space:nowrap} .lgx-doc .lg-sec .lgx-tbl tbody th{font-family:var(--fb);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap} .lgx-doc .lg-sec .lgx-tbl.dpa td:first-child{color:var(--ink);font-weight:600} /* an email address in a cell stays on one line (it would break at the hyphen of nbt-host) */ .lgx-doc .lg-sec .lgx-tbl a[href^="mailto:"]{white-space:nowrap} .lgx-doc .lg-sec p.lgx-hint{margin:12px 0 -4px;max-width:none;font-family:var(--fd);font-size:9.5px;line-height:1.4; letter-spacing:.2em;text-transform:uppercase;color:var(--w56)} .lgx-hint[hidden]{display:none} /* retur §3: the four ready-made requests, each with a copy button */ .lgx-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0 22px} .lgx-quote{display:flex;flex-direction:column;padding:22px 22px 20px} .lgx-doc .lg-sec .lgx-quote h3{margin:0 0 12px;font-size:1rem} .lgx-doc .lg-sec .lgx-quote .lg-form{flex:1;margin:0;padding:0;border:0;border-radius:0;background:none; font-size:14.5px;line-height:1.7;color:var(--w72)} .lgx-doc .lg-sec .lgx-quote p{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--w56)} .lgx-copy{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:38px;margin-top:16px;padding:0 15px 0 12px; border-radius:var(--r-pill);border:1px solid var(--w18);background:#fff; font-family:var(--fd);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink); transition:background-color var(--t1) var(--e),color var(--t1) var(--e),border-color var(--t1) var(--e)} .lgx-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .lgx-copy:hover,.lgx-copy[data-state="ok"]{background:var(--ink);border-color:var(--ink);color:#fff} .lgx-copy[hidden]{display:none} /* retur §4: one card per service; the worked example set as a calculation */ .lgx-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px} .lgx-svc>.lgx-card:last-child:nth-child(odd){grid-column:1/-1} .lgx-card{padding:24px 24px 10px} .lgx-doc .lg-sec .lgx-card h3{margin:0 0 12px} .lgx-doc .lg-sec .lgx-card p{font-size:15px;line-height:1.7} .lgx-doc .lg-sec p.lgx-calc{padding:14px 16px;border-radius:14px;border:1px dashed var(--w18);background:rgb(10 10 10/.025); font-size:14.5px;color:var(--w96)} /* retur §6: the annex form as a sheet of ruled paper */ .lgx-doc .lg-sec .lg-form.lgx-paper{margin:16px 0 0;padding:26px 28px;border-radius:var(--r-m);border:1px solid var(--w12); background:#fff repeating-linear-gradient(180deg,rgb(10 10 10/0) 0 calc(2.1em - 1px),rgb(10 10 10/.07) calc(2.1em - 1px) 2.1em) 0 26px/100% calc(100% - 52px) no-repeat; font-size:14.5px;line-height:2.1;color:var(--w72);box-shadow:0 30px 60px -46px rgb(0 0 0/.5)} .lgx-paper+.lgx-copy{margin-bottom:6px} /* cookies: the three categories, the browsers, the preferences card */ .lgx-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px} .lgx-cats>.lgx-cat:first-child{grid-column:1/-1} .lgx-cat{padding:24px 24px 8px} .lgx-doc .lg-sec .lgx-cat h3{display:flex;align-items:center;gap:12px;margin:0 0 12px} .lgx-doc .lg-sec .lgx-cat .lgx-tbl{margin-bottom:16px} .lgx-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgb(10 10 10/.09)} .lgx-dot[data-s="0"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--w30)} .lgx-browsers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 20px} .lgx-doc .lg-sec .lgx-browsers p{margin:0;padding:18px 18px 16px;border-radius:var(--r-m);background:#fff;border:1px solid var(--w08); box-shadow:0 16px 34px -28px rgb(0 0 0/.35);font-size:14px;line-height:1.65;max-width:none} .lgx-browsers b{display:block;margin-bottom:6px;font-weight:600;color:var(--ink)} .lgx-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;padding:26px 28px;margin-top:6px} .lgx-doc .lg-sec .lgx-cta p{margin:0} /* the comma under an uppercase Ș / Ț in a button label ("PREFERINȚE"): shared fix, host.css §14g */ /* confidentialitate §2: category on the left, text on the right; the legal basis marked */ .lgx-rowset{margin-top:8px;border-top:1px solid var(--w08)} .lgx-row{display:grid;grid-template-columns:188px minmax(0,1fr);gap:8px 36px;padding:26px 0;border-bottom:1px solid var(--w08)} .lgx-doc .lg-sec .lgx-row h3{margin:4px 0 0;font-size:1rem;line-height:1.4} .lgx-doc .lg-sec .lgx-row p:last-child{margin-bottom:0} .lgx-basis{padding:1px 6px;border-radius:6px;background:rgb(10 10 10/.055);color:var(--w96); -webkit-box-decoration-break:clone;box-decoration-break:clone} .lgx-basis b{font-weight:600;color:var(--ink)} /* the company card and the way on */ .lgx-doc .lg-firm.lgx-firm{position:relative;overflow:hidden;margin-top:clamp(56px,7vw,92px);padding:24px 28px; border:0;border-radius:var(--r-l);font-size:13.5px;line-height:1.85;color:var(--w72)} .lgx-doc .lg-firm.lgx-firm a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--w30);text-underline-offset:3px} .lgx-doc .lg-firm.lgx-firm b{color:var(--ink)} .lgx-end{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:14px} .lgx-next{position:relative;overflow:hidden;flex:1 1 340px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:4px 18px;padding:20px 22px 20px 26px;border-radius:var(--r-l);color:var(--ink)} .lgx-next>*{position:relative;z-index:2} .lgx-next small{grid-column:1;font-family:var(--fd);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--w56)} .lgx-next b{grid-column:1;font-size:1.2rem;font-weight:500;letter-spacing:-.015em} .lgx-next .go{grid-column:2;grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1px solid var(--w18);transition:background-color var(--t1) var(--e),color var(--t1) var(--e),transform var(--t1) var(--e)} .lgx-next .go svg{width:16px;height:12px} .lgx-next:hover .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateX(3px)} .lgx-end .lg-back{margin-top:0} /* ---------- 5. RESPONSIVE ---------- */ @media (max-width:1099px){ .lgx-hero-in{grid-template-columns:minmax(0,1fr);max-width:760px} .lgx-sum{max-width:560px} .lgx-grid{grid-template-columns:minmax(0,1fr);max-width:800px;gap:clamp(28px,5vw,44px)} .lgx-doc{max-width:none} .lgx-rail{position:static;max-height:none;overflow:visible;padding:0} .lgx-toc{border-radius:var(--r-m);background:#fff;border:1px solid var(--w08);box-shadow:0 20px 44px -36px rgb(0 0 0/.4)} .lgx-toc-h{display:none} .lgx-toc-btn:not([hidden]){display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:0 20px; font-size:15px;font-weight:600;color:var(--ink);text-align:left} .lgx-toc-btn small{font-size:12.5px;font-weight:400;color:var(--w56)} .lgx-toc-btn i{position:relative;margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--w18);flex:none} .lgx-toc-btn i::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-5px 0 0 -3.5px; border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--t1) var(--e)} .lgx-toc-btn[aria-expanded="true"] i::before{transform:translateY(3px) rotate(225deg)} .lgx-toc-body{padding:0 20px 10px} .lgx-toc[data-collapsed] .lgx-toc-body{display:none} .lgx-toc-bar,.lgx-toc-list a::before{display:none} .lgx-toc-list a{min-height:46px;align-items:center;padding:10px 0;border-top:1px solid var(--w05);font-size:14.5px} .lgx-ask{margin:14px 4px 0;padding:0;border:0} } @media (max-width:900px){ .lgx-browsers{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .lgx-sheet{padding:44px 20px 56px} .lgx-docs{margin-top:26px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)} .lgx-docs a{min-height:40px;padding:0 14px} .lgx-doc .lg-sec p{font-size:15.5px} .lgx-doc .lg-sec li{font-size:15px} .lgx-doc .lg-sec h3{margin-top:32px} .lgx-doc .lg-sec ul.lgx-cols,.lgx-doc .lg-sec ul.lgx-cards,.lgx-doc .lg-sec ul.lgx-check{grid-template-columns:minmax(0,1fr)} .lgx-quotes,.lgx-svc,.lgx-cats{grid-template-columns:minmax(0,1fr)} .lgx-cta{grid-template-columns:minmax(0,1fr);padding:22px} .lgx-row{grid-template-columns:minmax(0,1fr);padding:22px 0} .lgx-callout.has-big{grid-template-columns:minmax(0,1fr);gap:14px} .lgx-doc .lg-sec .lg-form.lgx-paper{padding:20px 18px;font-size:14px;background-position:0 20px;background-size:100% calc(100% - 40px)} /* the plan column stays in view while the table scrolls sideways */ .lgx-doc .lg-sec .lgx-tbl :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--w08)} .lgx-doc .lg-sec .lgx-tbl thead th:first-child{background:linear-gradient(rgb(10 10 10/.03),rgb(10 10 10/.03)),#fff} /* a one-row table (cookies) reads better as label / value rows */ .lgx-doc .lg-sec .lgx-tbl.stack{overflow:visible;background:#fff} .lgx-doc .lg-sec .lgx-tbl.stack table{min-width:0} .lgx-tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lgx-tbl.stack :is(tbody,tr,td){display:block} /* background:transparent — the sticky-column rule above paints the first cell white, and in a stacked table that square white cell covered the wrapper's rounded top corners (QA 11.09) */ .lgx-doc .lg-sec .lgx-tbl.stack td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;position:static;box-shadow:none; background:transparent;padding:12px 16px;border-bottom:1px solid var(--w08)} /* a long cookie name (nbthost_consent_v1) ran past its cell at 375; it may wrap, and the pill follows it */ .lgx-tbl.stack td code{overflow-wrap:anywhere;word-break:break-word;-webkit-box-decoration-break:clone;box-decoration-break:clone} .lgx-doc .lg-sec .lgx-tbl.stack td:last-child{border-bottom:0} /* a comparison table (retur #garantie): the row header becomes a full-width band above its label / value rows */ .lgx-doc .lg-sec .lgx-tbl.stack tbody th{display:block;position:static;box-shadow:none;background:rgb(10 10 10/.03); white-space:normal;padding:12px 16px;border-bottom:1px solid var(--w08)} .lgx-tbl.stack tbody tr+tr{border-top:1px solid var(--w08)} .lgx-tbl.stack td::before{content:attr(data-label);font-family:var(--fd);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--w56);line-height:1.9} .lgx-kv dd b{font-size:15px} } @media (max-width:360px){ /* the narrowest phones: the label goes above its value, and a long code value may wrap */ .lgx-doc .lg-sec .lgx-tbl.stack td{grid-template-columns:minmax(0,1fr);gap:2px} .lgx-tbl.stack td code{overflow-wrap:anywhere;word-break:break-word} .lgx-cat{padding:22px 18px 6px} } @media (max-width:420px){ .lgx-kv.stats dd b{font-size:2rem} .lgx-next{padding:18px 18px 18px 20px} } /* ---------- 6. MOTION, PRINT ---------- */ @media (prefers-reduced-motion:reduce){ .lgx-toc-bar i{transition:none} .lgx-next:hover .go{transform:none} } @media print{ .lgx-hero{padding:0 0 18px} .lgx-docs,.lgx-sum,.lgx-rail,.lgx-end,.lgx-copy,.lgx-hint{display:none!important} .lgx-sheet{margin:0;padding:0;border-radius:0} .lgx-grid{display:block} }