/* 作者：claude */
/* 指纹检测站组件样式 V0.1 —— 只引用 tokens.css 里的变量。说明见 UI规范/design-tokens.md 第 10、11 节 */

/* ========== 基础 ========== */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--color-bg-page);color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-body);line-height:var(--line-height-body)}
a{color:var(--color-text-link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.mono{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums}
svg.i{width:var(--icon-size);height:var(--icon-size);flex:none;stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--layout-max-width);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* ========== 页面容器与背景层 ========== */
.page{container-type:inline-size;position:relative;background:var(--color-bg-page);margin:0 auto;overflow:clip;transition:--tier-from var(--motion-tier) var(--ease-standard),--tier-to var(--motion-tier) var(--ease-standard)}
.page>*:not(.glow){position:relative;z-index:var(--z-content)}

/* 背景光影：吸附在可视区域，滚到哪里都在背后 */
.glow{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;pointer-events:none;z-index:var(--z-background)}
.glow i{position:absolute;display:block;border-radius:50%;opacity:var(--glow-opacity)}
.glow .b1{width:70vmax;height:70vmax;left:-18vmax;top:-30vmax;background:radial-gradient(circle,color-mix(in srgb,var(--tier-from) var(--glow-mix-strong),transparent) 0%,transparent 62%);animation:drift1 var(--motion-glow-1) var(--ease-glow) infinite alternate}
.glow .b2{width:62vmax;height:62vmax;right:-16vmax;top:-12vmax;background:radial-gradient(circle,color-mix(in srgb,var(--tier-to) var(--glow-mix-strong),transparent) 0%,transparent 62%);animation:drift2 var(--motion-glow-2) var(--ease-glow) infinite alternate}
.glow .b3{width:66vmax;height:66vmax;left:10vmax;bottom:-36vmax;background:radial-gradient(circle,color-mix(in srgb,var(--tier-from) var(--glow-mix-soft),transparent) 0%,transparent 60%);animation:drift3 var(--motion-glow-3) var(--ease-glow) infinite alternate}
.glow .b4{width:52vmax;height:52vmax;right:-10vmax;bottom:-26vmax;background:radial-gradient(circle,color-mix(in srgb,var(--tier-to) var(--glow-mix-soft),transparent) 0%,transparent 60%);animation:drift2 var(--motion-glow-4) var(--ease-glow) infinite alternate-reverse}
@keyframes drift1{0%{transform:translate(0,0) rotate(0) scale(1)}100%{transform:translate(24vmax,14vmax) rotate(60deg) scale(1.15)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-24vmax,16vmax) scale(1.2)}}
@keyframes drift3{0%{transform:translate(-20vmax,6vmax) scale(.9)}100%{transform:translate(20vmax,-14vmax) scale(1.3)}}

/* 首屏纹理：图块由脚本生成后写入 --texture-tile */
.texture{position:absolute;left:0;right:0;top:0;height:calc(100% + var(--texture-extend));z-index:var(--z-background);pointer-events:none;opacity:var(--texture-opacity);filter:blur(var(--texture-blur));
  background-color:color-mix(in srgb,var(--tier-from) var(--texture-mix),var(--color-bg-page));
  -webkit-mask-image:var(--texture-tile),linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%);mask-image:var(--texture-tile),linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%);
  -webkit-mask-size:var(--texture-tile-size),100% 100%;mask-size:var(--texture-tile-size),100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-position:center 0,0 0;mask-position:center 0,0 0;
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ========== 顶部导航 NavBar ========== */
.nav{border-bottom:var(--border-default);background:var(--color-surface-nav)}
.nav .wrap{display:flex;align-items:center;gap:var(--space-6);height:var(--layout-nav-height)}
.logo{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-brand);letter-spacing:var(--letter-spacing-brand)}
.logo svg{width:var(--icon-size-brand);height:var(--icon-size-brand);stroke:var(--color-accent);fill:none;stroke-width:var(--icon-stroke-brand)}
.nav nav{display:flex;gap:var(--space-1);flex:1}
.nav nav a{color:var(--color-text-secondary);padding:var(--space-1h) var(--space-2h);border-radius:var(--radius-sm);font-size:var(--font-size-body-sm)}
.nav nav a:hover,.nav nav a.on{color:var(--color-text-primary);background:var(--color-surface-card);text-decoration:none}
.nav .ver{font-size:var(--font-size-micro);color:var(--color-text-tertiary)}
.menu-btn{display:none;border:var(--border-strong);background:transparent;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2)}

