/* ==========================================================================
   Welkin Landing Page — Fog design system
   Static CSS, no build step. Tokens per specs/active/2026-07-02-landing-page-fog/design.md
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root{
  /* Brand core */
  --wk-ink:         #1E2A28;
  --wk-surface:     #263330;
  --wk-primary:     #3A6B84;
  --wk-primary-600: #315B74;
  --wk-primary-ink: #FFFFFF;
  --wk-sage:        #6E9A8D;
  --wk-pine:        #2E5348;

  /* Surfaces */
  --wk-paper:       #F5F7F6;
  --wk-white:       #FFFFFF;

  /* Neutral ramp */
  --wk-n900:        #1E2A28;
  --wk-n700:        #3D4A47;
  --wk-n500:        #5A6866;
  --wk-n300:        #98A49F;
  --wk-n200:        #DDE4E1;
  --wk-n100:        #F5F7F6;

  /* Semantic */
  --wk-ok:          #1F8A5B;
  --wk-warn:        #C6851A;
  --wk-danger:      #CE4B3E;

  /* Tints */
  --wk-ok-bg:       #E6F3EC;
  --wk-primary-bg:  #E7EFF3;
  --wk-sage-bg:     #EAF1EE;
  --wk-pine-bg:     #E9EFEC;

  /* Fonts */
  --wk-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --wk-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing */
  --wk-s1:4px; --wk-s2:8px; --wk-s3:12px; --wk-s4:16px;
  --wk-s6:24px; --wk-s8:32px; --wk-s12:48px; --wk-s16:64px; --wk-s24:96px;

  /* Radii */
  --wk-r-sm:8px; --wk-r-md:10px; --wk-r-lg:12px; --wk-r-xl:16px;

  /* Elevation */
  --wk-shadow-sm: 0 1px 2px rgba(30,42,40,.05);
  --wk-shadow-md: 0 1px 2px rgba(30,42,40,.04), 0 8px 24px rgba(30,42,40,.07);
  --wk-shadow-lg: 0 2px 4px rgba(30,42,40,.04), 0 16px 48px rgba(30,42,40,.10);

  --wk-container: 1080px;
}

/* --------------------------------------------------------------- Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--wk-font-ui);
  color:var(--wk-ink);
  background:var(--wk-paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--wk-primary); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .js .wk-reveal{ opacity:1 !important; transform:none !important; }
}

/* ------------------------------------------------------------- Layout */
.wk-container{ max-width:var(--wk-container); margin-inline:auto; padding-inline:var(--wk-s6); }
.wk-section{ padding-block:clamp(64px, 9vw, 112px); }

/* ------------------------------------------------------------- Type */
.wk-eyebrow{
  font-family:var(--wk-font-mono);
  font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--wk-n300); margin:0 0 var(--wk-s4);
}
.wk-eyebrow--primary{ color:var(--wk-primary); }
.wk-h1{
  font-size:clamp(38px, 5.4vw, 64px); font-weight:700; letter-spacing:-.045em;
  line-height:1.02; margin:0 0 var(--wk-s4);
}
.wk-h2{
  font-size:clamp(28px, 3.6vw, 40px); font-weight:700; letter-spacing:-.03em;
  line-height:1.08; margin:0 0 var(--wk-s3);
}
.wk-h3{ font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0 0 var(--wk-s2); }
.wk-lead{ font-size:17.5px; color:var(--wk-n500); max-width:600px; margin:0 0 var(--wk-s6); }
.wk-body{ font-size:15px; margin:0 0 var(--wk-s3); }
.wk-small{ font-size:13.5px; }
.wk-mono{ font-family:var(--wk-font-mono); }

.wk-section-head{ margin-bottom:clamp(40px, 6vw, 72px); }
.wk-section-head--center{ text-align:center; }
.wk-section-head--center .wk-lead{ margin-inline:auto; }

