/* =========================================================
   FRONTNESS VERKTYG — bas för de fristående verktygsapparna

   Samma designspråk som frontness.se, men bara det ett verktyg
   faktiskt använder. Marknadssajtens style.css är 125 kB och
   bär megameny, hero-kub, portfölj och artikelmallar; inget av
   det finns på en verktygssubdomän. Reglerna nedan är hämtade
   ur style.css och verktyg.css i oförändrat skick, så att de
   två familjerna ser likadana ut, plus appskalet längst ned
   (.thead, .tfoot, .langbar, .langsw) som bara finns här.
   ========================================================= */

/* ============================ typsnitt ============================
   Onest, självhostad variabel fil: ett anrop täcker vikt 400 till 700.
   Uppdelad på latin och latin-ext med unicode-range, så den extra filen
   bara hämtas när ett tecken utanför latin faktiskt används. */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================= tokens ============================= */
:root{
  --background:#f4f3f0;
  --foreground:#111111;
  --ink:#0a0a0a;
  --muted:#8d8d8d;
  --subtle:#b6b6b6;
  --line:#e6e5e2;
  --surface:#f1f0ee;
  --surface-2:#e3e2df;
  --accent:#b15f2c;
  --accent-from:#cf8047;
  --accent-to:#97501f;
  --hero-from:#ecebe9;
  --hero-to:#c9c9c9;
  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  --radius-control:0.875rem;
  --container-shell:88rem;
  --h2-size:2.25rem;

  /* Statuspalett. Bär aldrig betydelse ensam: alltid glyf eller text bredvid. */
  --st-good:#0ca30c;
  --st-warn:#fab219;
  --st-bad:#d03b3b;
  --st-good-glyph:#0a0a0a;
  --st-warn-glyph:#0a0a0a;
  --st-bad-glyph:#ffffff;

  --vt-muted:rgba(17,17,17,.62);
  --vt-faint:rgba(17,17,17,.45);
  --vt-hair:#e9e8e5;
  --vt-inset:#faf9f8;
  --vt-lift:0 1px 2px rgba(17,17,17,.04), 0 8px 24px -16px rgba(17,17,17,.18);
  --vt-lift-hover:0 1px 2px rgba(17,17,17,.05), 0 14px 34px -18px rgba(17,17,17,.26);
}
@media (min-width:640px){ :root{ --h2-size:3rem } }

/* ============================= reset ============================= */
*{ box-sizing:border-box; margin:0; padding:0 }
/* text-size-adjust: iOS Safari förstorar på eget bevåg brödtext i block den
   tycker är för smala. Förstoringen räknas inte in i layouten, så blocket blir
   bredare än sin spalt och sidan går att dra i sidled. */
html{ font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:clip; -webkit-text-size-adjust:100% }
/* clip, inte hidden: overflow-x:hidden tvingar overflow-y till auto och gör
   body till en egen rullbehållare, vilket ger dubbla rullningar på iOS. */
body{ background:var(--background); color:var(--foreground); font-family:'Onest',sans-serif;
  overflow-x:clip; overflow-wrap:break-word }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
/* [hidden] är bara display:none i användaragentens stilmall och förlorar mot
   varje egen display-regel (.field{display:flex} m.fl.). Tvinga igenom den. */
[hidden]{ display:none !important }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ===================== rem-baserat adaptivt rutnät =====================
   Rotstorleken styr hela rutnätet. Den får skala med viewporten, men bara
   monotont och inom golv/tak: annars kollapsar brödtexten under läsbar
   storlek i mellanlägena. */
@media (max-width:640px){  html{ font-size:clamp(16px, 4.444444vw, 19px) } }
@media (min-width:1921px){ html{ font-size:clamp(16px, 0.833333vw, 20px) } }

/* ============================= shell ============================= */
.shell{ width:100%; max-width:var(--container-shell); margin-inline:auto }

.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff;
}

/* Rubriker är enfärgade. <em> används för rytm i copyn, inte för färg. */
h1 em, h2 em, h3 em, h4 em{ font-style:normal; color:inherit }

/* ============================ avslöjanden ==========================
   [data-reveal] är synligt i grundläget och döljs först när base.js
   satt .reveal-ready. Kör inte JS står texten kvar. */