/* ========== 首屏 Hero ========== */
.hero{position:relative;padding-block:var(--space-11) var(--space-7);text-align:center}
.hero .eyebrow{font-size:var(--font-size-caption);color:var(--color-text-tertiary);letter-spacing:var(--letter-spacing-eyebrow)}
.ipline{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-1h);flex-wrap:wrap}
.ip{max-width:100%;overflow-wrap:anywhere;font-family:var(--font-family-mono);font-size:var(--font-size-ip);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-ip);line-height:var(--line-height-ip)}
.where{margin-top:var(--space-1h);color:var(--color-text-primary);font-size:var(--font-size-location);display:flex;justify-content:center;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.cc{font-family:var(--font-family-mono);font-size:var(--font-size-micro);border:var(--border-strong);border-radius:var(--radius-xs);padding:0 var(--space-1h);color:var(--color-text-primary)}

/* ========== 图标按钮 IconButton ========== */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-button-size);height:var(--icon-button-size);border-radius:var(--radius-md);border:var(--border-strong);background:var(--color-surface-card);color:var(--color-icon-default)}
.ibtn:hover{color:var(--color-text-primary);border-color:var(--color-accent)}

/* ========== 真实度进度条 AuthBar ========== */
.auth{margin:var(--space-6) auto 0;max-width:var(--layout-bar-max-width);display:grid;gap:var(--space-2);position:relative}
.abar{position:relative;height:var(--layout-bar-height);border-radius:var(--radius-pill);background:var(--color-surface-track);border:1px solid color-mix(in srgb,var(--tier-from) var(--bar-border-mix),var(--color-line-strong));overflow:hidden}
.afill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--tier-from) var(--bar-fill-mix-from),var(--color-bg-page)),color-mix(in srgb,var(--tier-to) var(--bar-fill-mix-to),var(--color-bg-page)));border-radius:var(--radius-pill);transition:width var(--motion-bar) var(--ease-standard);overflow:hidden}
.afill::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(100deg,transparent 0%,var(--color-sheen) 50%,transparent 100%);animation:sheen var(--motion-sheen) ease-in-out infinite}
.abar:not(.run) .afill::after{display:none}
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.atext{position:absolute;inset:0;padding:0 var(--space-4);display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-primary);text-shadow:var(--shadow-text-on-bar)}
.atext svg{width:var(--icon-size);height:var(--icon-size);flex:none}
.atext>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* 文字超长时一行省略，不撑破进度条 */
.abar.low{border:var(--border-incomplete)}
.abar.low .afill{display:none}
.anote,.notice{font-size:var(--font-size-caption-sm);color:var(--color-text-tertiary)}

/* ========== 卡片 Card 与区块标题 SectionHeader ========== */
.card{background:var(--color-surface-card);border:var(--border-default);border-radius:var(--radius-card);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass))}
section.block{padding-block:var(--space-3h)}
.h2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-3)}
.h2 h2{margin:0;font-size:var(--font-size-section);font-weight:var(--font-weight-bold);text-wrap:balance}
.h2 .sub{font-size:var(--font-size-caption);color:var(--color-text-tertiary)}

