/* ============================================================
   mssgs - fancy-v2-light redesign (design source of truth:
   mssgs-design-system/project/ui_kits/website/fancy-v2-light.html)
   Loaded AFTER core.css on every page: defines the new tokens,
   remaps the legacy variables to the new palette, and styles the
   shared shell (aurora, glass nav pill, footer, buttons).
   Light theme only.
   ============================================================ */

:root {
  /* Forest green scale (fancy-v2-light override of the DS green) */
  --green-50:#eef3ec; --green-100:#d9e6d8; --green-200:#b4cfb6; --green-300:#7fae88;
  --green-400:#4f8f63; --green-500:#2f6e48; --green-600:#265f3e; --green-700:#1f4f34;
  --green-800:#193f2a; --green-900:#132f20;
  --green-mint:#5da97a; --green-teal:#2e6b4b; --green-cyan:#8fc7a5; --green-voice:#3f7f58;
  --green-btn:#265f3e; --green-btn-br:#6fa584; --green-sage:#5c6b58;

  --brand:var(--green-500);
  --brand-hover:var(--green-600);
  --brand-contrast:#f7f3e8;
  --shadow-glow:0 4px 20px rgba(38,95,62,.22);
  --shadow-green-glow:0 2px 8px rgba(38,95,62,.3);

  /* Light-warm surface/ink tokens (--w-*) */
  --w-focus:rgba(51,117,77,.45); --w-glow:rgba(51,117,77,.16); --w-onbrand:#f7f3e8;
  --w-voicebg:rgba(63,127,88,.09); --w-voiceline:rgba(63,127,88,.22); --w-voicedot:rgba(63,127,88,.7);
  --w-ink:#20301f; --w-ink2:#33402f; --w-ink3:#54604d; --w-mut:#525f4c; --w-mut2:#5d6956;
  --w-ph:#9aa08c; --w-ph2:#8d9380; --w-faint:#c6c8b8;
  --w-nav:rgba(255,253,244,.5); --w-nav-tight:rgba(255,253,244,.72); --w-float:rgba(253,250,241,.92);
  --w-inset:rgba(35,40,25,.05); --w-appinset:#17191d;
  --w-ring:#fffdf4; --w-ring2:#fffdf4; --w-line:rgba(50,55,30,.1); --w-line2:rgba(50,55,30,.14);
  --w-backdrop:rgba(26,32,24,.4); --w-panel:rgba(252,249,240,.97);
  --w-input-bg:rgba(50,55,30,.04); --w-input-line:rgba(50,55,30,.18); --w-dash:rgba(50,55,30,.24);
  --w-disabled-bg:#e5e2d2; --w-disabled-ink:#a3a48e; --w-voice:var(--green-700);

  /* App (dark demo window) tokens from the design system */
  --app-root:#161a1f; --app-frame:#2c2d32; --app-chat:#323338; --app-hover:#414248;
  --app-border:#393a3f;
  --text-hi:#dfe0e2; --text-mid:#b5bac1; --text-low:#9b9ca2; --text-faint:#72767d; --text-time:#aeb0b5;
  --danger:#ed4245;
  --name-green:#5bad6d; --name-blue:#68a8da; --name-purple:#ab93e6; --name-orange:#d99a5c;

  /* Site surface tokens (DS light) used by form components */
  --site-card:#ffffff; --site-ink:#1d1d1f; --site-ink-2:#515154; --site-ink-3:#86868b;
  --site-hair:#e8e8ed; --site-bg-alt:#f5f5f7; --site-bg-soft:#fbfbfd;
  --focus-ring:#3b82f6;

  /* Type (metric-matched fallbacks keep CLS near zero during font load) */
  --font-display:'Bricolage Grotesque','Bricolage Fallback','Hanken Grotesk',sans-serif;
  --font-sans:'Hanken Grotesk','Hanken Fallback',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'SF Mono','Menlo','Consolas',monospace;

  /* Motion / radii */
  --ease-standard:cubic-bezier(0.25,0.1,0.25,1);
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms;
  --radius-pill:980px;

  /* ---- Legacy variable remap (reskins every carried-over page) ---- */
  --bg-primary:#ebe4d3;
  --bg-secondary:#f1ebdb;
  --bg-tertiary:#e7e0cd;
  --bg-card:#fdfaf1;
  --bg-nav:rgba(255,253,244,.72);
  --bg-input:#fdfaf1;
  --text-primary:#20301f;
  --text-secondary:#54604d;
  --text-muted:#525f4c;
  --text-light:#5d6956;
  --gray-500:#5d6956;
  --border-color:rgba(50,55,30,.14);
  --border-light:rgba(50,55,30,.1);
  --blue:var(--green-600);
  --blue-hover:var(--green-700);
  --blue-light:rgba(51,117,77,.12);
  --green:var(--green-500);
  --green-light:rgba(51,117,77,.12);
  --font-body:'Hanken Grotesk','Hanken Fallback',-apple-system,'Segoe UI',sans-serif;
  --shadow-sm:0 1px 2px rgba(31,35,33,.04), 0 2px 6px rgba(31,35,33,.04);
  --shadow-md:0 2px 4px rgba(31,35,33,.03), 0 8px 24px rgba(31,35,33,.07);
  --shadow-lg:0 10px 30px rgba(31,35,33,.07);
}