/* ------------------------------------------------------------- Buttons */
.wk-btn{
  font-family:var(--wk-font-ui); font-size:14px; font-weight:600;
  padding:11px 18px; border-radius:var(--wk-r-md);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wk-btn:hover{ transform:translateY(-1px); }
.wk-btn:active{ transform:translateY(0); }
.wk-btn--primary{ background:var(--wk-primary); color:var(--wk-primary-ink); box-shadow:var(--wk-shadow-sm); }
.wk-btn--primary:hover{ background:var(--wk-primary-600); box-shadow:var(--wk-shadow-md); }
.wk-btn--ghost{ background:transparent; border-color:var(--wk-n200); color:var(--wk-ink); }
.wk-btn--ghost:hover{ border-color:var(--wk-n300); background:var(--wk-white); }
.wk-on-dark .wk-btn--ghost{ border-color:#3A4A47; color:var(--wk-paper); }
.wk-on-dark .wk-btn--ghost:hover{ border-color:#5A6866; background:transparent; }

/* ------------------------------------------------------------- Chips */
.wk-chip{
  display:inline-block; width:max-content;
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px;
  background:var(--wk-paper); color:var(--wk-n500);
}
.wk-chip--persona{
  background:var(--wk-primary-bg); color:var(--wk-primary);
  font-family:var(--wk-font-mono); font-weight:500; font-size:11px;
}
.wk-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px;
}
.wk-badge--live{ background:var(--wk-ok-bg); color:var(--wk-ok); }
.wk-badge--sso{ background:var(--wk-primary-bg); color:var(--wk-primary); }
.wk-badge--audit{ background:var(--wk-sage-bg); color:#4D7D6D; }

/* ------------------------------------------------------------- Logos */
.wk-logos{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wk-logo{
  font-family:var(--wk-font-mono); font-size:11px;
  background:var(--wk-white); border:1px solid var(--wk-n200);
  color:var(--wk-n500); border-radius:var(--wk-r-sm); padding:3px 9px;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .18s ease, color .18s ease;
}
.wk-logo:hover{ border-color:var(--wk-primary); color:var(--wk-primary); }
.wk-logo img{ height:12px; width:12px; display:inline-block; }
.wk-logo img.wk-logo-wide{ width:auto; height:11px; }

/* ------------------------------------------------------------- Mocks */
.wk-mock{
  background:var(--wk-white); border:1px solid var(--wk-n200);
  border-radius:var(--wk-r-lg); padding:var(--wk-s4);
  display:flex; flex-direction:column; gap:var(--wk-s2);
  font-size:12px; color:var(--wk-n500); box-shadow:var(--wk-shadow-md);
}
.wk-mock-cap{ font-family:var(--wk-font-mono); font-size:10.5px; color:var(--wk-n300); text-align:center; padding-top:2px; }
.wk-mock-val{ font-family:var(--wk-font-mono); color:var(--wk-primary); font-size:11px; }

.wk-i{ height:12px; width:12px; flex:0 0 auto; }

.wk-dash-row{ display:flex; align-items:center; gap:12px; padding:6px 0; }
.wk-dash-row + .wk-dash-row{ border-top:1px solid #EEF2F0; }
.wk-dash-app{ font-family:var(--wk-font-mono); font-size:11.5px; color:var(--wk-ink); }
.wk-dash-meta{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--wk-font-mono); font-size:10.5px; color:var(--wk-n500);
  white-space:nowrap;
}
.wk-dash-spacer{ flex:1; }
.wk-revoke{
  font-size:10px; font-family:var(--wk-font-mono); color:var(--wk-danger);
  background:#FBEFED; border:1px solid #F2DCD8;
  border-radius:var(--wk-r-sm); padding:2px 7px;
}

.wk-spend-row{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.wk-spend-row + .wk-spend-row{ border-top:1px solid #EEF2F0; }
.wk-spend-label{ font-family:var(--wk-font-mono); font-size:11px; color:var(--wk-ink); width:84px; flex:0 0 auto; }
.wk-spend-bar{ flex:1; height:8px; background:var(--wk-paper); border-radius:4px; overflow:hidden; }
.wk-spend-bar span{ display:block; height:100%; background:var(--wk-primary); opacity:.7; border-radius:4px; }
.wk-spend-amt{ font-family:var(--wk-font-mono); font-size:11px; color:var(--wk-n500); width:52px; text-align:right; flex:0 0 auto; }
.wk-usage-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:4px; border-top:1px solid #EEF2F0; margin-top:2px; }
.wk-updown{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-family:var(--wk-font-mono); color:var(--wk-primary);
  background:var(--wk-primary-bg); border:1px solid #D3E1E8;
  border-radius:20px; padding:2px 9px;
}
.wk-updown .wk-i{ height:10px; width:10px; }

.wk-chat{ gap:7px; }
.wk-bub{ border-radius:11px; padding:8px 11px; font-size:11.5px; max-width:88%; line-height:1.5; }
.wk-bub--a{ background:var(--wk-primary-bg); color:var(--wk-primary); align-self:flex-start; border-bottom-left-radius:4px; }
.wk-bub--u{ background:var(--wk-n200); color:var(--wk-ink); align-self:flex-end; border-bottom-right-radius:4px; }

/* ---------------------------------------------------------------- Nav */
.wk-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,246,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.wk-nav.is-scrolled{ border-bottom-color:var(--wk-n200); box-shadow:var(--wk-shadow-sm); }
.wk-nav-inner{ display:flex; align-items:center; gap:var(--wk-s4); padding-block:14px; }
.wk-wordmark{ display:flex; align-items:center; gap:9px; font-size:20px; font-weight:600; text-decoration:none; color:var(--wk-ink); letter-spacing:-.02em; }
.wk-glyph{ height:15px; width:auto; flex:0 0 auto; display:inline-block; }
.wk-nav-links{ display:flex; align-items:center; gap:var(--wk-s6); margin-left:auto; }
.wk-nav-links a.wk-navlink{ font-size:14px; font-weight:500; color:var(--wk-n500); text-decoration:none; transition:color .18s ease; }
.wk-nav-links a.wk-navlink:hover{ color:var(--wk-ink); }

/* ---------------------------------------------------------------- Hero */
.wk-hero{
  position:relative; overflow:hidden;
}
.wk-hero::before{ /* fog atmosphere */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(58,107,132,.10), transparent 62%),
    radial-gradient(700px 420px at 8% 112%, rgba(110,154,141,.10), transparent 60%);
}
.wk-hero-grid{ position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:center; }
.wk-hero-cta{ display:flex; gap:var(--wk-s3); flex-wrap:wrap; margin-top:var(--wk-s2); }
.wk-hero-note{ font-family:var(--wk-font-mono); font-size:11.5px; color:var(--wk-n300); margin-top:var(--wk-s4); }

/* staggered load-in */
@keyframes wkFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.wk-hero-text > *{ animation:wkFadeUp .7s cubic-bezier(.22,.7,.3,1) both; }
.wk-hero-text > *:nth-child(1){ animation-delay:.05s; }
.wk-hero-text > *:nth-child(2){ animation-delay:.14s; }
.wk-hero-text > *:nth-child(3){ animation-delay:.23s; }
.wk-hero-text > *:nth-child(4){ animation-delay:.32s; }
.wk-hero-text > *:nth-child(5){ animation-delay:.41s; }
.wk-hero-media{ animation:wkFadeUp .9s cubic-bezier(.22,.7,.3,1) .25s both; }

/* ------------------------------------------------------- Hero SVG funnel */
.wk-funnel{ width:100%; height:auto; display:block; }
.wk-funnel .f-card rect{
  fill:var(--wk-white); stroke:var(--wk-n200); stroke-width:1; rx:9;
  filter:drop-shadow(0 4px 10px rgba(30,42,40,.08));
}
.wk-funnel .f-card text{ font-family:var(--wk-font-mono); font-size:11px; fill:var(--wk-ink); }
.wk-funnel .f-card text.dim{ fill:var(--wk-n300); font-size:10px; }
.wk-funnel .f-link{ fill:none; stroke:var(--wk-n300); stroke-width:1.4; stroke-dasharray:5 7; opacity:.8; }
.wk-funnel .f-mouth{ fill:url(#wkLaneGrad); }
.wk-funnel .f-gate{ fill:var(--wk-primary); }
.wk-funnel .f-gates{ font-family:var(--wk-font-mono); font-size:10px; fill:var(--wk-primary); letter-spacing:.12em; }
.wk-funnel .f-zone{
  fill:rgba(46,83,72,.055); stroke:rgba(46,83,72,.30); stroke-width:1.2;
}
.wk-funnel .f-zone-tag{ color:var(--wk-pine); opacity:.85; }
.wk-funnel .f-perim{ font-family:var(--wk-font-mono); font-size:9.5px; fill:var(--wk-pine); letter-spacing:.14em; }
.wk-funnel .f-app rect{ fill:var(--wk-white); stroke:var(--wk-primary); stroke-width:1.4; filter:drop-shadow(0 8px 20px rgba(58,107,132,.18)); }
.wk-funnel .f-app text{ font-family:var(--wk-font-mono); font-size:12px; fill:var(--wk-ink); }
.wk-funnel .f-live{ fill:var(--wk-ok); }
.wk-funnel .f-live-label{ font-family:var(--wk-font-mono); font-size:10px; fill:var(--wk-ok); }

@keyframes wkFloat{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }
.wk-funnel .f-card{ animation:wkFloat 3.8s ease-in-out infinite alternate; }
.wk-funnel .f-card--2{ animation-delay:-1.2s; }
.wk-funnel .f-card--3{ animation-delay:-2.3s; }
.wk-funnel .f-card--4{ animation-delay:-3.1s; }

@keyframes wkFlow{ to{ stroke-dashoffset:-48; } }
.wk-funnel .f-link{ animation:wkFlow 2.6s linear infinite; }


@keyframes wkBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.wk-funnel .f-live{ animation:wkBlink 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------ The Lane */
.wk-lane{ position:relative; max-width:880px; margin-inline:auto; }
.wk-lane::before{
  content:""; position:absolute; top:6px; bottom:0; left:50%;
  width:2px; margin-left:-1px; background:var(--wk-n200); border-radius:2px;
}
.wk-lane-stop:last-child{ padding-bottom:var(--wk-s2); }
.wk-lane-node{
  position:absolute; left:50%; transform:translateX(-50%); top:0;
  height:14px; width:14px; border-radius:50%;
  background:var(--wk-white); border:3px solid var(--wk-primary); z-index:1;
}
.wk-lane-stop{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--wk-s2); padding:28px 0 var(--wk-s8);
}
.wk-lane-stop > *:not(.wk-lane-node){ background:var(--wk-paper); padding-inline:10px; }
.wk-lane-stop--minor{ padding-top:var(--wk-s2); padding-bottom:var(--wk-s4); }
.wk-lane-label{
  font-family:var(--wk-font-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--wk-ink); margin:0;
}
.wk-lane-stop .wk-body{ margin:0; }
.wk-lane-stop .wk-logos{ justify-content:center; }

.wk-gate{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  column-gap:72px; align-items:center; padding:var(--wk-s6) 0;
}
.wk-gate .wk-lane-node{ top:50%; transform:translate(-50%,-50%); }
.wk-gate-copy{ text-align:right; }
.wk-gate--flip .wk-gate-copy{ order:2; text-align:left; }
.wk-gate--flip .wk-gate-mock{ order:1; justify-self:end; }
.wk-gate-mock{ justify-self:start; width:100%; max-width:400px; }
.wk-gate-tag{
  font-family:var(--wk-font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wk-primary); margin:0 0 var(--wk-s2);
}
.wk-gate-copy .wk-h3{ margin-bottom:4px; }
.wk-gate-copy .wk-body{ margin:0; color:var(--wk-n500); }

/* destinations: one line in welkin.yaml decides where it lands */
.wk-yaml-wrap{ max-width:600px; margin:0 auto; }
.wk-yaml{
  background:var(--wk-white); border:1px solid var(--wk-n200);
  border-radius:var(--wk-r-lg); box-shadow:var(--wk-shadow-md);
  overflow:hidden; text-align:left;
}
.wk-yaml-head{
  font-family:var(--wk-font-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--wk-n300); padding:8px 16px; border-bottom:1px solid #EEF2F0;
}
.wk-yaml-body{ padding:12px 0; font-family:var(--wk-font-mono); font-size:12.5px; line-height:2; }
.wk-yaml-line{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--wk-s4); padding:0 16px; white-space:nowrap;
}
.wk-yaml .y-k{ color:var(--wk-primary); }
.wk-yaml .y-v{ color:var(--wk-ink); font-weight:500; }
.wk-yaml .y-c{ color:var(--wk-n300); }

/* target options — highlight cycles between the three */
.wk-yaml-opt{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--wk-s4); padding:3px 16px 3px 20px; white-space:nowrap;
  opacity:.55; animation:wkYamlCycle 4.2s infinite;
}
.wk-yaml-opt .opt-code{ display:inline-flex; align-items:center; gap:9px; }
.wk-yaml-opt .wk-i{ height:13px; width:13px; color:var(--wk-primary); }
.wk-yaml-opt.o1{ animation-delay:0s; }
.wk-yaml-opt.o2{ animation-delay:1.4s; }
.wk-yaml-opt.o3{ animation-delay:2.8s; }
@keyframes wkYamlCycle{
  0%, 31.5%{ background:var(--wk-primary-bg); box-shadow:inset 2px 0 0 var(--wk-primary); opacity:1; }
  33.33%, 98.5%{ background:transparent; box-shadow:none; opacity:.55; }
  100%{ background:var(--wk-primary-bg); box-shadow:inset 2px 0 0 var(--wk-primary); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .wk-yaml-opt{ opacity:1; }
  .wk-yaml-opt.o1{ background:var(--wk-primary-bg); box-shadow:inset 2px 0 0 var(--wk-primary); }
}
.wk-yaml-cap{
  text-align:center; font-size:13.5px; color:var(--wk-n500);
  margin:var(--wk-s3) 0 0;
}

.wk-lane-cta{ text-align:center; margin:var(--wk-s16) 0 0; }

/* ------------------------------------------------------------------ FAQ */
.wk-faq{ max-width:720px; margin-inline:auto; }
.wk-faq details{
  border-bottom:1px solid var(--wk-n200); padding:0;
}
.wk-faq details:first-of-type{ border-top:1px solid var(--wk-n200); }
.wk-faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:var(--wk-s4); padding:var(--wk-s4) 2px;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
}
.wk-faq summary::-webkit-details-marker{ display:none; }
.wk-faq summary::after{
  content:"+"; font-family:var(--wk-font-mono); font-size:18px;
  color:var(--wk-n300); transition:transform .25s ease; flex:0 0 auto;
}
.wk-faq details[open] summary::after{ transform:rotate(45deg); color:var(--wk-primary); }
.wk-faq .a{ padding:0 2px var(--wk-s4); color:var(--wk-n500); font-size:15px; max-width:60ch; }
.wk-faq .a p{ margin:0; }

/* ------------------------------------------------------------- Final CTA */
.wk-cta{ text-align:center; }
.wk-cta .wk-h2{ margin-bottom:var(--wk-s6); }

/* --------------------------------------------------------- Footer (dark) */
.wk-cta-foot{ background:var(--wk-ink); color:var(--wk-paper); }
.wk-foot{ padding-block:var(--wk-s16); }
.wk-foot-grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--wk-s8); }
.wk-foot-col h4{ font-family:var(--wk-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--wk-n300); margin:0 0 var(--wk-s3); font-weight:500; }
.wk-foot-col a{ display:block; font-size:14px; color:#B7C2BE; text-decoration:none; margin-bottom:var(--wk-s2); transition:color .18s ease; }
.wk-foot-col a:hover{ color:var(--wk-white); }
.wk-foot-legal{ font-family:var(--wk-font-mono); font-size:11.5px; color:var(--wk-n300); margin-top:var(--wk-s12); }
.wk-cta-foot .wk-wordmark{ color:var(--wk-white); }

/* --------------------------------------------------------- Scroll reveal */
.js .wk-reveal{ opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,.7,.3,1); }
.js .wk-reveal.is-in{ opacity:1; transform:none; }

/* ------------------------------------------------------------- Responsive */
@media (max-width:860px){
  .wk-hero-grid{ grid-template-columns:1fr; gap:var(--wk-s8); }
  .wk-hero-text{ order:1; }
  .wk-hero-media{ order:2; }
  .wk-nav-links .wk-navlink{ display:none; }
  .wk-foot-grid{ grid-template-columns:1fr 1fr; gap:var(--wk-s6); }
  .wk-section-head{ margin-bottom:var(--wk-s8); }

  .wk-lane::before{ left:10px; margin-left:0; }
  .wk-lane-node{ left:10px; }
  .wk-lane-stop{ align-items:flex-start; text-align:left; padding-left:36px; }
  .wk-lane-stop > *:not(.wk-lane-node){ padding-inline:0; }
  .wk-lane-stop .wk-logos{ justify-content:flex-start; }
  .wk-gate{ grid-template-columns:1fr; row-gap:var(--wk-s4); padding-left:36px; }
  .wk-gate .wk-lane-node{ top:8px; transform:translate(-50%,0); }
  .wk-gate-copy, .wk-gate--flip .wk-gate-copy{ order:1; text-align:left; }
  .wk-gate-mock, .wk-gate--flip .wk-gate-mock{ order:2; }

  .wk-yaml-line{ flex-direction:column; gap:0; white-space:normal; }
  .wk-yaml-opt{ flex-direction:column; align-items:flex-start; gap:0; white-space:normal; }
  .wk-yaml-opt > .y-c{ font-size:11px; padding-left:22px; }
}
@media (max-width:520px){
  .wk-foot-grid{ grid-template-columns:1fr; }
}