[data-reveal]{ opacity:var(--ro,1); transform:none }
html.reveal-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--reveal-y,var(--ry,0px)),0) scale(var(--rs,1));
  transition:opacity 1.1s cubic-bezier(.25,.46,.45,.94), transform 1.1s cubic-bezier(.25,.46,.45,.94);
}
html.reveal-ready [data-reveal].in{ opacity:var(--ro,1); transform:translate3d(0,0,0) scale(1) }
html.reveal-all [data-reveal]{ opacity:var(--ro,1) !important; transform:none !important }
html.reveal-all .line > span{ opacity:1 !important; transform:none !important }

/* Radvis rubrikentré. Spannet får padding så masken växer och accenter (Å, Ä)
   inte kapas; .line drar tillbaka samma mått med negativ marginal. */
.line{ display:block; overflow:hidden; margin-top:-.1em; margin-bottom:-.2em }
.line > span{
  display:block; padding-top:.1em; padding-bottom:.2em;
  transform:none; opacity:1;
  transition:transform 1.15s cubic-bezier(.25,.46,.45,.94), opacity 1.15s cubic-bezier(.25,.46,.45,.94);
}
html.reveal-ready .line > span{ transform:translate3d(0,100%,0); opacity:0 }
html.reveal-ready [data-lines].in .line > span{ transform:translate3d(0,0,0); opacity:1 }

/* Laddningsmedveten bildreveal: figuren får sin entré medan fotografiet gör en
   lugn fokusdragning. .media-in sätts först när bilden är avkodad. */
.subhero__media[data-reveal] > img{ opacity:1; transform:none }
html.reveal-ready .subhero__media[data-reveal] > img{
  opacity:0; transform:translate3d(0,0,0) scale(1.035);
  transition:opacity 1.2s cubic-bezier(.25,.46,.45,.94), transform 1.6s cubic-bezier(.25,.46,.45,.94);
}
html.reveal-ready .subhero__media[data-reveal] > img.media-in{ opacity:1; transform:translate3d(0,0,0) scale(1) }
html.reveal-all .subhero__media[data-reveal] > img{ opacity:1 !important; transform:none !important }

/* ============================== subhero ============================ */
.subhero{
  position:relative; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card);
  background:linear-gradient(160deg, var(--hero-from) 0%, var(--surface) 45%, var(--surface-2) 100%);
}
/* Toppadding är mindre än på frontness.se: appskalets header är en enkel rad
   och inte en megameny, så heroen behöver inte lika mycket luft under den. */
.subhero__inner{ position:relative; z-index:2; padding:5rem 1.25rem 4rem }
@media (min-width:640px){ .subhero__inner{ padding:6rem 2rem 5rem } }
@media (min-width:1024px){ .subhero__inner{ padding-top:7rem; padding-bottom:6rem } }

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.crumbs a:hover{ color:var(--foreground) }
.crumbs span{ color:rgba(17,17,17,.25) }
/* På mobil bär brödsmulan ingenting men ligger kvar i DOM, så BreadcrumbList
   och skärmläsaren behåller sin stig. Därför visuell döljning, ej display:none. */