/* ========== 状态标签 StatusTag ========== */
.tag{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-micro);line-height:var(--line-height-tag);padding:0 var(--space-2);border-radius:var(--radius-tag);white-space:nowrap;font-weight:var(--font-weight-medium)}
.kv .v .tag{white-space:normal;max-width:100%}  /* 面板里整句的提示（如 WebRTC 泄露提示）允许换行 */
.s-pass{color:var(--color-status-pass);background:var(--color-status-pass-bg)}
.s-find{color:var(--color-status-find);background:var(--color-status-find-bg)}
.s-hint{color:var(--color-status-hint);background:var(--color-status-hint-bg)}
.s-inc{color:var(--color-status-incomplete);border:var(--border-incomplete);line-height:calc(var(--line-height-tag) - 2px)}
.s-na{color:var(--color-text-tertiary);padding:0}

/* ========== 值状态 ValueState ========== */
.val{overflow-wrap:anywhere}
.pending,.running,.na{color:var(--color-text-tertiary)}
.running::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-accent);margin-left:var(--space-1h);vertical-align:middle;animation:blink var(--motion-blink) infinite}
.bad{color:var(--color-status-find);text-decoration:underline dashed var(--color-status-find-underline);text-underline-offset:4px}
@keyframes blink{50%{opacity:.2}}

/* ========== 总览卡 OverviewCard ========== */
.ov{display:grid;grid-template-columns:1fr 1fr;padding:var(--space-1h) var(--space-5)}
.ov .col+.col{border-left:var(--border-default);padding-left:var(--space-5)}
.ov .col:first-child{padding-right:var(--space-5)}
.orow{display:grid;grid-template-columns:22px var(--layout-overview-label) minmax(0,1fr);gap:var(--space-2h);align-items:center;padding:11px 0;border-bottom:var(--border-row)}
.orow:last-child{border-bottom:0}
.orow .lbl{color:var(--color-text-primary);font-size:var(--font-size-label);font-weight:var(--font-weight-bold)}
.orow .ic{color:var(--color-icon-default)}
.vline{display:flex;flex-wrap:wrap;gap:var(--space-1h) var(--space-2);align-items:center;min-width:0}
.more{font-size:var(--font-size-caption-sm);white-space:nowrap}

/* 折叠区 Disclosure：评分明细与结论摘要 */
.ov .foot{grid-column:1/-1;border-top:var(--border-default);margin:0 calc(var(--space-5) * -1);padding:0 var(--space-5)}
.foot-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2h);border:0;background:none;padding:var(--space-3) 0;font-size:var(--font-size-body-sm);color:var(--color-text-secondary);text-align:left}
.foot-btn b{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}
.foot-btn .chev{transition:transform var(--motion-chevron)}
.foot-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--space-5);padding-bottom:var(--space-4)}
.detail .dl{padding-right:var(--space-5);border-right:var(--border-default)}
.dmeta{font-size:var(--font-size-caption);color:var(--color-text-tertiary)}
.why{font-size:var(--font-size-caption-sm);color:var(--color-text-tertiary)}
.reason{margin-top:var(--space-2);font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}
.groups{display:grid;gap:0;margin-top:var(--space-3h)}
.grow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-1) var(--space-2h);padding:9px 0;border-top:var(--border-default);font-size:var(--font-size-body-sm)}
.grow .w{color:var(--color-text-tertiary);font-size:var(--font-size-micro);margin-left:var(--space-1h);white-space:nowrap}
.sum h3{margin:0 0 var(--space-2);font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}
.sum ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}
.sum li{overflow-wrap:anywhere;display:grid;grid-template-columns:var(--layout-summary-label) minmax(0,1fr);gap:var(--space-2);font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}
.sum li b{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}
.sum li.warn{grid-template-columns:1fr;color:var(--color-status-incomplete)}

/* ========== 判定卡 JudgementCard ========== */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.jc{padding:var(--space-3h) var(--space-4);display:grid;gap:var(--space-2);align-content:start}
.jc .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-2);align-items:center}
.jc h3{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}
.jc .rule{font-size:var(--font-size-micro);color:var(--color-text-tertiary)}
.jc p{margin:0;font-size:var(--font-size-note);color:var(--color-text-secondary)}
.jc dl{margin:var(--space-1) 0 0;display:grid;gap:var(--space-1h);font-size:var(--font-size-caption);border-top:var(--border-default);padding-top:var(--space-2h)}
.jc dt{color:var(--color-text-tertiary);font-size:var(--font-size-micro)}
.jc dd{margin:0 0 var(--space-1);color:var(--color-text-secondary);overflow-wrap:anywhere}