/* Bricolage Grotesque and Hanken Grotesk are Latin-only subsets, so a Cyrillic
   or Greek page would fall through to whatever the browser picks per glyph (in
   practice the metric-adjusted Arial fallback). Those languages ask for the
   system UI faces directly instead, which do carry both scripts. */
:lang(ru),:lang(uk),:lang(bg),:lang(el){
  --font-display:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Roboto,'Helvetica Neue',Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{background:#ebe4d3;color:#33402f;font-family:var(--font-sans)}
a{color:var(--green-700)}
a:hover{color:var(--green-800)}
h1,h2{font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:-0.03em!important}
::selection{background:rgba(51,117,77,.22)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#c8c1ac;border-radius:5px}
section{scroll-margin-top:80px}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.muted{color:var(--w-mut)}

/* ---- Aurora background ---- */
.aurora{position:fixed;inset:0;z-index:-2;background:#ebe4d3;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(100px)}
.au1{width:980px;height:980px;left:50%;top:-520px;margin-left:-490px;background:radial-gradient(circle,rgba(51,117,77,.2),transparent 62%);opacity:.55;animation:auDrift1 40s var(--ease-standard) infinite alternate}
.au2{width:760px;height:760px;left:-340px;top:8%;background:radial-gradient(circle,rgba(176,141,87,.18),transparent 62%);opacity:.45}
@keyframes auDrift1{to{transform:translate(40px,60px) scale(1.05)}}

/* ---- Glass primitives ---- */
.glass-pill{position:relative;background:var(--w-nav);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:980px;isolation:isolate;box-shadow:rgba(31,35,33,.08) 0 4px 20px}
.glass-pill::before{content:'';position:absolute;inset:0;border-radius:980px;padding:1px;background:conic-gradient(from 135deg at 50% 50%,rgba(0,0,0,.14) 0deg,rgba(0,0,0,.05) 60deg,rgba(0,0,0,.02) 120deg,rgba(0,0,0,.02) 240deg,rgba(0,0,0,.05) 300deg,rgba(0,0,0,.14) 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.glass-tile{position:relative;background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:30px;isolation:isolate;text-align:left;box-shadow:0 10px 30px rgba(31,35,33,.07)}
.glass-tile::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;background:conic-gradient(from 135deg at 50% 50%,rgba(0,0,0,.12) 0deg,rgba(0,0,0,.05) 60deg,rgba(0,0,0,.03) 120deg,rgba(0,0,0,.03) 240deg,rgba(0,0,0,.05) 300deg,rgba(0,0,0,.12) 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.glass-input{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:8px;padding:10px 12px;isolation:isolate}
.glass-input::before{content:'';position:absolute;inset:0;border-radius:8px;padding:1px;background:conic-gradient(from 135deg at 50% 50%,rgba(0,0,0,.16) 0deg,rgba(0,0,0,.06) 60deg,rgba(0,0,0,.03) 120deg,rgba(0,0,0,.03) 240deg,rgba(0,0,0,.06) 300deg,rgba(0,0,0,.16) 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.glyphbtn{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 5px;border-radius:5px;background:#e3ddca;color:#54604d;font-size:10px;font-weight:700;letter-spacing:.4px}

/* ---- Buttons (DS Button, site surface) ---- */
.btn-f{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-slow) var(--ease-standard),box-shadow var(--dur-slow) var(--ease-standard),color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.btn-f-primary{background:var(--brand);color:var(--brand-contrast)}
.btn-f-primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-glow);color:var(--brand-contrast)}
.btn-f-secondary{background:var(--site-card);color:var(--site-ink);border-color:var(--site-hair)}
.btn-f-secondary:hover{background:var(--site-bg-soft);border-color:#d2d2d7;color:var(--site-ink)}
.btn-f-sm{padding:8px 18px;font-size:14px;gap:8px;border-radius:8px}
.btn-f-lg{padding:16px 32px;font-size:17px;border-radius:12px}
.btn-f-pill{border-radius:980px}
.btn-f-full{width:100%}
.btn-f:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
/* A phone's buttons: a label too long for its button takes two lines
   instead of running past it. The side padding narrows in a narrow
   container (it is the full 26px from a 312px one up), so a label that
   nearly fits stays on one line, and the line height grows for a label on
   two lines while the padding gives it back, so a one-line button keeps its
   height. */
@media (max-width:560px){
  .btn-f{white-space:normal;text-align:center;text-wrap:balance;line-height:1.15;padding:calc(14px - .075em) clamp(12px,calc(50% - 130px),26px)}
  .btn-f-sm{padding:calc(8px - .075em) 18px}
  .btn-f-lg{padding:calc(16px - .075em) clamp(12px,calc(50% - 124px),32px)}
}
/* The narrowest phones: a word longer than its line ("Schwachstellen-
   management", "Udviklerdokumentation") breaks inside instead of pushing
   the page wider than the screen. Only there: on a wider phone such a word
   mostly sits in its box's padding, which reads better than a break. The
   rule sits on blocks of text and is inherited by the links in them; a link
   or button that is a layout box of its own (the nav's wordmark) keeps its
   words whole. */
@media (max-width:359px){
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,blockquote,.btn-f,.cta-button{overflow-wrap:anywhere}
}
/* A page title sits in the page's own gutter, with no card padding to run
   into: on any phone a word longer than the line ("Fællesskabsmoderatorer",
   "sisäänrakennettuna") breaks rather than widen the page. */
@media (max-width:560px){h1{overflow-wrap:anywhere}}
/* Disabled: the DS disabled tokens, so a button that cannot be pressed stops looking like one that can.
   A busy button is disabled too, but it is working, not unavailable: it keeps its colour and the flow dims it. */
.btn-f:disabled:not(.is-busy),.btn-f[aria-disabled="true"]:not(.is-busy),
.btn-f:disabled:not(.is-busy):hover,.btn-f[aria-disabled="true"]:not(.is-busy):hover{background:var(--w-disabled-bg);color:var(--w-disabled-ink);border-color:transparent;box-shadow:none;cursor:not-allowed}

/* ---- Fixed glass nav ---- */
.fnav-wrap{position:fixed;top:20px;left:0;right:0;z-index:1000;display:flex;justify-content:center;pointer-events:none;transition:top .3s var(--ease-standard)}
.fnav-wrap.tight{top:12px}
.fnav{pointer-events:auto;display:flex;align-items:center;gap:26px;padding:10px 12px 10px 20px;transition:all .3s var(--ease-standard)}
.fnav-wrap.tight .fnav{gap:20px;padding:7px 9px 7px 16px;background:var(--w-nav-tight)}
.fnav-logo{display:flex;align-items:center;gap:8px;color:var(--w-ink);font-weight:600;font-size:16px;text-decoration:none}
.fnav-logo:hover{color:var(--w-ink)}
.fnav-logo img,.fnav-logo svg{width:22px;height:22px;display:block}
.navlink-d{font-size:14px;font-weight:500;color:#5f6b57;transition:color 200ms var(--ease-standard);text-decoration:none}
.navlink-d:hover{color:#20301f}
.fnav-lang-wrap{position:relative}
.fnav-lang{font-size:12.5px;font-weight:600;color:#5f6b57;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;list-style:none;padding:4px 2px;border-radius:8px}
.fnav-lang::-webkit-details-marker{display:none}
.fnav-lang:hover{color:#20301f}
.fnav-lang:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.fnav-lang-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:60;min-width:170px;max-height:min(560px,calc(100vh - 96px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:8px;border-radius:14px;display:flex;flex-direction:column;background:var(--bg-card);backdrop-filter:none;-webkit-backdrop-filter:none}
.fnav-lang-opt{display:block;flex-shrink:0;padding:8px 12px;border-radius:9px;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--w-ink2);text-decoration:none;white-space:nowrap}
.fnav-lang-opt:hover{background:rgba(51,117,77,.1);color:var(--w-ink)}
.fnav-lang-on{color:var(--w-ink);font-weight:600}
.navlink-on{color:#20301f;font-weight:600}
.fnav-burger{display:none;border:none;background:transparent;cursor:pointer;color:#20301f;font-size:16px;padding:6px 8px;border-radius:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.fnav-burger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.fnav-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:230px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:10px;border-radius:16px;display:flex;flex-direction:column;background:var(--w-float);pointer-events:auto}
.fnav-menu>*{flex-shrink:0}
.fnav-menu[hidden]{display:none}
.fnav-menu a{display:block;padding:11px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--w-ink2);text-decoration:none}
.fnav-menu a:hover{background:rgba(51,117,77,.1);color:var(--w-ink)}
.fnav-menu-lang{border-top:1px solid var(--w-line);margin-top:6px;padding-top:8px;display:flex;flex-wrap:wrap;gap:2px}
.fnav-menu-lang a{padding:8px 10px!important;font-family:var(--font-sans);font-size:13.5px!important;color:var(--w-mut)!important}
.fnav-menu-lang a.fnav-lang-on{color:var(--w-ink)!important;font-weight:600!important}
/* Below 840px the pill is logo, call to action and burger, and the call to
   action's label decides its width ("Създайте своята група" is twice
   "Start your group"). The pill never grows past the screen: a label that
   does not fit takes two lines inside the same 44px button, and a phone
   tightens the spacing first so most labels keep one. */
@media (max-width:840px){
  .fnav .navlink-d,.fnav .fnav-lang-wrap{display:none}
  .fnav,.fnav-wrap.tight .fnav{gap:14px}
  .fnav{max-width:calc(100% - 16px)}
  .fnav-burger{display:inline-flex}
  .fnav .btn-f-sm{min-height:44px;padding:5px 20px;line-height:1.1;white-space:normal;text-align:center;text-wrap:balance}
  .fnav-wrap{flex-direction:column;align-items:center}
  .fnav-wrap .fnav{position:relative}
}
@media (max-width:420px){
  .fnav,.fnav-wrap.tight .fnav{gap:10px;padding-left:16px;padding-right:8px}
  .fnav .btn-f-sm{padding:5px 16px}
}
@media (min-width:841px){.fnav-menu{display:none!important}}

.eyebrow-d{font-size:14px;font-weight:600;color:var(--green-700)}

/* ---- Footer (design: FancyFooter) ---- */
.ffooter{border-top:1px solid var(--w-line);padding:44px 0;position:relative}
.ffooter-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.ffooter-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ffooter-brand img,.ffooter-brand svg{width:20px;height:20px;display:block}
.ffooter-pagelinks{display:flex;gap:14px;flex-wrap:wrap}
.ffooter-pagelinks a{color:var(--w-mut2);font-size:12px;text-decoration:none;display:inline-block;padding:6px 0}
.ffooter-pagelinks a:hover{color:var(--w-ink)}
.ffooter-brand b{color:var(--w-ink2);font-weight:600;font-size:15px}
.ffooter-tag{font-size:13px;color:var(--w-mut2)}
.ffooter-links{display:flex;gap:22px;flex-wrap:wrap}
.ffooter-links a{font-size:13px;color:var(--w-mut);text-decoration:none;display:inline-block;padding:8px 0}
.ffooter-links a:hover{color:var(--w-ink)}
.ffooter-badges{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--w-mut2);flex-wrap:wrap}
.ffooter-badges span{padding:4px 10px;border-radius:6px;border:1px solid var(--w-line2);white-space:nowrap}
/* Third-party verification mark (eu-alt). It keeps the 360x96 the badge was
   drawn at - the size eu-alt's own embed code asks for, and the size its small
   print stays readable at - and shrinks only when the viewport is narrower. */
.ffooter-verify{margin-top:22px}
.ffooter-verify a{display:block;width:max-content;max-width:100%;border-radius:13px;transition:transform .15s ease,box-shadow .15s ease}
.ffooter-verify a:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(50,55,30,.1)}
.ffooter-verify a:focus-visible{outline:2px solid var(--w-focus);outline-offset:3px}
.ffooter-verify img{width:360px;height:auto;max-width:100%;display:block}
.ffooter-sub{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:12px;color:var(--w-mut2)}
.ffooter-sub a{color:var(--w-mut);font-size:12px}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.reveal.in{opacity:1;transform:none}
.fadein{opacity:0;animation:softIn .8s var(--ease-standard) forwards;animation-delay:var(--d,0s)}
@keyframes softIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- Legacy page-shell reskin (carried-over pages) ---- */
main{position:relative}
.page-hero h1,.section-header h2{color:var(--w-ink)}
.skip-to-content{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--brand-contrast);padding:10px 16px;border-radius:0 0 8px 0;z-index:2001}
.skip-to-content:focus{left:0}
.btn-primary{background:var(--brand)!important;color:var(--brand-contrast)!important;border-color:transparent!important}
.btn-primary:hover{background:var(--brand-hover)!important;box-shadow:var(--shadow-glow)!important}
.theme-toggle{display:none!important}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .aurora i{animation:none!important}
  .fadein{animation:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .btn-f,.fnav,.fnav-wrap{transition:none}
}

/* Sub-sites (blog.mss.gs, docs.mss.gs): a slim full-width bar and a light
   footer instead of the site's floating nav, so each reads as a site of its
   own. The bar is 64px tall and fixed, inside the top space every page already
   keeps free for the floating nav. Markup: templates/subsite-chrome.mjs. */
.subnav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(244,239,226,.86);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--w-line)}
.subnav-inner{max-width:1180px;height:64px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.subnav-brand{display:flex;align-items:center;gap:11px;min-width:0}
.subnav-home{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--w-ink);flex:none}
.subnav-brand svg{width:21px;height:27px;flex:none}
.subnav-name{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.subnav-label{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--green-700);text-decoration:none;padding-left:11px;border-left:1px solid var(--w-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subnav-home:hover .subnav-name,.subnav-label:hover{text-decoration:underline}
.subnav-end{display:flex;align-items:center;gap:18px;flex:none}
.subnav-site{font-size:14px;font-weight:600;color:var(--w-ink2);text-decoration:none}
.subnav-site:hover{color:var(--w-ink);text-decoration:underline}
.subnav .fnav-lang-menu{top:calc(100% + 16px)}
.subfoot{border-top:1px solid var(--w-line);padding:34px 0 42px;position:relative}
.subfoot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.subfoot-brand{display:flex;align-items:center;gap:8px;font-size:15px}
.subfoot-home{display:flex;align-items:center;gap:8px;color:var(--w-ink);text-decoration:none}
.subfoot-brand svg{width:16px;height:21px}
.subfoot-label{color:var(--green-700);font-weight:600;text-decoration:none;padding-left:8px;border-left:1px solid var(--w-line)}
.subfoot-home:hover b,.subfoot-label:hover{text-decoration:underline}
.subfoot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.subfoot-links a{font-size:14px;color:var(--w-mut);text-decoration:none}
.subfoot-links a:hover{color:var(--w-ink);text-decoration:underline}
.subfoot-tag{width:100%;margin:0;font-size:13px;color:var(--w-mut2)}
@media (max-width:600px){
  .subnav-inner{padding:0 16px;gap:10px}
  .subnav-end{gap:12px}
  .subnav-site{display:none}
  .subnav-name,.subnav-label{font-size:17px}
}
@media (max-width:440px){
  .subnav-name{display:none}
  .subnav-label{padding-left:0;border-left:none}
}