@media (max-width:767.98px){
  .crumbs{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
}
.subhero h1{ margin-top:1.25rem; max-width:17ch; font-size:2.25rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media (min-width:640px){ .subhero h1{ font-size:3rem } }
@media (min-width:1024px){ .subhero h1{ font-size:3.75rem } }
.subhero__lead{ margin-top:1.5rem; max-width:48ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
@media (min-width:640px){ .subhero__lead{ font-size:1.125rem } }
.subhero__facts{
  margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-size:.8125rem; color:rgba(17,17,17,.5);
}
.subhero__facts li{ display:flex; align-items:center; gap:.5rem }
.subhero__facts li::before{
  content:""; width:.3125rem; height:.3125rem; flex:none;
  border-radius:9999px; background:var(--accent);
}
.subhero__actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem }

/* Ett arbetsverktyg, inte en läsvy: subheron kortas ner så att verktyget och
   dess kontroller hamnar högt upp på skärmen. Alla sex apparna använder den. */
.subhero--tool .subhero__inner{ padding-bottom:3rem }
@media (min-width:1024px){ .subhero--tool .subhero__inner{ padding-bottom:4rem } }

/* Subhero med bild: text till vänster, bild till höger, staplat på mobil. */
.subhero--media .subhero__inner{ display:grid; gap:2.5rem; align-items:center }
@media (min-width:1024px){
  .subhero--media .subhero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:4rem }
}
.subhero--media .subhero__text{ min-width:0 }
.subhero__media{ margin:0; min-width:0 }
.subhero__media img{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border-radius:var(--radius-card);
  box-shadow:0 24px 60px rgba(17,17,17,.14);
}
@media (min-width:1024px){ .subhero__media img{ aspect-ratio:4/3 } }

/* =========================== sektionshuvud ========================= */
.sec-head{ margin-bottom:3rem }
.sec-head h2{ margin-top:1.25rem; max-width:20ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.sec-head > h2:first-child{ margin-top:0 }
.sec-head .lead{ margin-top:1.25rem; max-width:56ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }

/* =========================== formulärfält ========================== */
.field{ display:flex; flex-direction:column; gap:.375rem }
.field > span, .field > label, .field > legend{
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(17,17,17,.55);
}
.ctrl{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:.875rem;
  padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:inherit; outline:none;
  transition:border-color .2s;
}
textarea.ctrl{ resize:none }
.ctrl:focus{ border-color:rgba(17,17,17,.3) }
.field__wrap{ position:relative; display:block }
.field__icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  font-size:1.0625rem; color:rgba(17,17,17,.32); pointer-events:none;
  transition:color .2s;
}
.field__wrap .ctrl{ padding-left:2.875rem }
.field__wrap:focus-within .field__icon{ color:rgba(17,17,17,.6) }
/* opacity:1 krävs: Firefox lägger .54 ovanpå color och gör den dubbelt blek. */
.ctrl::placeholder{ color:rgba(17,17,17,.3); opacity:1 }

/* ============================ verktygsytor ========================= */
.vt-sect{ padding:4rem 1.25rem }
@media (min-width:640px){ .vt-sect{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .vt-sect{ padding-top:5.5rem; padding-bottom:5.5rem } }

.vt-head{ display:flex; align-items:baseline; gap:1.25rem; margin-bottom:2rem; flex-wrap:wrap }
.vt-head h2{ font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.1 }
@media (min-width:640px){ .vt-head h2{ font-size:2.25rem } }
.vt-head__note{ margin-left:auto; font-size:.875rem; color:var(--vt-faint) }

.vt-sub-h{ margin:2.25rem 0 1rem; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vt-faint) }
.vt-note{ font-size:.875rem; color:var(--vt-faint); margin-top:1rem; line-height:1.65 }

.vt-panel{ background:var(--background); border:1px solid var(--vt-hair); border-radius:var(--radius-card);
  padding:1.75rem; box-shadow:var(--vt-lift) }
.vt-panel__head{ display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem }
.vt-panel__warn{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--vt-hair);
  font-size:.8125rem; line-height:1.6; color:var(--vt-faint) }

.vt-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.875rem }
.vt-card{ background:var(--background); border:1px solid var(--vt-hair); border-radius:var(--radius-card-sm);
  box-shadow:var(--vt-lift); padding:1.5rem; transition:box-shadow .2s }
.vt-card:hover{ box-shadow:var(--vt-lift-hover) }
.vt-card h3{ font-size:1rem; font-weight:600; margin-bottom:.5rem }
.vt-card p{ font-size:.875rem; color:var(--vt-muted); line-height:1.7 }

/* Snurra som används av verktyg med väntetid. */
.vt-loader{ position:relative; flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
  border:2px solid var(--vt-hair) }
.vt-loader::after{ content:''; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--accent);
  animation:vt-spin .9s linear infinite }
@keyframes vt-spin{ to{ transform:rotate(360deg) } }

/* ============================== pills ==============================
   Sajtens knappform. Pilbrickan är avsiktligt display:none — den togs bort
   på hela frontness.se, men markupen bär den kvar så att de två familjerna
   kan dela samma HTML. */