/* ========== 文字按钮 TextButton（查看解读、展开清单） ========== */
.exp,.fold{border:0;background:none;color:var(--color-text-link);padding:0;justify-self:start}
.exp{font-size:var(--font-size-caption)}
.fold{padding:var(--space-1h) 0;font-size:var(--font-size-note)}
.exp:disabled{color:var(--color-text-tertiary);cursor:default}

/* ========== 专项入口卡 ToolCard ========== */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.tool{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3h) var(--space-4);color:var(--color-text-primary);border-radius:var(--radius-xl);background:var(--color-surface-raised);border:var(--border-default);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass))}
.tool:hover{border-color:var(--color-accent);text-decoration:none}
.tool .ti{width:var(--icon-box-tool);height:var(--icon-box-tool);border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent)}
.tool .ti svg{width:var(--icon-size-tool);height:var(--icon-size-tool)}
.tool b{display:block;font-size:var(--font-size-body);font-weight:var(--font-weight-bold)}
.tool small{color:var(--color-text-tertiary);font-size:var(--font-size-caption-sm)}

/* ========== 数据面板 DataPanel ========== */
.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px var(--space-4);padding-top:var(--space-3)}
.pn{position:relative;padding:var(--space-4h) var(--space-4h) var(--space-2);border-top-left-radius:0}
.pn .tab{position:absolute;left:-1px;top:-30px;height:30px;display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4) 0 var(--space-3h);background:var(--color-surface-card);border:var(--border-default);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-panel);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass))}
.pn .tab svg{color:var(--color-accent)}
.pn .link{position:absolute;right:var(--space-3h);top:-26px;font-size:var(--font-size-caption-sm)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--space-4h)}
.kv.one{grid-template-columns:minmax(0,1fr)}
.kv>div{padding:var(--space-2) 0;border-bottom:var(--border-default);min-width:0}
.kv .k{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-caption-sm);color:var(--color-text-tertiary)}
.kv .k .q{display:inline-grid;place-items:center;width:var(--icon-help-size);height:var(--icon-help-size);border-radius:50%;border:1px solid var(--color-icon-default);font-size:var(--font-size-help);line-height:1;cursor:help}
.kv .v{font-size:var(--font-size-body-panel);margin-top:2px;overflow-wrap:anywhere}  /* UA、哈希、SDP 等不带空格的长值在窄屏换行 */
.kv .v.mono{font-size:var(--font-size-caption)}
.note{font-size:var(--font-size-caption-sm);color:var(--color-text-tertiary);margin:var(--space-2h) 0 var(--space-1h)}

/* ========== 页脚 Footer ========== */
footer{margin-top:var(--space-7);border-top:var(--border-default);padding-block:var(--space-5) 30px;font-size:var(--font-size-caption);color:var(--color-text-tertiary)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:space-between}
footer nav{display:flex;gap:var(--space-4);flex-wrap:wrap}
footer a{color:var(--color-text-secondary)}

/* ========== 轻提示 Toast ========== */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--space-6) + env(safe-area-inset-bottom,0px));background:var(--color-surface-inverse);color:var(--color-text-inverse);padding:7px var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-note);z-index:var(--z-toast)}