.pill{ display:inline-block }
.pill__scale{ display:inline-block; will-change:transform }
.pill__in{
  display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px;
  font-size:.875rem; font-weight:500; padding:.875rem 1.75rem;
}
.pill--dark .pill__in{ background:var(--ink); color:#fff }
.pill--light .pill__in{ background:var(--surface); color:var(--foreground) }
.pill--ghost .pill__in{
  background:transparent; color:var(--foreground);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.35);
  transition:background .25s ease, box-shadow .25s ease;
}
.pill--ghost:hover .pill__in{
  background:rgba(17,17,17,.045);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.6);
}
.pill__badge{ display:none }
.pill[data-arrow] .pill__in{ padding:.875rem 1.75rem; gap:0 }
.pill--lg .pill__in{ font-size:1rem; padding:1.0625rem 2rem }
.pill--lg[data-arrow] .pill__in{ padding:1.0625rem 2rem; gap:0 }

/* ========================= verktygsformulär ========================
   Adressfältet högst upp på de verktyg som analyserar en sajt. Fälten står
   på vit botten med en mörkare ram: mot sidans egen sandton syntes hårlinjen
   knappt, och ett formulär man inte hittar fylls inte i. */
.vt-form{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; max-width:34rem; margin-top:2rem }
.vt-form input{ width:100%; background:#fff; border:1px solid #d5d2cc;
  border-radius:var(--radius-control); color:inherit; font:inherit; font-size:1rem; padding:1rem 1.125rem; outline:none;
  transition:border-color .2s, box-shadow .2s }
.vt-form input:hover{ border-color:#b9b5ad }
.vt-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(177,95,44,.15) }
.vt-form input:invalid:not(:placeholder-shown){ border-color:rgba(208,59,59,.5) }
.vt-form input::placeholder{ color:var(--subtle) }
.vt-form .pill{ grid-column:1 / -1; justify-self:start; margin-top:.375rem }
.vt-form__note{ grid-column:1 / -1; margin:.75rem 0 0; max-width:32rem;
  font-size:.8125rem; line-height:1.7; color:var(--subtle) }
@media (max-width:36rem){ .vt-form{ grid-template-columns:1fr } }
/* Honungsfältet. Inte display:none — en del bottar hoppar över dolda fält men
   fyller i det som bara är flyttat ur vägen. */
.vt-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden }
.vt-err{ color:#a52a2a; font-size:.875rem; margin-top:1rem; min-height:1.25rem }

.vt-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem }
.vt-chip{ font-size:.8125rem; color:var(--vt-muted); border:1px solid var(--vt-hair); background:var(--background);
  border-radius:var(--radius-pill); padding:.35rem .85rem }

.vt-callout{ margin-top:1.5rem; padding:1rem 1.25rem; border-radius:var(--radius-control);
  font-size:.9375rem; line-height:1.65; color:var(--vt-muted); background:var(--vt-inset);
  border:1px solid var(--vt-hair); border-left-width:3px }
.vt-callout strong{ color:var(--foreground) }
.vt-callout--bad{ border-left-color:var(--st-bad) }
.vt-callout--warn{ border-left-color:var(--st-warn) }

/* Statusprick. Bär aldrig betydelse ensam: alltid text bredvid. */
.vt-dot{ width:.5rem; height:.5rem; border-radius:50%; flex:none }
.vt-dot--good{ background:var(--st-good) }
.vt-dot--warn{ background:var(--st-warn) }
.vt-dot--bad{ background:var(--st-bad) }

/* Framdrift för verktyg med väntetid. */
.vt-panel__of{ display:flex; flex-direction:column; min-width:0 }
.vt-panel__of span{ font-size:.8125rem; color:var(--vt-faint) }
.vt-panel__of b{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vt-bar{ height:3px; background:var(--vt-hair); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:1rem }
.vt-bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:var(--radius-pill); transition:width .8s ease }
.vt-eta{ font-size:.8125rem; color:var(--vt-faint); margin-bottom:1.25rem }
.vt-cancel{ margin-top:.875rem; font:inherit; font-size:.8125rem; color:var(--vt-muted); cursor:pointer;
  background:none; border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.5rem 1rem;
  transition:color .2s, border-color .2s }
.vt-cancel:hover{ color:#a52a2a; border-color:rgba(165,42,42,.35) }

/* ============================ knappar ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--ink); border-radius:var(--radius-pill); background:var(--ink);
  padding:.75rem 1.375rem; font-size:.875rem; font-weight:500; color:#fff;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s, opacity .2s;
}
.btn:hover{ background:#000; border-color:#000 }
.btn[disabled]{ opacity:.4; cursor:not-allowed }
.btn--ghost{ background:transparent; color:var(--foreground); border-color:var(--line) }
.btn--ghost:hover{ background:transparent; border-color:rgba(17,17,17,.35) }
.btn--accent{ background:var(--accent); border-color:var(--accent) }
.btn--accent:hover{ background:var(--accent-to); border-color:var(--accent-to) }

/* =========================================================
   APPSKALET — finns bara på verktygssubdomänerna
   ========================================================= */

/* ---------------------------- språkrad ----------------------------
   Visas bara när webbläsarens språk skiljer sig från sidans, och bara
   tills besökaren stänger den. Den omdirigerar aldrig: adressen ska
   alltid leverera det språk den utlovar, även för Googlebot. */
.langbar{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  background:var(--ink); color:#fff; padding:.5rem 1.25rem; font-size:.8125rem;
}
.langbar__link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:500 }
.langbar__link:hover{ text-decoration:underline }
.langbar__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border-radius:50%; color:rgba(255,255,255,.6);
  transition:color .2s, background .2s;
}
.langbar__close:hover{ color:#fff; background:rgba(255,255,255,.12) }
.langbar__close svg{ width:.875rem; height:.875rem }

/* ---------------------------- header ------------------------------ */
.thead{ border-bottom:1px solid var(--line); background:var(--background) }
.thead__inner{ display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem }
@media (min-width:640px){ .thead__inner{ padding-left:2rem; padding-right:2rem } }
.thead__brand{ display:flex; align-items:center; flex:none }
.thead__logo{ width:auto; height:1.25rem }
.thead__sep{ color:rgba(17,17,17,.25); font-size:.9375rem }
.thead__tool{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.thead__right{ margin-left:auto; display:flex; align-items:center; gap:1rem; flex:none }
.thead__link{ font-size:.8125rem; color:var(--vt-muted); transition:color .2s }
.thead__link:hover{ color:var(--foreground) }
/* På mobil är "Alla verktyg" det första som får stryka på foten: verktygsnamnet
   och språkvalet är viktigare på en skärm som är 360 px bred. */
@media (max-width:559.98px){ .thead__link{ display:none } }

/* -------------------------- språkväljare -------------------------- */
.langsw{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden }
.langsw__b{
  padding:.3125rem .625rem; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  color:var(--vt-faint); background:#fff; transition:color .2s, background .2s;
}
.langsw__b:hover{ color:var(--foreground) }
.langsw__b.is-on{ background:var(--ink); color:#fff }
.langsw--foot{ margin-top:1.25rem; border-color:rgba(255,255,255,.18) }
.langsw--foot .langsw__b{ background:transparent; color:rgba(255,255,255,.55) }
.langsw--foot .langsw__b:hover{ color:#fff }
.langsw--foot .langsw__b.is-on{ background:#fff; color:var(--ink) }

/* ---------------------------- footer ------------------------------ */
.tfoot{ background:var(--ink); color:#fff; padding:4rem 1.25rem 2rem; margin-top:4rem }
@media (min-width:640px){ .tfoot{ padding-left:2rem; padding-right:2rem } }
.tfoot__cols{ display:grid; gap:2.5rem }
@media (min-width:768px){ .tfoot__cols{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem } }
.tfoot__logo{ width:auto; height:1.6875rem }
.tfoot__tagline{ margin-top:1rem; max-width:32ch; font-size:.875rem; line-height:1.7; color:rgba(255,255,255,.55) }
.tfoot__title{ font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.4); margin-bottom:1rem }
.tfoot__col ul{ display:flex; flex-direction:column; gap:.625rem }
.tfoot__col a{ font-size:.875rem; color:rgba(255,255,255,.75); transition:color .2s }
.tfoot__col a:hover{ color:#fff }
.tfoot__base{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.75rem; color:rgba(255,255,255,.4);
}