/* ========== 窄屏（容器宽度 ≤ 760px） ========== */
@container (max-width:760px){
  .glow .b4{display:none}
  .nav nav,.nav .ver{display:none}
  .menu-btn{display:inline-flex;margin-left:auto}
  .ip{font-size:var(--font-size-ip-mobile)}
  .hero{padding-block:30px var(--space-5)}
  .ov{grid-template-columns:1fr;padding:var(--space-1) var(--space-4)}
  .ov .col+.col{border-left:0;padding-left:0;border-top:var(--border-row)}
  .ov .col:first-child{padding-right:0}
  .orow{grid-template-columns:20px var(--layout-overview-label-mobile) minmax(0,1fr)}
  .ov .foot{margin:0 calc(var(--space-4) * -1);padding:0 var(--space-4)}
  .detail{grid-template-columns:1fr}
  .detail .dl{padding-right:0;border-right:0;border-bottom:var(--border-default);padding-bottom:var(--space-3);margin-bottom:var(--space-3)}
  .cards,.tools{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}
/* 中屏（761—1000px） */
@container (min-width:761px) and (max-width:1000px){
  .cards,.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 减少动态效果：停掉移动类动画，保留颜色过渡 */
@media (prefers-reduced-motion:reduce){*{animation:none!important}.afill,.foot-btn .chev{transition:none!important}}

/* 作者：codex；第 2 批实际页面所需的表单、对照列及原生折叠布局，沿用既有 token。 */
.data-panels{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
.data-panel{padding:var(--space-5);min-width:0;overflow-wrap:anywhere}
.data-panel h3{font-size:var(--font-size-body);margin:0 0 var(--space-3)}
.data-panel pre{white-space:pre-wrap;overflow-wrap:anywhere}
.data-panel figure{margin:var(--space-4) 0}
#canvas-sample{max-width:100%;border:var(--border-default);border-radius:var(--radius-sm)}
dd{margin-inline-start:0}
summary{cursor:pointer;overflow-wrap:anywhere}
.jc summary{color:var(--color-text-link);font-size:var(--font-size-caption)}
.ch-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);padding:var(--space-2) 0;border-bottom:var(--border-default)}
.ch-row>div{min-width:0;overflow-wrap:anywhere}
.ch-row .k{font-size:var(--font-size-caption-sm);color:var(--color-text-tertiary)}
.ch-row .v{font-size:var(--font-size-caption);white-space:pre-wrap}
.time-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.query-form{padding:var(--space-5);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.query-form input{flex:1;min-width:0;width:100%;font:inherit;color:var(--color-text-primary);background:var(--color-surface-track);border:var(--border-strong);border-radius:var(--radius-md);padding:var(--space-2)}
.query-form button{background:var(--color-surface-raised);border:var(--border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4)}
.query-form p{flex-basis:100%}
.query-result{padding:var(--space-5);overflow-wrap:anywhere}
.nav-drop{position:relative;font-size:var(--font-size-body-sm);padding:var(--space-1h) var(--space-2h)}
.nav-drop>div{position:absolute;top:100%;left:0;min-width:max-content;display:grid;background:var(--color-surface-nav);padding:var(--space-2);border:var(--border-default);border-radius:var(--radius-sm);z-index:var(--z-toast)}
.nav #mobile-menu:not([hidden]){display:flex;flex-direction:column;padding:var(--space-3)}
@container(max-width:760px){.time-columns{grid-template-columns:minmax(0,1fr)}.query-form label{flex-basis:100%}.data-panel{padding:var(--space-4)}}

/* 作者：codex；第 3 批目录和站务正文，复用现有布局、字号与色彩 token。 */
.site-main{padding-block:var(--space-6);min-width:0;overflow-wrap:anywhere}
.site-main h1{font-size:var(--font-size-section);margin:0 0 var(--space-4)}
.site-content{padding:var(--space-5);min-width:0;overflow-wrap:anywhere}
.site-content h2{font-size:var(--font-size-body);margin:var(--space-5) 0 var(--space-2)}
.site-content p{margin:0 0 var(--space-3);line-height:var(--line-height-body)}
.site-content section+section{border-top:var(--border-default);margin-top:var(--space-5)}
.example-notice{margin-block:var(--space-4)}
.directory .tool{display:block;min-width:0}
.directory h2{font-size:var(--font-size-body);margin:0 0 var(--space-2)}
.directory p{color:var(--color-text-secondary);margin:0;font-size:var(--font-size-body-sm)}
#contact-email{user-select:text;overflow-wrap:anywhere}
footer nav{flex-wrap:wrap}